Popup forms can be an efficient way to collect user data or boost interaction on your WordPress site. This tutorial will demonstrate how to have a popup form appear when a link or picture is clicked on a WordPress website.

Step 1: Install and activate the Popup Maker plugin

A plugin that can assist in the creation and display of the form is required in order to build a popup form in WordPress. Popup Creator is among the most often used plugins for this purpose. Either through the Plugins section of your WordPress dashboard or straight from the WordPress repository, you may download and install it.

Step 2: Create a new popup form

Go to the Popups area of your WordPress dashboard and click Add New to build a new popup form after installing and activating Popup Maker. Give your popup form a title before deciding on a trigger. We’ll select the “Click Open” trigger in this instance.

Step 3: Customize your popup form

The popup form needs to be customized next. The drag-and-drop editor allows you to add fields and change the form’s appearance. Additionally, you can specify display rules to regulate the timing of the form’s appearance and select which pages or posts your form will appear on.

Step 4: Add a link or image to trigger your popup form

It’s time to add a link or picture that, when clicked, will cause the popup form to appear after you’ve designed and personalized it. A shortcode offered by the Popup Builder plugin can be used to accomplish this.

For instance, you can use the following shortcode to use a text link to launch your pop-up form:

[popup_trigger id="XXX"]Click here[/popup_trigger]

Replace “XXX” with the ID of your popup form.

If you want to use an image to trigger your popup form, you can use the following shortcode:

[popup_trigger id="XXX"]<img src="your-image-url.jpg" alt="your-image-alt" />[/popup_trigger]

Replace “XXX” with the ID of your popup form, and replace “your-image-url.jpg” with the URL of your image and “your-image-alt” with the alt text for your image.

Step 5: Publish your popup form

You may publish your popup form by saving and publishing it after adding the link or image shortcode to your WordPress website. When the link or picture is clicked, your popup form will now be shown.

Happy creating! Your WordPress website now has a popup form. By using this method, you can easily enhance user interaction on your website and collect useful user data.

For each stage, to provide more thorough code samples.

Step 1: Install and activate the Popup Maker plugin

In your WordPress dashboard, click Plugins > Add New and type “Popup Creator” to install the plugin. When the installation is finished, click “Activate” after clicking “Install Now.”

Step 2: Create a new popup form

Go to Popups > Add New in your WordPress dashboard to create a new popup form. Give your popup a title before selecting a trigger from the menu of alternatives. We’ll use the “Click Open” trigger for this tutorial.

<?php
// Create a new popup form
function create_new_popup() {
    $popup = new PUM_Popup();
    $popup->post_title = 'My Popup Form';
    $popup->popup_theme = 'default';
    $popup->status = 'publish';
    $popup->display_settings['trigger'] = 'click_open';
    $popup->save();
}
add_action( 'init', 'create_new_popup' );
?>

Step 3: Customize your popup form

Use Popup Maker’s drag-and-drop editor to personalize your popup form. You may alter the layout, add fields, and personalize the look of your form. Additionally, you can specify display rules to regulate the timing of the form’s appearance and select which pages or posts your form will appear on.

<?php
// Customize your popup form
function customize_popup() {
    $popup_id = 123; // Replace with the ID of your popup form
    $popup = pum_get_popup($popup_id);
    $popup->add_field(array(
        'type' => 'text',
        'label' => 'Name',
        'name' => 'name',
        'required' => true,
    ));
    $popup->set_layout('form-vertical');
    $popup->save();
}
add_action( 'init', 'customize_popup' );
?>

Step 4: Add a link or image to trigger your popup form

To add a link or image that will trigger your popup form, you can use the following shortcode:

[popup_trigger id="XXX"]Click here[/popup_trigger]

Replace “XXX” with the ID of your popup form. If you want to use an image instead of text, you can use the following shortcode:

[popup_trigger id="XXX"]<img src="your-image-url.jpg" alt="your-image-alt" />[/popup_trigger]

The ID of your popup form should be replaced with “XXX,” and the URL and alt text for your image should be replaced with “your-image-url.jpg” and “your-image-alt,” respectively.

With the following code, you can immediately add this shortcode to your theme files or add it to a post or page using the WordPress editor:

<?php echo do_shortcode('[popup_trigger id="XXX"]Click here[/popup_trigger]'); ?>

Step 5: Publish your popup form

You may publish your popup form after adding the link or image shortcode to your WordPress website by saving and publishing it. The link or image will now trigger the appearance of your popup form.

<?php
// Publish your popup form
function publish_popup() {
    $popup_id = 123; // Replace with the ID of your popup form
    $popup = pum_get_popup($popup_id);
    $popup->status = 'publish';
    $popup->save();
}
add_action( 'init', 'publish_popup' );
?>

And that’s it! With these code examples, you should be

Conclusion