How to add a popup on wordpress

New Page

to create a WordPress emergent form

Easily create a WordPress emergent form (2 forms)

by Oussama Tahir on August 25, 2022

Facebook Tweet LinkedIn

how-to-create-a-popup-form-wordpress_b-1

¿Quieres to create an emergent form for your WordPress site?

Using popup forms is a great strategy to grab the attention of your visitors and collect more leads.

If you have chosen the appropriate options, you can easily create custom emergent formulas in WordPress sin

In this article, we will show you how to easily create a WordPress popup form for your website without having to write any code.

In this article

  • Method #1: Create an emergent form with OptinMonster + WPForms
    • Installer OptinMonster
    • Installer WPForms
    • Create a form with WPForms
    • Create a popup form campaign using OptinMonster
    • Obtenga una vista previa y publique su formulario emergente de WordPress
  • Método #2: Crear un formulario emergente con Popup Maker + WPForms
    • Instale los complementos de formulario emergente necesarios
    • Crear un formulario de contacto simple
    • Crear una ventana emergente usando Popup Maker
    • Publicar el formulario emergente usando Popup Maker

Cree su formulario emergente de WordPress ahora

¿Por qué usar un formulario emergente de WordPress?

Es una buena idea que los propietarios de pequeñas empresas coloquen formularios de contacto no solo en su página Contáctenos, sino también en una ventana emergente de WordPress. Esto se debe a que puede ofrecer a sus lectores una forma rápida de comunicarse con usted sin salir de la página en la que se encuentran.

WPForms es el mejor complemento de WordPress Form Builder. ¡Consíguelo gratis!

Además, también puede usar un formulario de contacto emergente de WordPress para:

  • Comentarios:  recopile comentarios solicitando comentarios o incluso creando una encuesta .
  • Suscripción:  cree su lista de boletines por correo electrónico facilitando la suscripción con solo hacer clic en un enlace.
  • Citas permite a los usuarios programar una llamada o una cita.

Entonces, ahora que sabe por qué quiere usar un formulario emergente de WordPress, ¡vamos a ver exactamente cómo hacer uno!

Cómo crear un formulario emergente de WordPress

Hay algunas formas de crear un formulario emergente para su sitio de WordPress. Te mostraremos dos formas diferentes pero fáciles.

En el primer método, utilizaremos una plataforma SaaS (OptinMonster), que se integra perfectamente con WordPress para crear formularios emergentes.

El segundo método involucra complementos que son puramente nativos de WordPress, por lo que puede realizar todos los pasos sin tener que salir de su panel principal de WordPress.

Depende totalmente de usted qué método desea utilizar. Hemos probado ambos métodos y funcionan perfectamente para la creación de formularios emergentes.

Método #1: Crear un formulario emergente con OptinMonster + WPForms

En este método, usaremos OptinMonster para crear una campaña de formulario emergente y luego usaremos WPForms para personalizar los campos dentro del formulario emergente.

Saltemos a ello.

Instalar OptinMonster

OptinMonster is a SaaS service offering conversion optimization tools. While it is full of exciting features designed to turn visitors into paying customers,  we’re only going to focus on its popup form feature in this tutorial.

Although a SaaS service, OptinMonster integrates smoothly with WordPress sites via its plugin. In fact, you can download the OptinMonster plugin for free and build up to 3 campaigns with a total limit of 300 campaign impressions per month without signing up for the paid license.

optinmonster

If you don’t know how to install a WordPress plugin, here are the instructions for adding OptinMonster to your WordPress site.

Later on, you’d probably like to remove the limitations of the free version. Thankfully, you can upgrade to OptinMonster paid license starting at just $9/month.

prix optinmonster

When you’ve set up OptinMonster for your WordPress site, it’s time to move on to the next step.

Install WPForms

It’s possible to create a simple popup form with OptinMonster alone. However, we recommend using WPForms with OptinMonster because this combination opens up a whole new range of customization options for your popup forms.

