If you’ve ever wondered whether you can create those sleak, professional-looking multi-page forms for your WordPress website, you’ve come to the right place. In this article, I will show you step-by-step how to quickly and easily set up your own multi-page WordPress form with WPForms, one of the best form-creating plugins for WordPress.
Disclosure: Please note that some of the links in this post are affiliate links for products I use and love. This means if you click on such a link and take action (like subscribe, or make a purchase), I may receive some coffee money at no extra cost to you. This helps me creating more content free of charge to you. And, as an Amazon Associate, I earn from qualifying purchases. Thanks for your support!
Installing WPForms
First, you need to install WPForms plugin, so go to Plugins -> Add New and search for WPForms:
Click the Install Now and then Activate button:
Once activated, WPForms will show you the Welcome screen where you can learn how to create your first form by watching the YouTube video, but when you scroll down, you can click the orange Create Your First Form button to get started right away:
Creating simple form
You’ll be presented with the Setup window where you fill out the name of the form (like Survey for example) and then, you need to select the Simple Contact Form template:
Now, you’re in the editing mode of your new form and as you can see, you already have some basic form fields ready in the preview pane on the right, like Name, Email and Comment or Message:
The best part is that you can easily edit this default template without coding, just by choosing different options. So, let’s say I want to have just one field for the name, I’ll hover my mouse over the Name field and click the grey button:
Notice how the left pane with options changed and I can now change the Format from First Last to Simple:
And once I do this, the field will immediately update in the preview so I can always see what my form will look like:
Next, I want to have an address below Email instead of Comment or Message field. First, I’ll hover over the field and click the tiny red bin icon in the top-right corner of the field to delete it:
To prevent you from deleting anything by mistake, WPForms will make sure that you know what you’re doing:
And when I click OK button, the field is gone:
Next, I’ll add a new Single Line Text field by dragging it below the Email field:
Now, I can edit it to change it’s label to Address by hovering over it and clicking the familiar grey button:
And I can also check the Required option, this means that this field must not be empty as indicated by the red asterisk next to the label:
Installing WPForms PRO
Now comes the fun part. We don’t want to overwhelm our reader so we’ll divide the form into multiple pages to keep him engaged.
To do this, we’ll add the Page Break which is available in Fancy Fields. Now, this option is available only in PRO version of WPForms, but as a Lite version user, you’ll get 50% off regular price, which is a pretty good deal. Since PRO version comes with lots of greate features like Payments, File Uploads and Captchas, I can recommend it if you’re serious about your WordPress website.
So once you click the UPGRADE TO PRO button, you’ll be redirected to the wpforms.com website where you can use a special coupon to upgrade to PRO version with 50% off regular price:
Once you click the Upgrade Now button, you’ll see the different available plans. To get the Page Break feature, select the Pro plan and hit the GET STARTED button:
On the Checkout page, fill out your account information and select the payment method:
Finally, click the Complete Checkout button. Note that there’s a 14-day money back guarantee so if you’re not happy with WPForms PRO, you can ask for refund and you’ll get your money back no questions asked. So there’s no reason not to try all the features of the PRO version.
If you pay with PayPal, just sign in and confirm the payment:
Once the payment is processed, you can fill out some basic information about yourself on WPForms website:
As you can see, you can do a lot with PRO version:
Now, when your purchase is complete, you can click the link below your license to obtain the key:
Copy the license key, go back to your WordPress and paste the key on the WPForms settings page as instructed. First, click the OK button and then SAVE to save your current form:
Next, click the X button on the right to Exit the Form builder and navigate to Settings in the Dashboard:
Paste your licence key in the field as show below and click the Connect button:
On the next page click Connect and Install WPForms Pro:
Alternatively, you can download the plugin from your WPForms account and install it manually:
In such case, go back to Plugins -> Add New and click Upload Plugin at the top:
Select the wpforms.zip file you’ve downloaded to your computer and click the Install Now button:
Once installed, you can activate it:
And you’ll see the new plugin in the list along the WPForms Lite:
Next, go to WPForms -> Settings, paste your License Key and click the Verify Key button:
Once verified, you’ll see this success screen:
Adding a new page
Now we can finally go back to our form and add a Page Break. So go to All Forms:
Click the Edit button below the Survey form:
And as you can see, I can now select the Page Break from the Fancy Fields section, so I’ll drag it to the form below the Address field:
Notice that the Submit button has been moved to the next page and we can add some more fields above it now.
Let’s say I want the user to be able to upload some additional documents. Thanks to PRO features, I can just drag and drop the File Upload field:
And, for a good measure, let’s add another field below it, for example Website / URL:
Great job! Let’s save the form and I’ll show you how to quickly place it on your page. So hit the SAVE button at the top and then click the EMBED button and copy the shortcode:
Now, close the popup window and exit the form builder. Go to Pages -> All Pages and click the Sample Page or whatever page you have on your WordPress website. I clicked the Plus button in Gutenberg editor and searched for shortcode widget:
When I place it in the editor, I can paste my WPForms shortcode there:
That’s it. Now I can preview the page:
As you can see, my form is right there and I can fill my Name, Email and Address and click the Next button:
On the next page, I can upload the file and add my website.
And finally, I can submit the form:
Great job!
