email password
forgot password

How to Bind the Popup Form to Other Elements on the Page

By default, when you use the embed code to add a popup form to your website, the code also adds a link which triggers the popup on click. What if you want to trigger the popup form when you click on an existing element on the page, like an image?

For Regular Sites

Your embed code for a popup form looks like this:

<script type='text/javascript'>var _fo=_fo||[];_fo.push({'m':'true','c':'f3db6d','i':13893});if(typeof fce=='undefined'){var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src=('https:'==window.location.protocol?'https://':'http://')+'formcrafts.com/js/fc.js';var fi=document.getElementsByTagName('script')[0];fi.parentNode.insertBefore(s,fi);fce=1;}</script>

The part highlighted in blue is your unique binding ID. Now, we want to trigger this popup form when user clicks a certain image on the page. The html code for this image is:

To bind the form to this image, we change the html code of the image to this

We altered the image code to add two attributes. The data-target attribute contains our unique binding ID, preceded by #, and the data-toggle attribute contains the string fcmodal.

For WordPress Sites

Firstly, add the embed code for a popup form to your post / page

[formcrafts id='123' type='popup' align='inline'][/formcrafts]

The ID of our form is 123. We wish to trigger the popup form when the user clicks a button. To achieve this, we set the href attribute of the button to this:

https://formcrafts.com/a/123#modal

Our final button could would be something like this:

<a class='btn btn-blue' href='https://formcrafts.com/a/123#modal'>Click Me</a>