Form in a lightbox (popup)

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.

There are three different ways to do this, depending on where you want to display the trigger to show the form.

Inside a page / post

When editing or adding the page/post, click the Quform icon above the visual editor.

insert-quform

A popup should appear where you can select the form you want to insert. There is an option under this that you can tick to have the form display in a popup instead of in the page content, Display the form in a popup (using Fancybox).

insert-quform-popup

Once you click insert, the popup will close and a shortcode will appear inside the visual editor. You can change the text between the opening and closing shortcodes to the HTML or text you would like to trigger the popup window to show your form.

As a widget

On the WordPress menu, go to Appearances → Widgets, you should see a widget named Quform Popup in the Available Widgets area. Drag the widget to one of the widget-enabled areas on the right hand side. You can then optionally enter a title for the widget, choose the form you want to show and enter the HTML or text content to trigger the popup.

insert-widget-popup

Inside a WordPress template PHP file

You can also add the form in a popup to one of your WordPress template PHP files. To safely add the code you should also wrap it in an if statement to check that the function exists, so that if the plugin is deactivated you don’t get a PHP fatal error on your website. Below is a simple example.

1
<?php if (function_exists('iphorm_popup')) echo iphorm_popup(1, 'Contact us'); ?>
<?php if (function_exists('iphorm_popup')) echo iphorm_popup(1, 'Contact us'); ?>
  • Change the number 1 to your form ID, see Finding the form ID.
  • Change Contact us to the text or HTML to trigger the popup
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy