How to Create a Squeeze Page in WordPress

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.

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

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.

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.

Step 2: Create Lead Capture Form Using WPForms

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.

Step 3: Create the Footer Section

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.