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

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.

...why'd youleave me?I don'tunderstand!Why would youdo that?
Don't go yet! Give us a shot!