Can I trigger my legacy popover form with a button or a link?

The following article is about legacy forms.

Legacy forms are no longer developed and are not available in accounts created after July 18, 2023.

GetResponse List Builder Wizard can help you in creating a standard form that pops up on your page as the visitor enters it. With some code customization, you can also have it triggered by the click in the link or a button on your website.

Create a popover form

Open your existing form or create a new one. In the wizard click on the template and then on Layout on the right. In the Display properties choose Pop over, edit the form and click Save & Publish.

Configure the form script

In order to trigger the form by clicking the link in a particular element on the website, you need to use API JS. You need to place the code configuration in JSON format inside “ tag copied from the wizard Save & Publish step.

Below you can find code snippets as an example how to properly configure the form through API JS.

Configuration

{

  "name": "myuniqueformname",

  "selector": {

    "clickToShow": "#id_click_to_show_element",

    "clickToHide": "#id_click_to_hide_element"

  }

}

Description

“name” – REQUIRED – String – unique identifier

“selector” – OPTIONAL – Object

-> “clickToShow” – OPTIONAL – String – DOM element selector (html element on your website, when clicked shows form)

-> “clickToHide” – OPTIONAL – String – DOM element selector (html element on your website, when clicked close form)

Example

<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8">
     </head>
     <body>
         <a href="#" id="id_click_to_show_element">Show it</a>
         <script type="text/javascript" src="https://app.getresponse.com/view_webform_v2.js?u=Xun&webforms_id=1023903">
             {
             "name": "myuniqueform1",
                 "selector": {
                     "clickToShow": "#id_click_to_show_element"
                 }
             }
         </script>
     </body>
 </html>

Note:

  1. JSON inside the “ tags has to be correct, click the link http://jsonlint.com/ to validate the script.
  2. The configuration cannot be used for inline forms

Optionally you may use our API directly in JavaScript Code (by referring to GRWF2 Object):

var myform = GRWF2.get("myuniqueformname") - get refference to "myuniqueformname" instance of Form object
 myform.show() - show form
 myform.hide() - hide form
 <!doctype html>
     <html lang="en">
     <head>
         <meta charset="utf-8">
     </head>
     <body>
         <button id="button" >Show it</button>
         <script type="text/javascript" src="https://app.getresponse.com/view_webform_v2.js?u=Xun&webforms_id=1023903">{
               "name": "myuniqueform2"
             }
         </script>
         <script>
             var myform = GRWF2.get('myuniqueform2'),
             element = document.getElementById('button');
             element.addEventListener("click", function(){
             myform.show();
           });
         </script>
      </body>
 </html>

While your success is our highest priority, we, unfortunately, don’t provide any support for editing the HTML code of your form and page. If you are not comfortable with doing so, please contact your web developer.

Note: The form will not reappear for users who have already filled in the form, even if they press the button again.

Related articles

Popular resources