Do you have a need to create custom forms in WordPress? Maybe you’re on the hunt for an order inquiry form, a customer satisfaction survey, or any other form that fits your business or blog needs.
The good news is, WordPress offers a range of plugins designed to make building custom forms in WordPress a breeze. You can seamlessly integrate these forms into your WordPress website.
Ready to dive right in? Let’s get started!
Table of Contents
Creating forms in WordPress
You might notice that the editor in core WordPress lacks the necessary blocks for form creation. Sure, you could attempt to use the Custom HTML block and manually write the HTML for a form, but let’s face it, that would be quite a challenging task. Plus, where would you even submit the form to?
But don’t fret; there’s an alternative approach that makes life easier. You can simply embed a form into your WordPress website, even if you’ve created it elsewhere.
Let’s be clear upfront: I don’t really recommend this approach, but for the sake of completeness, let’s cover it briefly. In just a moment, I’ll unveil my preferred method for adding forms to WordPress.
For instance, Google Forms offers a handy, free form builder. Once you’ve generated your form, just use the embed option to grab the HTML code. Then, head to your WordPress page, add a Custom HTML block, and paste in the code. Piece of cake!
And if you’d like a step-by-step guide, here’s a video from WPBeginner that shows you how to embed a Google Form into a WordPress webpage.
Still, for the maximum amount of control it’s better to use a form builder from within WordPress. That way form submissions can be managed directly from your website.
WPForms: Visual Form Builder for WordPress
When it comes to form builders, you’ve got some excellent options at your fingertips. For this article, I’ll roll with WPForms to show you how to craft custom forms in WordPress. It’s a user-friendly visual drag-and-drop form builder, and guess what? You can use it for free
After you’ve installed WPForms in WordPress, you can easily set it up and start creating new forms right from your WordPress Dashboard. Simply keep an eye out for the WPForms section, as shown below.
Setting up SMTP for WPForms
Now, let’s get your SMTP set up for WPForms. This step is crucial because it ensures you receive emails when someone submits a form.
If you’ve already got a mailing service, and it’s supported by WPForms, well, that’s the simplest and best option.
Otherwise, like I did, use the SMTP service provided by your hosting provider. In this case, select the “Other SMTP” option for the mailer.
You will need to check with your hosting provider how to set up email. They usually have a dedicated section that provides all the necessary technical details you need.
I will show you how I setup the SMTP using my hosting provider SiteGround. The steps should be quite similar for other hosting providers.
As you can see from the screenshot, it’s not too difficult to access the settings you need.
Step 1. Find the email section on your hosting account.
Step 2. Select the domain for your website
Step 3. Look for the EMAIL CONFIGURATION section (or something with a similar name)
The information you need is the Outgoing Server and the Outgoing SMTP Port (465 in this case).
You also need to know what email account to use. In SiteGround the list of email accounts is listed below this configuration information.
In this case I use the admin account – this is created automatically for you. You will need to know the password, if you can’t remember or it was created automatically there is usually a “Change Password” option.
Now you have everything you need to config the WPForms SMTP section.
Enter the SMTP Host – that is the Outgoing Server from the hosting account.
Encryption is SSL (you can try TLS if the SSL option doesn’t work). More on debugging SMTP later in this article.
Enter the SMTP Port from your hosting account. Turn on Authentication.
Enter the SMTP Username and SMTP Password using the email account on your hosting account.
Once you have entered this information don’t forget to press the “Save Settings” button at the bottom of the page.
Testing and Debugging your SMTP connection
It’s great when everything works first time but from experience sometimes you run into difficulties.
The first thing I do once I have entered the SMTP settings (and saved them!) is to send a test email. Luckily, WPForms has the feature built in so it’s really easy.
Find the Tools option in the “WP Mail SMTP” menu. From here you can send a test email. Just enter an email address to send the test email too and whether you want to send an email in HTML format or just plain text.
If everything goes okay you should see this message:
You will also have to check it was received successfully. Don’t forget to check your spam folder if you don’t see the test email in your inbox.
Creating a WordPress Contact Us Form
Now, here’s a form that every website should have: the famous “Contact Us” form. Let’s dive into creating this essential form using WPForms.
Start by going to the WPForms menu and select the “Add New” option. As you can tell from the screenshot below, we have a handy “Simple Contact Form” template ready for you to use.
Hover over this template and you will see a “Use Template” button. Press this button to create a new form based on the template.
Here is how the form looks. You can see the Name, Email and Comment fields have already been added to the form for you.
You can modify any part of this form, or add extra fields as required.
To modify a field, say the Name field, click on it and the left hand side of the page will change to show you the field options.
You can provide a label, format and description for each field. Also you can specify whether the field is required or not. Depending on the type of field the options will differ, in this case with the “Name” field we have various options for format: Simple, First Last or Field Middle Last.
Click on the “Save” button to save your form. You can click on the “x” to abandon your form which takes you back to the “Forms Overview” page.
The “Preview” option allows you to see what the form looks like on your website. Including the validation behavior so you can check the form validates input correctly.
Add a form to a WordPress page or post
Now you have created a form with WPForms you need to add it to a new or existing page (or post).
There are two ways to do this.
Each form generated will have a “shortcode” associated with it (you can see this shortcode in the “Forms Overview” page), copy this code and paste into the WordPress editor on the page you want.
Preview the page to ensure it looks and works correctly.
An alternative method is to use the WPForm block which is available in the WordPress editor once you have WPForms installed.
Adding this block to your page will show you the following widget where you can select the form you want from the dropdown.
Both achieve the same – adding a form to a WordPress page (or post).
Creating a Custom Form
For a custom form you can start with the “Blank Form” template which is a completely empty form.
Selecting the template will generate a new form without any existing fields.
Now, drag and drop field types from the left hand section onto your form. Rearrange them as necessary and click on the fields to set their options – including any validation needed.
Now, let’s talk about the plugin’s versions. In the free version of the plugin, you’ll find yourself a bit limited when it comes to available fields. But if you’re ready to go premium, you’ll unlock a treasure trove of additional field types and other nifty features. That includes the ability to accept payments through your forms.
Secure Forms in WordPress
Let’s talk about the security of your forms because they transmit potentially confidential information over the internet. It’s absolutely vital that all your forms are transmitted securely.
In practice, this means your website should have an SSL certificate installed. You can usually get this done through your hosting provider’s account. To check if your website is secure, simply take a glance at your browser’s address bar. If you see a padlock symbol next to the address, that’s a reassuring sign that the page is encrypted and secure.
It’s worth noting that for payment services like Stripe, having a secure website is a requirement. Without it, you won’t be able to set up payments.
Form Add-ons
WPForms is free to use but some features require the paid version. Investing in a paid version give you the following benefits:
- Accept payments
- Save and Resume
- Create Surveys and Polls
- Digital Signatures
- Lead Forms
- Forms Abandonment
More details here: WPForms features and addons.
For a basic blog or website the free version is all you need.
Final Thoughts
I hope you found this article useful and informative. Here is a quick recap:
- Use one of the many excellent form builders to create forms in WordPress
- Form templates make it easy to quickly create standard forms
- Create a custom form from scratch using a drop and drop form builder
- Free and premium options are available with most form builders
If you found this article helpful, please consider sharing it with your network by using the social media sharing buttons below. Your support is greatly appreciated!
