Fancybox options

There are three different ways to change the Fancybox options, depending on where the trigger is to show the form.

Inside a page / post

You can do this by adding another attribute to the opening shortcode, called “options” and pass in a JSON formatted string of options. For example, to set the size of the popup to 400×400, use the code below:

[iphorm_popup id=1 name="Contact us" options="{ width: 400, height: 400, autoDimensions: false, onStart: function(){}, onComplete: function(){} }"]Contact us[/iphorm_popup]

Note: the reason you need to add the onStart and onComplete options is that the default Quform popup link has custom code to automatically resize the Fancybox window to wrap your form size.

See the Fancybox Options API for a list of all available options.

As a widget

You can do this by entering a JSON formatted string of options to the Fancybox options field. For example, to set the size of the popup to 400×400, use the code below:

{ width: 400, height: 400, autoDimensions: false, onStart: function(){}, onComplete: function(){} }

Note: the reason you need to add the onStart and onComplete options is that the default Quform popup link has custom code to automatically resize the Fancybox window to wrap your form size.

See the Fancybox Options API for a list of all available options.

Inside a WordPress template PHP file

The format of the iphorm_popup function call is as follows.

1

<?php echo iphorm_popup($formId, $content, $options); ?>

<?php echo iphorm_popup($formId, $content, $options); ?>

• $formId – The form ID [integer]
• $content – The text/HTML to trigger the popup [string]
• $options – JSON formatted options for the Fancybox script [string] (optional)

To set the popup size to 400×400, use the code below.

1

<?php if (function_exists('iphorm_popup')) echo iphorm_popup(1, 'Click here to show the form', '{ width: 400, height: 400, autoDimensions: false, onStart: function(){}, onComplete: function(){} }'); ?>

<?php if (function_exists('iphorm_popup')) echo iphorm_popup(1, 'Click here to show the form', '{ width: 400, height: 400, autoDimensions: false, onStart: function(){}, onComplete: function(){} }'); ?>

In the above example, replace 1 with your form unique ID. The second parameter is a string containing the HTML or text that will trigger the popup to show the form. The third parameter is a JSON formatted string that will be passed to the Fancybox script.

Note: we have added code to automatically resize the Fancybox window to wrap your form size. If you need to set the exact size of Fancybox you will need to disable this by passing in 2 additional options, see below.

See the Fancybox Options API for a list of all available options.

See also

Popup link does not work