To get started, purchase a WPForms license that works for you. We recommend WPForms Pro if you’d like to create survey forms and unlock a host of advanced functionalities.

prix de wpforms

After purchasing a license, go ahead and install WPForms on your site.

Create a Form Using WPForms

Once WPForms is activated, you can immediately start creating forms from your WordPress dashboard.

To start, go to WPForms » Add New.

Aggregate new form in WPForms

You should now see the form setup screen where you can name your form and choose a template for it.

For this example, we’ll use the Simple Contact Form template. Press the Use Template button under it to continue.

Simple contact form template

WPForms will quickly load your selected template and take you to the form builder screen. The Simple Contact Form template includes the Name, Email, and Paragraph Text fields.

simple contact form loaded

It’s a good idea to keep your popup form as short and simple as possible to maximize conversions. But you can edit this template and change fields if you’d like.

When you’re happy with how your form looks, go ahead and press Save.

save your popup form

Great job! Your form is now ready. But in order to display it as a popup on your site, we’re going to need some help from OptinMonster as we show in the steps below.

Create a Popup Form Campaign Using OptinMonster

After saving your form, go back to your WordPress dashboard. Then, click on OptinMonster » Campaigns from your WordPress sidebar menu.

optinmonster campaigns

Here, click on the Create Your First Campaign button.

first optinmonster campaign

OptinMonster offers lots of different campaign types. Select Popup as your campaign type.

contextual campaign type

After that, scroll down and choose a template from the available options. Simply hover your cursor over a template and press the Use Template button.

Basic model

OptinMonster will prompt you to give a name to your campaign. Enter a name and press the Start Building button to proceed.

start building

Now, you’ll find yourself on the OptinMonster campaign builder screen, with your selected template loaded.

basic popup template

As you can see, this template is great for capturing name and email information from your customers. If this is what you’d like, you can publish this popup campaign as is without adding the WPForms block.

But if you’d like to include more advanced fields such as a rating field to quickly gather user feedback or simply a text box that can accept comments from users, then WPForms can help you with that.

In the previous step, we used WPForms to create a simple contact form that includes a text box field in addition to the name and email fields. Now, we can simply recall that form to the OptinMonster popup form campaign.

Let’s first edit the popup header to include useful directions for visitors seeing the popup form. Just click on the header text, and type in any message you want.

modifier le texte de l'en-tête de la fenêtre contextuelle

Since we want to include a form we created separately with WPForms here, we’re going to delete the pre-existing optin fields from this popup campaign. You can delete any element from your campaign by hovering your cursor over it and clicking on the Trash icon.

supprimer le champ optin

Now, we can drag and drop the WPForms block right under the campaign header.

bloc wpforms pour OM

Click on the WPForms block after you’ve added it to the campaign. This will open settings where you can select any form created with WPForms to embed in your campaign.

Click the Form Selection dropdown on the left-hand pane of the campaign builder, which will open a list of all the forms you’ve previously created with WPForms. Select a form that you’d like to embed in the popup campaign.

sélectionner le formulaire

Awesome! We’re almost done creating a WordPress popup form using the first method.

Preview and Publish Your WordPress Popup Form

Because OptinMonster uses shortcodes to embed forms made with WPForms, you can’t immediately see a live preview of your form within the popup form campaign.

But you can preview it right before you publish it. To do that, click on the Publish button on the navigation bar on the top.

publier un formulaire contextuel

On this screen, there’s a preview button. Clicking the Preview button will take you to your site’s frontend where the form will pop up on your screen, just like it would for your visitors.

aperçu de la campagne

Now OptinMonster will trigger your WordPress popup form on page load. Here’s how it looks in our example:

Aperçu de la fenêtre contextuelle OM

The preview gives you an opportunity to double-check everything before you’re ready to publish the campaign.

Once you’re happy with how the popup form looks, go ahead and press the Publish button under Publish Status.

Publier le formulaire contextuel

