In order to make it easy for your aspiring clients or business partners to reach you out, you can add a contact form to the contact page of your website. Unfortunately, WordPress has no built-in feature to add a contact form. There are two options to add a contact form in WordPress: Using HTML and using a plugin. If you prefer to add the contact form using HTML, you can use the Custom HTML block (assuming you use WordPress block editor a.k.a Gutenberg) to embed the HTML code of your contact form. In this article, we will show you to add a contact form using a plugin.
There are a bunch of form builder plugins out there that you can use to add a contact form to a WordPress page. Among them, Contact Form 7 is one of the most popular ones. Or, if you want to create a beautiful contact page, you can also use a page builder plugin like Elementor or Brizy. The two page builders allow you to add a contact form to your contact page.
In this article, we will show you to add a contact to your WordPress using Contact Form 7 and Elementor.
How to create a contact form using Contact Form 7
Contact Form 7 is a free plugin. You can get it on the official WordPress plugin directory. New to WordPress? You can read our previous article to learn how to install a new plugin in WordPress. Once the plugin is installed and activated, go to Contact -> Add New on your WordPress dashboard. This step will automatically create a new form that consists of 4 fields:
- Name
- Subject
- Message
If you want to delete a certain field, you can simply delete the field you want to delete (you can highlight the field and press the delete key on the keyboard). Or, if you want to add a new field, you can place your cursor to a place where you want to add the new field and click one of the tabs above the form editor. Click the Insert Tag button to add the field.
To add a label to your new field, you can flank your new field with the <label> </label> tags just like the existing fields.
Once done adding the fields, you can switch to the Mail tab to set the mailing. By default, the form submissions will be sent to the email address of your website administrator. If you want to change it, you can type the email address you want the form submissions to be sent to on the To field.
To customize the messages, you can switch to the Messages tab. From this tab, you can set a custom successful message, failed message, and so on. Once done, you can click the Save button to save the form. Before it, you can give your form a name to make it easier for you to identify it later.
Your contact form is ready to use.
To use the contact form you have just created, create a new page (Pages -> Add New) or edit your existing contact page. Add a new Gutenberg block and search for Contact Form 7 and select the form you have just created from the list.
You can preview your page before publishing/updating it to see how your contact form looks like. If you find an error message when testing your form, chances are your hosting provider disables the send_mail function of PHP. You can read this article to fix the issue.
How to create a contact form using Elementor
Elementor is the most popular WordPress page builder plugin. It allows you to create a beautiful contact page without dealing with CSS or HTML. In addition to the contact form, you can add other elements to your page such as a map, social media icons, and so on. Unlike Contact Form 7, Elementor is released as a freemium plugin and the feature to add contact form is only available on the pro version. In other words, you need to use the pro version of Elementor to add the contact form.
If you are new to Elementor, you can read this article to learn how to use it. In this article, we will go straight adding the Form widget. Simply drag the Form widget to the canvas area.
By default, the Form widget creates a form that consists of 3 fields. To customize an existing field, you can click the field you want to customize to open the available setting options. You can change the field type on the Type option, set the label on the Label option, set the placeholder on the Placeholder option, and so on.
To add a new field, you can click the ADD ITEM button.
You can actually connect your form with third-party tools like Mailchimp, MailerLite, ActiveCampaign, and so on. But, since you want to create a contact form, no need to make any integration with a third-party service. Instead, you can open the Email block to set the email address of where your form submissions to be sent to.
To customize the submit button, you can open the Buttons block. You can set things like button size, alignment, add an icon, and so on.
Once done adding the fields, you can open the Style tab to style up the form. There are 5 setting blocks you can open:
- Form
You can open this block to set the gap between columns and rows on the form, set the typography (font family, font size, font style, and so on) the labels, text color of the labels, and so on.
- Field
You can open this block to set the typography of the form fields, text color of the form fields, fields background, and so on.
- Buttons
You can open this block to style up the button. You can set things like the background color, border radius, typography of the button text, and so on.
- Messages
You can open this block to style up the messages. Be it the error message or the successful messages. You can set the typography as well as the text color of the messages.
- Steps
Unless you create a multi-step form, there is nothing to set here.
That’s it. Once done editing the contact form — and the entire page, you can publish your page by clicking the PUBLISH button on the bottom side on the left panel.
While you can create the contact page from scratch, Elementor also offers premade templates you can choose from. To use one, click the folder icon on the canvas area to open the template library.
On the appearing template library, select a template you want to use (you can search for a contact page that meets your taste and requirements). Click the INSERT button to import it to the canvas area.
If you still have a doubt to use Elementor as the feature to add contact form is only available on the pro version, you can use Brizy as the alternative. Brizy is a page builder that allows you to create a beautiful contact page without dealing with CSS or HTML just like Elementor. The difference, the free version of Brizy allows you to add a contact form to your contact page.
