Looking for a quick, simple, and easy way to capture your audience’s contact details with a lead magnet form? You’re in luck because I’m going to show you how to do this on WordPress.com!
Best of all, this method is completely FREE! In other words, you don’t need to pay a dime to get this up and running on the web. WordPress.com is free to sign up, and the tools we use don’t require any fancy plugins or complicated settings.
- First of all, what is a lead magnet? And why would you want to use one?
- Sign up for a WordPress.com account
- Select a theme
- Create a new page (or edit an existing one)
- Get familiar with the WordPress Editor
- Add a Cover Block
- Add a Layout Grid Block
- Add your copy
- Add a Form Block
- Link “Download” Page
- Watch the full video tutorial
First of all, what is a lead magnet? And why would you want to use one?
In short, a lead magnet is something you offer your visitors in exchange for their contact details (usually their email address).
Your offer can be something like a free downloadable PDF, a discount coupon, 30-minute XYZ assessment, etc.
Basically, you’ll want to offer something of value. If there’s something your visitors can take away from offering their details, the faster you’ll be able to grow your email list!
Here’s the example lead magnet form we’re going to make.
Sign up for a WordPress.com account
To get started, sign up for a WordPress.com account — it’s free.
During the sign up flow, you’ll be prompted to choose a paid plan and custom domain. But you can skip these completely for now, and just move forward with using the free WordPress.com site address that comes with the site (e.g. xyzrealhomes.wordpress.com).
Get started with a free account by visiting the WordPress.com homepage, and click “Get Started”.
Select a theme
I use the “Twenty Twenty” theme for the example I use in this tutorial. So, if you want to follow along exactly how I make it, this is the theme you want to make sure to select for your site before getting started.
However, any theme will work! The appearance of how your form will be displayed on the site will of course vary, so be sure to modify it to your liking.
From your WordPress.com dashboard, go to:
Design -> Themes -> select “Twenty Twenty” -> click “Activate this design”
Create a new page (or edit an existing one)
After selecting a theme, you’ll want to create a new page for your site. Or, edit a page that you already have published.
This page will be where you create your form.
Site -> Pages -> Add new page
Get familiar with the WordPress Editor
The editor is where you create your content for your website on WordPress.com.
It’s quite possibly the most important thing you should know how to use when building your site, so it’s worth taking some time to get familiar with before getting started.
I recommend knowing what & where the basic settings are, as well as the available blocks that you can select while editing. Blocks are what you use to add content to your page, and there are several types to choose from, each with their own settings.
WordPress Editor: https://wordpress.com/support/wordpress-editor/
Creating the Lead Magnet Form
Add a Cover Block
The first block we’re going to add to our page is a cover block.
This block will let us add a background image, while at the same time, allow us to lay other block elements on top of it.
Click + (inserter icon) -> search “Cover”
After the cover block is inserted into the page, we can select “Upload” or “Select Media” to add an image.
In this example, I already uploaded my image to my site’s media section, so I’m going to click “Select Media” then select my image from there.
Select Media -> Media Library -> select image
When the image is added, change the cover block’s alignment to “Full Width”, that way it spans across the entire page (as this is the look we’re going for).
Click “Change alignment” icon -> select “Full Width”
Then, you can adjust the block’s height by clicking and dragging the blue bar located on the bottom edge of the block.
Or, you can input a pixel amount manually in the block settings. I prefer this method since I can know specifically what pixel height the block will be.
Click the “Block” tab located in the page settings -> under “Dimensions”, input a pixel amount accordingly
Cover Block: https://wordpress.com/support/wordpress-editor/blocks/cover-block/
Add a Layout Grid Block
Once we have our cover block formatted the way we want, the next thing we’re going to add is a layout grid block.
Click + (inserter icon) -> search “Layout Grid”
Layout Grid Block: https://wordpress.com/support/wordpress-editor/blocks/layout-grid-block/
Add your copy
In the left column, we’re going to add our copy. This can be anything you’d like!
I’m going to use a heading block (H2) that contains the catch line, followed by a couple paragraph blocks with the details.
Heading Block: https://wordpress.com/support/wordpress-editor/blocks/heading-block/
Paragraph Block: https://wordpress.com/support/wordpress-editor/blocks/paragraph-block/
Add a Form Block
In the right column, add the form block. When added, we’ll be given some options for the type of form — choose registration form.
Click + (inserter icon) -> search “Form” -> select “Registration Form”
The form will have some default fields already added in. To keep things simple, we’ll just want to use the following fields:
- Phone Number
Note: You can add/use other fields if you want. For a full list of available fields, check the form block support link below.
Since I want to keep the first two fields short in length, I can set the field width to 50% for both, that way they’re on the same line.
Form Block: https://wordpress.com/support/wordpress-editor/blocks/form-block/
Link “Download” Page
The last thing we need to do is link the form to the “download” page. Or, in this specific case, a “thank you” page, where the visitor can access a download link that provides them with the PDF we’re offering.
In short, there’s three steps we need to do here, 1) upload the PDF file to our site, 2) create a “Thank You” page with a link to the downloadable PDF file, and 3) modify our form block so that when a visitor clicks “Submit”, they are redirected to the “Thank You” page.
Upload PDF to Site
From your dashboard, go to:
Site -> Media -> Add new
Or, you could simply just drag the drop the file right into your media section, and it will upload automatically.
After the file is uploaded, select it in the media section and click “Edit”. There will be a URL field with a “Copy” button, click that.
Paste the URL in a notes app or somewhere for now, since we’re going to have to reference this shortly.
Create a “Thank You” Page
Site -> Pages -> Add new page
This page can be formatted in any way you like. However, the main components of the page should contain at least a title, a brief description of what the visitor needs to do (i.e. download the PDF), and a way for the visitor to download it (via text link, button, etc.).
I’ll be adding a button block to the page, and linking the text to the PDF URL we copied earlier.
Click + (inserter icon) -> search “Button” -> click link icon -> apply appropriate file URL
When you’ve formatted the page to your liking, hit “Publish”.
We’re now ready to head back to our lead magnet page, and finish the last step!
Set Form Submission Settings to “Redirect to another webpage”
Head back to your registration form on the lead magnet page.
Click on the form so that you can view the form settings on the side. You may find it tricky to get that to appear because there are several fields in the form that have their own settings.
One tip to avoid selecting the fields and to easily select the parent element (i.e the form block itself) is to use the “List View” and selecting the form block directly from there.
In the form settings, under “On Submission” select “Redirect to another webpage”. Then, under “Redirect address”, you can search for the “Thank You” page based on the title you published as, and it will appear as an option. Selecting the page will automatically add the page URL into the field.
Click form block -> under “On Submission” select “Redirect to another webpage” -> under “Redirect address”, select/insert the appropriate page or page URL
Hit “Publish” and you’re done!
Button Block: https://wordpress.com/support/wordpress-editor/blocks/buttons-block/