Great! Your campaign is now live. The popup form will now appear for all users visiting your site.

If you want, you can also change the display rules for your WordPress popup form.

Go back to OptinMonster » Campaigns. Find the campaign you just created and hover your cursor over it. Then, click on the Output Settings option.

Paramètres de sortie OM

Here, you can change the visibility of the campaign and set it to be visible only to visitors, logged-in users, or both.

You can also exclude this campaign from selected pages or include it to display only on a few specific pages. It’s entirely up to you to decide which pages your popup form should display on.

paramètres de visibilité avancés om

After changing display rules to your liking, make sure to press the green Save Changes button on the right.

And that’s all you need to do to create a WordPress popup form campaign using OptinMonster and WPForms!

Let’s move on to the next method for achieving the same result.

Method#2: Creating a Popup Form With Popup Maker + WPForms

In the previous method, we used a SaaS service integrated with WordPress to create a popup form campaign. It’s an easy method that should work for all kinds of users.

However, if you’d prefer a solution where you can build a popup form completely from your WordPress dashboard, then the next method is for you.

For this method, we’ll be using two plugins that are completey native to WordPress: Popup Maker and WPForms.

Here’s a video guide walking you through this method on how to add a popup form in WordPress:

For step-by-step written instructions, you can continue reading below:

Install the Needed Popup Form Plugins

To get started, you’ll need to install and activate 2 plugins.

First, you’ll need Popup Maker. Wondering is popup maker free? Yes, you can use the free version for this tutorial and with WPForms.

Click on the blue download button and check out how to install a plugin in WordPress.

créateur de pop-up

Next, you’ll also need the WPForms plugin. Here’s an easy guide on how to install the WPForms plugin.

Create a Simple Contact Form

Next, you’ll want to create the form that you want to put into your WordPress popup form. If you’ve already created a contact form, you can skip this step.

To create your form, go to WPForms » Add New and select a template. For this example, we’ll use a simple contact form. It’s a good idea to keep things simple with WordPress popup forms, so you can maximize your form conversion rates.

sélectionner un modèle de formulaire de contact

Once the form loads, it will have everything you need to get started including:

  • First Name
  • Last Name
  • Email
  • Comment

You can drag and drop any additional fields you want from the left side to the preview window. You can also remove a field by clicking on it and selecting the red trash icon that appears on the right.

comment supprimer un champ de formulaire

Once you’re done with creating your form, you need to click on the save button to store your changes. Your contact form is now ready to go!

And now that we have a form ready, let’s move on to the next step and create a popup in WordPress.

Create a Popup Using Popup Maker

Great, your plugins are installed and activated. Next, we’ll go into the Popup Maker plugin to create your popup. This free WordPress plugin lets you make popups from scratch, easily.

Head to your WordPress dashboard and go to Popup Maker » Add Popup, and you’ll see the popup editing screen appear.

ajouter un nouveau popup dans le créateur de popup

On this screen, you’ll want to enter a name for your popup. Plus, you can also enter an optional display title as we did in this example. Your visitors will be able to see this optional display title.

nommez votre formulaire contextuel

And now it’s time to insert your form into your popup. Click on the Add Form button to select your form.

ajouter un formulaire

An Insert Form screen will appear. Here, you can pick the form you want to insert into this popup by selecting it from the dropdown menu.

sélectionner le formulaire

Once the form is selected, click on the blue Add Form button to add it to your popup.

ajouter un formulaire de contact à la popup wordpress

You’ll see a unique shortcode appear which tells that popup which form to use.

wpforms shortcode pour le formulaire dans le formulaire contextuel wordpress

Great job. Let’s customize a few of the popup settings by scrolling down and starting with Triggers.

Triggers tell your popup when to open. Click on the blue Add New Trigger button.

ajouter un nouveau déclencheur au formulaire contextuel wordpress

On the trigger option window that appears, open the dropdown and select Time Delay/Auto Open. This will trigger the popup to open after your website visitors have been on the page for a set amount of time.

You can set the time for anything you’d like, but we suggest starting with 5 seconds (5,000 milliseconds). When you’re ready, click the Add button to continue.

enregistrer les paramètres de temporisation contextuelle

By default, this popup will show on every page of your WordPress website and to everyone on all devices. You can adjust these settings to target specific people, devices, places (like a post or page), and more under Targeting. In fact, for more advanced settings, check out the Popup Maker documentation.

Next, let’s spruce up the look of your popup by clicking on Display under the popup settings.

modifier les paramètres d'affichage du formulaire popup wordpress

From the Popup Theme dropdown, select a theme for your popup.

You can choose whichever Popup Theme you like. For this example, we’re picking the popular Light Box style.

wordpress popup form theme dropdown

Now, adjust any other settings you’d like and when you’re ready, let’s go ahead and publish your form.

Publish the Popup Form Using Popup Maker

Desplácese hacia arriba en la página hasta la parte superior y haga clic en el botón Publicar para activar su formulario emergente de WordPress.

publicar formulario emerging from wordpress

¡Y ahí lo tienes! Ahora puede obtener una vista previa de su formulario emergente de WordPress para asegurarse de que se ve exactamente como lo desea y ajustar la configuración en consecuencia.

popup creator example when done in lightbox

To make more contact form popups, you can repeat this process and customize the settings and display rules so they appear on different posts or pages etc.

Go back to the edit page to keep an eye on Analytics if you want to know how many people have seen your WordPress popup form.

how to see how many people have viewed your wordpress popup form

Also, if you have set up Google Analytics on your website, you can perform Popup Maker Sequence and track the custom event sequence.

And don’t forget that you can configure your WordPress popup form to connect directly with your email marketing service to make it even easier to organize and automatically communicate with your new contacts.

All right, everything is ready. We hope this article helped you learn how to create a WordPress contact form popup in WordPress.

Next, make user-submitted forms

Do you want to allow guest users to submit posts on your site from the frontend? WPForms is the best complement for us! Check out our guide on how to allow user-submitted posts in WordPress for more information.

There is beaucoup plus you can do with WPForms. For example, you can create a fantastic WordPress date picker form as shown in the guide.

Create your WordPress popup form now

¿Listo para build your formulario? Get started now with the easy WordPress formula builder addon. WPForms Pro includes lots of free plants and offers a 14-day return guarantee.

If this article helps you, follow Facebook and Twitter for more free WordPress tutorials and guides.

Google Google translator

Google Google Translate

Google Traduction


Video How to add a popup on wordpress

Related Posts

How to add seo keywords in wordpress

Contents1 Cómo agregar palabras clave de SEO en WordPress (aumentar el CTR y las clasificaciones)1.1 Post Title1.2 Headline1.3 Header Tags1.4 Introduction and Conclusion1.5 Body Copy1.6 URL1.7 Meta…

How to embed google calendar into wordpress

Contents1 How to Add a Google Calendar in WordPress (Step by Step)2 Add a Google calendar to your website3 calendario de Google3.1 Versatile plans and pricing4 Video…

How to change the logo in wordpress

Contents1 How to Add a Custom Logo to Your Site Header2 Site Logo2.1 Planes y precios versátiles3 Add, remove or edit a custom logo4 Video How to…

How to roll back wordpress version

Contents1 How to Revert WordPress: Undo WordPress Updates (Easy Way)2 How to Downgrade WordPress & Roll Back to a Previous Version2.1 1. A WordPress update included significant changes…

How to rollback wordpress version

Contents1 How to Downgrade WordPress and Revert to an Older Version1.1 1. A WordPress update included significant changes that are not compatible with your theme or plugins1.2…

How to edit footer in wordpress elementor

Contents1 How to Edit Page Headers and Tarts with Elementor in WordPress1.1 Elementor – Header, Footer and Blocks1.2 Instalar y activar el complemento1.3 Add Header or Footer…