Link the popup form to a button shortcode

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(document).ready(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(document).ready(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(document).ready(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(document).ready(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.

Still having trouble? Head over to the forums.

Forums