Link the popup form to a button shortcode

This documentation page is for Quform version 1 and may not be applicable for Quform 2 click here to visit the documentation for Quform 2.

Many themes come with [button] shortcode and you can link it to open the popup form with some simple JavaScript. Add the following code to the Text (or HTML) tab of the WordPress page editor when editing the page.

123
4
5
678
9
10
11
[button link="#form-1"]Click me[/button][iphorm_popup id=1][/iphorm_popup] 
<script type="text/javascript">
jQuery(function ($) {
    $('a[href="#form-1"]').click(function () {        $('.iphorm-fancybox-link-1').click();        return false;
    });
});
</script>
[button link="#form-1"]Click me[/button]
[iphorm_popup id=1][/iphorm_popup]

<script type="text/javascript">
jQuery(function ($) {
    $('a[href="#form-1"]').click(function () {
        $('.iphorm-fancybox-link-1').click();
        return false;
    });
});
</script>

Modify the above code to suit your setup.

  • On line 1, change this to the button shortcode for your theme. The attribute may not be called link you want the URL, href or link of the button to be #form-1
  • On lines 1, 2, 6 and 7 change the number 1 to your form ID.

Adding another button on the same page

Let’s say you want to add a second button on the same page to link to a different form. You’d need to change the href of the button to something different from the first one and duplicate the code above. For example in the code below the href is changed to #form-2 and it will trigger the form with ID 2:

123
4
5
678
9
10
11
[button link="#form-2"]Click me[/button][iphorm_popup id=2][/iphorm_popup] 
<script type="text/javascript">
jQuery(function ($) {
    $('a[href="#form-2"]').click(function () {        $('.iphorm-fancybox-link-2').click();        return false;
    });
});
</script>
[button link="#form-2"]Click me[/button]
[iphorm_popup id=2][/iphorm_popup]

<script type="text/javascript">
jQuery(function ($) {
    $('a[href="#form-2"]').click(function () {
        $('.iphorm-fancybox-link-2').click();
        return false;
    });
});
</script>

Modify the above code to suit your setup.

  • On line 1, change this to the button shortcode for your theme. The attribute may not be called link you want the URL, href or link of the button to be #form-2
  • On lines 2, 6 and 7 change the number 1 to your form ID.
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy