Posted in:

How to Create a WordPress Contact Form

Creating a contact form is required for a WordPress website. People will have the convenience to ask you for more information about your products and services through the contact form. A professional answer to “How to create a WordPress contact form?” is available in this article and the whole process doesn’t involve a single line of code.

Why Need a Contact form in WordPress?

First, a common question remains unanswered why do you need a contact form. It is a fact that an email address on your WordPress website also enables people to contact you. But you are more advised to replace your email address with a contact form. Moreover, there is no need for you to worry about the lack of code knowledge. Absolute beginners will benefit a lot from this article.

For your better understanding of the advantages a contact form has over an email address, we list out the top 3 reasons in below.

  • Spam Filter: A contact form can prevent spam bots from flooding your inbox. On a regular basis, spam bots are looking for the mailto: tags and then send plenty of spam emails to inboxes. In sharp contrast, such is not a case with a contact form.
  • Consistent Information: A headache is waiting for you to receive too much unnecessary information. To avoid the situation, it is better to show what information you need with a contact form, for example, a phone number.
  • Time Savings: With a contact form, you can not only showcase the required information but also tell people the next steps. For example, inquires will be answered within 24 hours so that users will wait quite for your responses without sending multiple inquires.

Under the guidance of this WordPress tutorials, you are able to create a WordPress contact from like that shown below.

Create Contact Form - Example

Create Contact Form using WordPress Contact Form 7 Plugin

Contact Form 7 is an powerful WordPress contact form plugin that enables webmasters to add a contact form one their websites so that the visitors can successfully communicate with them. Instead of developing a form with code, you can easily create a form with the plugin and integrate the form into posts and pages, which saves you a lot of time and energy.

However, many people are troubled with the installation and configuration of contact form 7. We also receive many emails for asking about how to set up and utilize this plugin. So we write this tutorial today to help readers easily install & configure Contact Form 7 for different usage.

Create a WordPress Contact Form using Contact Form 7

Now, you need to enter into your WordPress dashboard and search for this plugin from the Plugins tab for the proper installation and activation. After that, you can find a new tab added in the admin called as Contact. Simply click it.

Note that upon the successful activation, this special plugin will generate a contact form for you automatically. In this case, if you only want to showcase a single contact box on your site, there is no need for you to click the Add New button from the drop-down menu.

New Contact Form

Here, you can find a line of shortcode for this contact form exclusively. You simply need to copy and paste it into the webpage that you want to showcase this special form. Personally, we recommend you to publish a Contact Us page and include the shortcode into it.

Customize Your Contact Form for the Unique Style

To be frank, the default contact form generated by this plugin has a very plain looking, which may not be as properly designed as some other elements on your website. But thankfully, this great tool gives you enough freedom and flexibility for customizing your form with the simple markup and CSS coding stuff.

Here, simply click the name of your contact form for entering the settings page.

Modify the Form Options

By default, the contact form includes the fields of name, email address, message subject, message details and the send button. However, if needed, you can remove these current options or add some new ones such as telephone number, website URL, checkboxes, radio buttons, file, quiz, submit buttons and many more. There is a special Tag Generation bar that allows you to add any option you want.

Tag Generation Bar

For instance, if you want to add the file submission option, you simply need to click the file tag. Here, you can be presented with a pop-up box that requires you to determine whether this is a required field and decide the tag name, file size and file types. Note that different tags may require you to finish different settings.

Add File Tag

Set Up the Message Options

After people clicking the Send button for sending you the contact information, you need to give them a feedback of whether they have sent successfully or not. If not, tell them what is wrong.

In fact, this plugin has already offered the correct words for these messages. However, if you have your own idea, you change these textual contents easily.

Message Options

Configure the Additional Settings

In fact, you can add some additional settings for your contact form by entering the code snippets into the field of Additional Settings. By default, this plugin supports three types of extra settings with the following lines of coding stuff displayed in the below screenshot.

Additional Settings

  • Demo – If the form is in the demo mode, it will pass the process for sending mails but just showcase a “Success” message as a response.
  • Acceptance – This setting ensures that all the acceptance checkboxes work the same way as the validation mechanism, and showcase the error message when people fail to check the boxes.
  • Sent or Submit – This setting gives you an alert when the mail is sent or when the form is submitted successfully.

Add the reCAPTCHA System

It is possible that some spammers will leverage your contact form to send you the spam and junk messages. In this case, to protect your site away from the potential abuse and spam, you’d better add the reCAPTCHA service.

You can make use of the Integration system of this plugin to achieve the goal. Here, you simply need to click the Integration button from the Contact drop-down menu. Here, you can find a Configure Keys button. Simply press it.

Configure Keys

Next, you are required to enter the Site Key and the Secret Key for the proper utilization of the reCAPTCHA system. To get the keys, you need to enter this page and click the Get reCAPTCHA button. In the next screen, you can register your site to enjoy the service by entering the right domain and label.

Register for reCAPTCHA

A few seconds later, you can get the required keys. After entering them into the right fields, you can check your contact form to figure out whether the reCAPTCHA system is added.

Change the Overall Appearance

If you want to change the appearance of this form with unique color schemes and fonts, you need to utilize the CSS coding into the stylesheet of your current theme.

For this, you need to click the theme editor button from the Appearance tab and hit the StyleSheet option. In this coding area, you can search for your contact page and enter the CSS coding beneath the default settings. In the following, we have showcased the sample coding that changes the background color, padding, border and font of the contact form.

Change Contact Form Appearance

The detailed coding knowledge of this plugin can be found from this Docs of Contact Form 7.

Add the Popup Function

For some reasons, you may want to add a popup contact form on your website. To achieve this, only having the Contact Form 7 installed is not enough. You also need the help of Popup Maker.

Once you have installed it, you need to click the Add New button from the Popup Maker tab. Then, you simply need to enter the shortcode of your contact form in the body section of the editing screen, decide a name for the popup form, choose the targeting conditions for showing the form and publish it. Thus, you can add the popup function for the contact form successfully.

Popup Maker

Even, you can decide some display settings for this popup form.

  • Size – You can decide the size from Nano to X Large, along with the options of Responsive Size and Custom Size. Also, the minimum and the maximum width can be decided.
  • Animation – There are 5 types of popup animation, along with unlimited animation speed.
  • Position – You can showcase the contact form at any place you want, and determine the margins based on your webpage design.
  • Auto Open – If needed, you can display your popup contact form automatically.

How to Fix Contact Form 7 Failed to Send Email Issue

Contact Form 7 is great, however, the Contact Form 7 “not sending email issue” has disturbed a large number of users who have no idea on how to deal with this problem. If you get into such embarrassing situation as well, you would receive a message as below when trying to send out an email.

Not Sending Email Error Message

In this way, it is unable to receive any messages from visitors, let alone give them a reply. Since you have tried all methods, like updating the plugin or even reinstalling it, but make no difference, follow this guide to get an answer. That helps you resolve this issue within a few steps.

Method 1: Check Your Contact Form Settings

Log into your WP-admin and go to Contact > Contact Forms. Open the contact form suffering this issue. Scroll to the Mail setting mode and check if there is something wrong with the “To:” email address & “From:” email address. If everything goes well, you should move to the “Message body” box. This is where to format the message sent to you.

In general, there are four fields included in the Form box, namely, [text* your-name], [email* your-email], [text your-subject] and [textarea your-message]. Make sure that you have included [your-name], [your-email], [your-subject] and [your-message] in the message body.

The correct message format should be like the following example. This method is a great solution for the typing issues in the setting area or email format error.

Message Body

Method 2: Reconfigure Mail Server with WP Mail SMTP Plugin

If the method 1 doesn’t work at all, the cause to this issue are more likely to be the improper configuration of wp_mail() function. The WP Mail SMTP is selected as a solution in this case. This SMTP plugin enables an alternative way to reconfigure wp_mail() function, namely, SMTP.

Since you have installed and activated this plugin via WordPress dashboard. Go to Settings > Email and here is the Advanced Email Options interface. Move to SMTP Options and set up a new account. You can send a test email to check if you have successfully completed the new account setup.

Configure New Account

Type the email address in the “From Email” field, which should be the same with what in the Username field. Specify the “from name” and then check the rest options as needed. Click “Save Changes” to confirm all settings.

Advacned Email Options

Go back to the contact form edit page and move to the Mail tab > “From” field. The default settings should be [your-name] <[your-email]>. Replace [your-email] to the username you have used to configure WP Mail SMTP. Customize other parameters if needed.

Set Mail From

Confirm settings and send an email via the contact form. The message shown as below indicates that you have successfully sent out this email.

Message Send Successfully

If you still receive the error message “Failed to send your message. Please try later or contact the administrator by another method.”, you would try it after a while or contact the administrator to ask for help.

Leave a Reply

Your email address will not be published. Required fields are marked *