Tuesday , November 5 2024
Home > Magezon Extensions > Blue Form Builder Tutorials > How to create popup forms in Blue Form Builder

How to create popup forms in Blue Form Builder

Create popup forms with Blue Form Builder

Displaying a form, e.g. newsletter signup form and contact form, in a popup is an effective way to grab users’ attention and boost form conversion rates.

In this article, we’ll walk you through detailed steps to create popup forms in Magento 2 with Blue Form Builder without touching any line of codes. So let’s take a look!

Want to create a more professional and eye-catching popup forms? We have Popup Builder for Magento 2 that won’t let you down.

1. Embed Forms with 3 Ways

The first thing you need to do is embed a form in specific places on your website. There are 3 ways to do this: 

  • Use short code
  • Insert widget in WYSIWYG editor
  • Add a new form widget

Please view the detailed tutorial here.

No matter which ways you use, you’ll find the same options to customize the embedded forms. 

Custom options for popup forms
Image 1: Custom options for popup forms

After choosing your wanted form, please choose Popup Form in Display Type field. 

  • Width: specify the width of the popup form.
  • Button Text: enter the text inside the button. 
  • Button Align: choose position for the form button with 5 options:

+ Inline: the button is placed within page content.

Button placed within page content
Image 2: Button placed within page content

+ Left: the button is fixed on the left of the page.

Button fixed on the left of the page
Image 3: Button fixed on the left of the page

+ Bottom Left: the button is fixed at the bottom of the page and on the left.

Button fixed at the bottom of the page and on the left
Image 4: Button fixed at the bottom of the page and on the left

+ Right: the button is fixed on the right of the page.

Button fixed on the right of the page
Image 5: Button fixed on the right of the page

+ Bottom Right: the button is fixed at the bottom of the page and on the right.

Button fixed at the bottom of the page and on the right
Image 6: Button fixed at the bottom of the page and on the right
  • Popup Selectors: enter id or class of a specific element (e.g. button, link) by clicking on which, the popup form will be shown. For example, the ID of a button is button1 and the class of a link is link1. Then you should fill the Popup Selectors field with #button1,.link1. This way, when you click on this button or link, the popup form will appear. 
  • Show Popup Automatically: decide whether the form will automatically pop up on page load. 
  • Show after X seconds: specify after how many seconds the form will auto pop up after page load. 
  • Cookie lifetime in X seconds: decide after how many seconds the form should pop up again. 
  • Custom Class: add custom class to customize the popup form further. 
  • Button Color: choose color for the text inside the button (you should enter color code here).
  • Button Color on Hover: choose color for button text on hover (you should enter color code here).
  • Background Color: choose color for button background (you should enter color code here). 
  • Background Color on Hover: choose color for button background on hover (you should enter color code here). 
  • Button Font Size: enter font size (px) of button text. 

>> Let’s see a popup form on frontend:

Popup form on frontend
Image 7: Popup form on frontend

To Sum Up

With Blue Form Builder, you don’t have to be a skilled coder to create popup forms for your Magento 2 sites. It is easy to use and just takes you a few minutes to set up a certain popup form. If you have any further questions, just feel free to leave a comment below. 

Try FREE Blue Form Builder demo today

Create whatever type of Magento form in any style you want just in minutes. Just by drag & drop.

About Trang Vu

Trang Vu
Min is a content marketer with more than 2-year experience in Magento. She has great patience and high concentration ability to deal with every pressure at work.

Check Also

Limit the number of Blue Form Builder form submissions

How to Limit the Number of Blue Form Builder Form Submissions

Normally, your website’s forms are available all the time so that users can access and …

Leave a Reply