Today, in this blog post we are going to show you how to create a squeeze page in WordPress using Elementor and WPForms. In our previous post we have told about 7 tools we use for creating sales funnel and landing page in WordPress. So, here on this post you will see practical use of two among those tools while creating the squeeze page.
Before getting started many of us may ask, what is a squeeze page?. For them, to answer, I will say according to Instapage.
A squeeze page is designed to squeeze a visitor’s email address from them by offering something valuable in return.
For example: Dr Megan Rossi is a nutritionist and she helps people with diet plan. She has made a 3 months meal plan to lose 8 pounds. Now, she want to create a page in her website to offer this plan to the visitor in exchange of their first name and email address.
I hope the example make sense. So now, let's do the actual work.
Table of Contents
- Creating a Squeeze Page in WordPress
- Step 1: Create the Page and Design the Layout
- Step 2: Create Lead Capture Form Using WPForms
- Step 3: Create the Footer Section
Creating a Squeeze Page in WordPress
We are going to create the page in WordPress website. To do this job, you will required all of the following things:
Before heading to the first step you will need to install Elementor and WPForms plugins. If you do not know how to install plugins look at this tutorial,
Step 1: Create the Page and Design the Layout
At the first step, we start with loging into our WordPress website. We want to build a squeeze page for Dr Megan Rossi. We create and build pages on our subdomain and later transfer on to client's website.
Let's login to our subdomain https://fiverr.rainastudio.com/
We are at our Dashboard on our subdomain.
Go to and hover on Pages menu and click on All Pages. You see a page like the following and there is a button called Add New click on this.
As so as you click on that button you will be direct to the next page that is look like the following. We will write a title for this page and change page attributes template to Elementor Canvas.
Hit the Save draft to save the changes and finally click on Edit with Elementor to run the Elementor page builder on the page.
After click on that button you will be direct to a page will look like similar to the following screenshot.
Add New Section to Elementor Canvas
It is a blank canvas! On this canvas we will design our squeeze page.
Each web page has 3 base elements that are header, body and footer. On this canvas we will also add them one by one. So, let's do the header first.
On click on the plus icon pointed on the above image an area will be appeared. Click on the first structure like the following screenshot.
We just added our header area. Now I will change HTML tag and background color of this area as well add her name as the site name / logo / brand name. So, let's do it.
Hover over the added structure and click on the middle icon (handle icon). You will see all available options just open in a panel like the following screenshot.
On the option panel will make changes. At first we change HTML Tag Default to header.
Now we change background color of the header. To do this you need to click on Style tab then in Background section we select Background Type Classic. You see a Color picker has popped out. We click on it and paste our HEX color code. See the following attachment for details.
At this point we want to add the name of the doctor into the header structure element. To do this, we will click on Widgets Panel Icon.
Add Heading Widget to a Section
From the Widget panel drag and drop the heading widget into our header structure.
We write the name in the title field and change the HTML tag to H1. And from the Alignment option we click on Center to align the name in middle.
We go to Style tab to change font color, font family, and font size. Check out the below screenshot to understand.
Click on the color picker from Text Color option and set color. We set white color for the text. From the Typography you will see there are a bunch of options all related. So, here from the Family we select Dancing Script as font family. We set 25 pixel for font size. And bold as font weight.
We need to add some padding at the top and the bottom of the header section. To do this again we need to hover over the section and click on handle icon.
Option panel will slide out and from the Advanced tab we will change the padding. There is a Link values together icon by default it is selected. We need to deselect and set 20 px padding for top and 20 px padding for bottom.
We have done our header. Now, let's do the body section. Add a new section for the body. If you do not remember how to add new section click here to see. At the first phase we asked to click on the first structure like here.
But for this section we will click on the second structure. See the screenshot below.
You see we have two columns structure. Let's make some changes to this section. To do this, at the Layout options panel you Vertical Align change it to middle.
Now go to the Advanced tab to add some padding at the top and bottom. Check this, if you want to see how add padding.
We set 30 pixel padding for top and bottom of this section.
At the first column we want to add a image widget to add image and for the second column we want to some text with the lead capture form.
Add Image Widget to Elementor Column Section
So to add image widget to the first column click on Widgets Panel Icon like this. At the widget panel look for Image widget and drag and drop it into the first column.
Now, we add image to this widget. Hover over the Choose Image option or click on it the media library will be popped up. Upload image and click on Insert Media. Later from the following Image Size option you can set image size to your needs.
We just added the image now we add some text to the second column. Click on Widgets Panel Icon and drag & drop the Heading widget to the second column. Do this two times. Because on the first widget we add heading and in the second we add description.
Above we already shown you how to added heading widget and write text for it, changing color, font family and size here.
So, here, for the title in second column we set text color to #54595F, Oswald as the font family, 40 px font size and 500 font weight.
For the second heading widget we change HTML Tag to P and set #33475B as the text color, Poppins as the font family, 18 px font size, 400 font weight and 1.3 as the line height. So far the following screenshot is how it is looking.
Add List Widget to Column Section
We want to add a list to the second column underneath the description. We click on widget panel icon and in search bar we write List. You see a Icon List widget just appeared.
Drag and drop this widget under the description. You see list just added with three items. We keep one and delete two of them.
We add same font size, color and font family for the list item as well. So to add item text and to change icon we need to click on list item. As soon as we click you see a text field and icon field is appeared.
For item name we write in text field and to change icon we click on icon filed.
To change font family, text color, icon color and font size click on Style tab. From the Icon option change icon color and size. And from the Text option change the typography.
Now we duplicate this item and change text and icon according to our needs for the second list item.
Step 2: Create Lead Capture Form Using WPForms
At this step, we need to create a lead capture form using WPForms. To do this we need to visit our website Dashboard in a new tab.
From there we look for WPForms in the Dashboard menu. There is a Add New sub menu item under WPForms click on that to create our first lead capture form.
As soon as we hit the add new button we will be directed to the following page. Here in the Form Name field we type our form name and click on the Create a Blank Form button.
We are on a new page now like the following screenshot. We drag and drop any field from the left panel to right fields adding area.
We need Name and Email fields for lead capture. So we add them.
Click on Name field or drag and drop to right area. Now to change label and style of this field we need to click on that field at right area.
So, under the Filed Options tab we change our label name at the Label field. And at the Format we select simple.
From the Advanced Options we change input field size medium to large at Field Size.
At the placeholder field we type text for the name placeholder and check on Hide Label checkbox.
We do the same for Email field but for this we type "Your Best Email Address".
We want to change the text of the submit button to do this click on it.
You see an option field has appeared at the settings area to change the text of the button.
Now we get back to our Elementor page. We need to refresh this page but before doing it save the changes we have done.
Click on the arrow icon beside the green publish icon and hit save draft option from there and then refresh the page.
Add WPForms Widget to Elementor Section
After refreshing the page search for WPForms widget. You will there are one or several widgets. We use WPForms Styler.
Drag and drop this widget in second column under list item.
From the General area select the form we have created for this squeeze landing page. Select none for Title & Description option.
Change small to medium for button size and that is locate at Submit Button area. Select justified for the button alignment. And text color to white for the button.
Now from the style tab we change font family to Poppins for all items in Typography area.
We, now, create the footer section. To do this we need to do same as we already did here for header.
Add a heading widget into the footer section. Write something similar like "Copyright © 2021 · All Rights Reserved" change HTML tag to div.
From the Style tab we change text color to white. Font family to Poppins, font size 13 and font weight 300.
Add 10 pixel padding at top and bottom for copyright text. Click on Advanced tab and deselect Link values Together and inter padding.
Hit the PUBLISH button to make the page live.
We are at the end of this post. Let us know if you have any question about this post. I would like to know how do you build your squeeze page in WordPress.
Comment below if you find any difficulty while making your squeeze page. Do you create a thank you page for squeeze page or not?
The following is the screenshot of our full SQUEEZE landing page.