Can I trigger my pop over form with a button or a link?

The 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 web site.

1. Create a pop over 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.

2. Configuring the form script

In order to trigger the form by clicking the link in a particular element on the web site you need to use API JS. You need to place the code configuration in JSON format inside <script> 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 <script> 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 do not provide any support with editing the HTML code of your form and page. If you are not comfortable with doing so, please contact your web developer.