As a website owner, there are many ways you can allow your readers to interact with you. Enabling blog comments, responding in social profiles and sending email campaigns are some of the most popular ways. In addition to all these options, there is one page most important in any WordPress site. That is the contact us page allowing users to send emails to you. In this article, we will explore how to add contact form in WordPress site.
Related: How to add and customize contact form in Weebly site?
Why to Have Contact Page in WordPress?
The basic need of a contact page is to allow readers sending email to you. However, there are few other advantages of having a contact page on your website.
- Credibility – having a contact page increases the credibility of your webpage. People will believe you are a real person or company that respond for queries.
- Visibility – contact form increases the visibility of your site both in search engines and with the users. It is easy for you to drive users to your contact page and encourage them to share their need.
- Business – if you do not have time to respond in live chat, the next best option for doing business is using a contact form. This works well for services industries like resume writing and software development.
Difference Between Contact Form and Emails
Many of you may think why you need to have a separate contact form instead of directly providing your email address in the footer and sidebar sections.
- Showing your email address publicly will create privacy problems. You will receive hundreds of spam emails as anyone can send message by clicking on your email address.
- In contrast, contact forms will not reveal your email address to readers. WordPress will process the message and send to you without users knowing your email address. In this way, you will get messages from only interested users and avoid spams and offensive private messages.
- The plugin works seamlessly with Akismet to prevent spam submissions or you can add reCAPTCHA to make sure only human users can submit the form and not the automatic robots. In addition, Contact Form 7 also uses the default WordPress comment blacklist option to block messages.
- You can use multiple contact forms on a single WordPress site and add parameters to track the performance of each form. For example, you can track the form on your contact page and about page separately.
- The plugin does not store the messages in database thus keeping your privacy.
With all these benefits, contact forms are much safer, professional and easier way to interact with your readers.
Contact Form Plugins for WordPress
Good part is that you have many contact form plugins available for free in WordPress plugin repository section. Contact Form 7 is one of the most popular out of all freely available plugins.
- It is very easy to use plugin having 5+ million active installations.
- It is a complete free plugin without annoying advertisements or upselling premium version.
- Developed and maintained actively.
- Many popular WordPress themes integrate Contact Form 7 plugin and offer customized forms.
- You can insert the form anywhere on your site using Gutenberg block.
Installing Contact Form 7 Plugin
Since Contact Form 7 is a free plugin, you can install it directly from your WordPress administrator panel. After login to your site’s admin panel, go to “Plugins > Add New” section. You can search and install the Contact Form 7 plugin from there.
Creating Your First Contact Form
After activating the plugin on your site, it will create add a menu item called “Contact”. It has three submenu items – Contact Forms, Add New and Integration.
- You can view all your forms under “Contact Forms” section.
- Go to “Add New” to create a new form.
- Integration section allows you to link to external APIs from Constant Contact, reCAPTCHA and Sendinblue.
Configuring Contact Form 7 Plugin
In order to make your task easier, Contact Form 7 will add a readymade sample form in your site. You can either edit the sample form by going to “Contact Forms” section and reuse or create a new one from the scratch.
In this article, we will create a new form and embed the shortcode. Go to “Contact > Add New” section to view all the available option for creating a new form. You will see form, mail, messages and additional settings sections where you can configure the options and design your form. The plugin will add base template for form, mail and messages under corresponding section to start with. You can add additional options referring the plugin’s documentation page.
Form Section
Under “Form” section, you can view the available tags for editing form template. The plugin will add the basic tags like name, email, subject and submit button that you can edit and customize further.
- You can add fields for URL, telephone number, radio buttons, file upload, quiz, checkboxes, dropdown menu, etc. by simply clicking on the button.
- At first, you may not feel comfortable with the buttons and code. However, clicking on each button will show a pop-up where you can simply fill up the details.
- You do not need to remember the tags or prepare the code.
For example, click on the “file” button to insert a file upload option to your form. On the pop-up that appears, provide details for size, type, mandatory filed, etc. and save.
After finishing the form design, the template will have the following tags. You can move the labels to different position by cut and paste the corresponding code.
<label> Your name
[text* your-name] </label>
<label> Your email
[email* your-email] </label>
<label> Subject
[text* your-subject] </label>
<label> Your message (optional)
[textarea your-message] </label>
[file* file-915 limit:1mb filetypes:.docx]
[submit "Submit"]Finally, provide a name for your form and click the save button. You will get the shortcode that you can copy and paste anywhere on your site.
Mail Section
Before using the shortcode, the next step is to configure your email template by going to “Mail” section.
- To and From – the plugin uses site’s administrator email as a to address and use site title and provided email for from field.
- Subject and Headers – the details from the form fields are used on the mail template.
- Message body – setup the template format for receiving the emails.
- File attachment – leave it blank or add the file tag if needed to show the file name in the receiving email.
In general, you need not do any modification in the mail template. Create a second mail template to use it as an autoresponder. When an email is sent successfully, the plugin will trigger the autoresponder email template to the submitter’s email.
Save your changes after finishing mail templates setup.
Messages Section
Under this section, you can customize the text messages that appears during different situations. You can leave the text placeholders as it is if you do not want to customize. For example, by default the plugin will show a message “Thank you for your message. It has been sent.” after a successful submission of a form. If you use the form for business proposal submissions, then it makes sense to edit this text to add more details and further steps for your customers.
Additional Settings
You can leave the additional settings section as it is. However, go through the options available on the documentation to check whether if any fields are useful. For example, you can add subscribers_only: true in the text box to allow only logged in users to submit the form.
Adding Form in Contact Page
Click save button after you finalized all the settings. Basically, all the above steps are one time setup and you can create new forms using the same setup without editing the templates each time. However, you can also use different fields and templates for each form.
Now that you have the shortcode of your contact form and the next step is to embed it on your page. Go to “Pages > All Pages” section and create/edit your contact page. Type /contact to filter the Contact Form 7 Gutenberg block and insert it on your content area.
Click on the “Select a contact form” dropdown and choose the name of your form to embed.
If you are using old Classic editor, simply paste the contact form shortcode in the editor.
That’s it, you have inserted the contact form on your page. Now, you can publish or update the page to see it in action.
Related: How to embed Google Forms in WordPress?
Testing Your Contact Form
View your page to see how the form looks. We also recommend you testing the form by submit a dummy message.
The plugin will use the browser validations to make sure all required fields are filled. You will see errors as per the setup in the “Messages” section when trying to submit the form without mandatory fields.
Submit a successful message and confirm that your contact is working fine. Similarly, check the received message and adjust the configuration under “Mail” section to change the template if needed.
Conclusion
In total, you may need less than 30 minutes to create and add contact form in your WordPress site using Contact Form 7 plugin. It works seamlessly without conflicting with any other plugins. Undoubtedly, Contact Form 7 is part of many WordPress business sites and you can try it out to improve your business as well.
Leave a Reply
Your email is safe with us.