Blogging
How To Add Contact Form In Contact Us Page In WordPress
Do you want to add a contact form in a separate page in your WordPress website? You’re in the right place. In this post we will guide you step-by-step to how to add a contact form in a separate page, call it Contact Us page, in your WordPress website.
A contact form allows website visitors to quickly send message to your email, directly from your website or Contact Us page. It is a professional practice to have a separate Contact Us page, and that’s why most of the people create separate Contact Us page and add contact form there.
WordPress does not come with a builtin contact form, you have to install a third-party plugin for that. Though there are many contact form WordPress plugins, but the most widely used is Contact Form 7.
With Contact Form 7 you can create and manage multiple contact forms. It is free & fully customizable, you can customize and configure it with great ease. The form supports advanced technologies such as Ajax-powered submitting, reCAPTCHA, etc.
By using the Shortcode of Contact Form 7 you can display Contact Form 7 in a separate page of your WordPress website, as we have shown in the tutorial.
In this post we will cover following topics:
- How To Install Contact Form 7 In WordPress
- How To Access & Configure Contact Form 7
- How To Display Contact Form 7 In A Separate Page
- How To Configure WP Mail SMTP
- How To Integrate reCAPTCHA In Contact Form 7
Install Contact Form 7 In WordPress
- Login to your WordPress admin section.
- Go to “Plugins” from your sidebar.
- Click “Add New”.
- In the plugins “Search Bar” type “contact form 7”.
- You will find Contact Form 7 in the search results.
- Click “Install Now”.
- Once the plugin is installed you will see “Activate” button in the same position. Click that button to activate the Contact Form 7 in your WordPress website.
How To Access & Configure Contact Form 7
Once the Contact Form 7 is installed and activated it will appear in your sidebar.
- Go to “Contact”.
- Click “Contact Forms”.
- There will be a contact form with default settings and fields. To edit or view the default fields and settings of your contact form click “Edit”.
The “Form” contains the labels and fields that visitors will see on your website. In other words it is your main contact form which will appear on your website.
- “Your name” means a name that visitor will enter.
- “Your email” means an email that visitor will enter.
- “Subject” means the title or subject of email which visitor will enter.
- “Your Message” means the message that visitor will write in the text area.
- “Submit” is the submit button which will send email to you.
There are plenty of other fields that you can use such as URL, tel, number, date, dropdown menu, checkboxes, file, etc.
The “Mail” contains the mail template, settings, and what information will be filled in your Text Fields and Message Body when you reply to an email came from Contact Form 7. We have shared a SNAPSHOT at the end of this section that will help you to understand better.
- To: [_site_admin_email] Email of a person who has sent you email from Contact Form 7. It loads in “To” text field when you reply to that email.
- From: [_site_title] is your website name. Beside [_site_title] there will be your email ID which will receive emails submitted from Contact Form 7. This email ID here must belong to your domain. Let’s say if we want to setup Contact Form 7 on “meersworld.net” we must use an email ID which belongs to “meersworld.net”, like “abc@meersworld.net”, “adminofmw@meersoworld.net”, etc.
- Subject: [_site_title] is your website name. “your-subject” is the subject of the email that you will receive from Contact Form 7. When you reply to an email the [_site_title] and “[your-subject]” will load in the “Subject” text field.
- Additional headers: It allows you to add additional message header fields such as Cc or Bcc headers to your email. To know more, read this: Adding Cc and other mail headers
Message body: It contains the main message of email, subject and relevant information of a visitor who sent email from your Contact Form 7.
- [your-name] is the visitor name who will send email and [your-email] is the email ID of the same person who will send email from Contact Form 7.
- [your-subject] is the subject of the email that visitor will type in the Subject field of Contact Form 7.
- [your-message] is the main message that visitor will type in Your Message field of Contact Form 7.
- [_site_title] is the name of your website and [_site_url] is the URL of your website.
File attachments: File attachments feature allows visitors to upload files via Contact Form 7 and then an email with attachments of the files is sent to you. Normally people don’t use this feature in Contact Form and that’s why it remains empty. You can see that there is no mail tag or form tag in it.
It involves two steps (1) Add file uploading fields in your Contact Form 7 (2) Set up your mail settings to attach the uploaded files. To know more, read this: File uploading and attachment.
Mail (2): It is an additional mail template, often used as an autoresponder. Mail (2) is sent only when the primary Mail has been sent successfully. If you want to use this feature tick “Use Mail (2)”.
This is the SNAPSHOT that we mentioned in the above step. It is a “Reply window” to an email which was sent from Contact Form 7.
- From has loaded our email ID, from which email will be replied.
- To has loaded visitor’s email ID, which was received through Contact Form 7. Our reply will be sent to this email ID.
- Subject is the title of email, entered by the visitor. You can change it.
- In the Message body you can see the visitor’s Name, Email ID, Subject, Your Website Name, and Your Website URL.
Display Contact Form 7 In A Separate Page
It is very simple thing to show your Contact Form 7 in a separate page. Copy the Contact Form 7 Shortcode and Paste it into the page where you want to display the contact form.
Follow the steps:
- Go to “Contact” =>”Contact Forms” from your sidebar, as we have shown in the earlier sections.
- Copy the Shortcode of your contact form.
- Now go to Pages and create a new page with the title Contact Us. If you have already created a page you don’t need to create a new one.
- Now inside the page click the “+” icon to add a WordPress block.
- Click “Shortcode”.
- Now Paste the Shortcode inside the box.
- You can write other content in your contact page. It won’t effect your Shortcode.
- Once you Paste the code, Save your page.
- This is how the Contact Form 7 looks like in the Contact Us page. You can increase/decrease the size, color, width, height, and font of labels and fields. Do remember that styling of form varies from theme to theme, it might look different in your website.
Now submit an email from your Contact Us page. If your contact form fails to send email or shows you the error, “There was an error trying to send your message. Please try again later” then go to the below section “Configure WP Mail SMTP”.
If your contact form sends email successfully skip “Configure WP Mail SMTP” section.
Configure WP Mail SMTP
By default WordPress uses PHP mail function to send emails generated by contact forms. Now the issue is that most of the WordPress hosting companies don’t have their servers properly configured for sending PHP emails.
If the proper authentication isn’t there, then emails either go in the SPAM folder or don’t get delivered at all. Because of spam email issues WordPress allows to use third-party plugins like WP Mailer SMTP and mailers like SMTP.com, Sendinblue etc, to send emails.
We have created a separate tutorial that guides you step-by-step to how to install WordPress WP Mail SMTP plugin and how to configure the WP Mail SMTP for Sendinblue mailer.
Integrate reCAPTCHA In Contact Form 7
The spam emails have always been an issue in WordPress particularly when a contact form is installed and active on your WordPress website. To deal with spam emails and unwanted form submissions Contact Form 7 is integrated with the reCAPTCHA.
reCAPTCHA is a free service from Google that helps protect websites from spam and other unwanted activites.
We have created a separate tutorial that guides you step-by-step to how to integrate reCAPTCHA v3 in Contact Form 7.
So it was all about adding a Contact Form 7 in a separate page of your WordPress website. If you like this post then don’t forget to share with other people. Share your feedback in the comments section below.
Also Read:
