How to use wordpress contact form 7 plugin on your website

     
In this guide we will see how to use Contact Form 7 from basic lớn advanced features. We are talking about one of the top 5 most used WordPress plugins.

Bạn đang xem: How to use wordpress contact form 7 plugin on your website

We"re going to see how lớn create a contact khung to lớn allow your users khổng lồ write to you by email without having to indicate your gmail address & thus limit spam. You"ll be able lớn easily insert the form in the WordPress contact page.


Pros & cons of a contact formThe Form tab: let"s edit the formThe Mail tab: customizing the sent mailProtect Contact Form 7 from spamLiên hệ Form 7 does not skết thúc mailSave sầu khung data with FlamingoAdvanced options for customizing Contact Form 7

What is Contact Form 7

Liên hệ Form 7 is a miễn phí Wordpress plugin that allows you lớn create gmail sending forms khổng lồ insert on your trang web.

A liên hệ khung is nothing more than a form that a user can fill out khổng lồ tương tác you, The liên hệ khung on our site was created with Contact Form 7.

*
This is a very flexible plugin that allows you lớn create WordPress forms of any type, and insert them in any page via a shortcode, a simple code to lớn insert the size inside a post or a page, as we will see in this guide.

It is one of the most used plugins for WordPress with more than 5 million active installations.


*

Besides that, you can add functionality lớn Contact Form 7, via other plugins, as we will see later in this guide.

Pros and cons of a contact form

Having a tương tác size on your site has advantages & disadvantages. The question you need khổng lồ ask yourself is, vày I want khổng lồ be contacted or vị I not?

For example, if you run a personal blog where you tell about your adventures và keep it for your family, you may not want a stranger lớn write to lớn you. If, on the other hand, you sell a sản phẩm or service through your blog then the situation changes.

Benefits of liên hệ forms

Give users the opportunity to lớn write lớn you. This is useful if you sell a service và a potential customer wants khổng lồ get in touch with you before buying lớn ask for clarification.Seeing a contact khung gives confidence to your users, who may buy before contacting you, but know that if they have sầu a problem I can use that khung.

Disadvantages of liên hệ forms

You may start receiving spam. In fact, you"ll almost certainly receive spam if you don"t protect your size as I indicate in this guide.You may get a lot of requests, even non-themed ones, at which point you should handle them somehow.

Tips for a better contact form

If you put a tương tác size on your site, you want your users to fill it out và get in touch with you. If your form doesn"t follow certain rules you will reduce the number of people who fill out your khung.

Use as few fields as possible. The more fields you ask for in your form, the less people will fill it out. Human beings are lazy, try lớn make life easy for your users.Don"t ask for the phone number, or at least don"t make it mandatory. Many people are reluctant khổng lồ leave their phone number, which is very personal information.Customize your submit button text. Try testing different versions of your button text based on what you offer with your khung.

Install Contact Form 7

Installing Liên hệ Form 7 is super easy. Log in lớn your WordPress dashboard and in the left sidebar cliông xã on Plugins -> Add New (or Add New).

You can search for the plugin using the search box on the right, or cliông chồng above to lớn see the most popular plugins. As you can see Contact Form 7 is the first plugin in the các mục.


*

Cliông chồng on the install now button to install the plugin. Once the installation is finished the button will change the text, becoming "Activate".

*
Click on activate khổng lồ activate the plugin & we"re done. Easy no?

Now the fun part begins, creating the size and adding it to our tương tác page.

Create a basic contact form

Now that the plugin is installed, we see a new entry in the sidebar:


*

Clicking on liên hệ we see the various forms created, since we have just installed the plugin we don"t have any form, but we see the example size that Liên hệ Form 7 creates during the installation.


*

This module is already good to lớn be used as is. But we"re going khổng lồ modify it lớn better underst& how the plugin works & lớn customize the module according lớn our needs.

Cliông xã on the module name lớn edit it.


*

Below the title, which we can edit lớn our liking, we see the shortcode lớn add the size to lớn our tương tác page, inside a light blue box.

Below we see 4 tabs, through which we can customize our liên hệ form.

The Form tab: let"s edit the form

Let"s start with the Form tab, which allows us to edit the HTML code of the khung. From here we can add or edit the form fields và modify their text.


As you can see this is the khung code, a mixture of HTML and shortcodes.

With the default Liên hệ Form 7 size you ask your users for their name, tin nhắn, subject & message text. Then they see a button khổng lồ skết thúc the message. In this field you can add HTML and JavaScript.

From this screen we can add the various fields we need. It will be necessary lớn position the mouse cursor where we want to lớn insert the new field, then cliông chồng on one of the buttons at the top.

The fields we can enter are:

Text: Adds a one-line text field khổng lồ request a piece of data such as first và last name.Email: Adds a one-line field for an email (checks that the email is valid).Url: Adds a one line field to request a url and checks that it is a valid url.Phone: Adds a field for the phone number.Number: Adds a field for a number, checks that it is a number and there are no other characters.Date: Adds a field lớn select a date from a calendar.Text Area: Adds a multi-line text area, this is the field commonly used for the body toàn thân of the message.Drop-down menu: Adds a select field with predefined options.Checkboxes: Adds checkboxes for a yes/no selection.Radio buttons: Adds HTML radio buttons, the user can select an option.Acceptance: Adds a box for acceptance.Quiz: Adds questions with answers predefined by us.File: Adds a section for uploading a file.Submit: Adds a button lớn fill out và submit the khung.

Let"s look at them one by one.

Text field

By clicking on text a window will appear where we can customize this section of the form. If we want lớn create for example the "name" input field we can use the settings shown below.


With the settings we have sầu chosen we will have this shortcode:

.

Email

The tin nhắn field allows us khổng lồ mix up a box in which users will enter their gmail address. Compared to lớn the classic text field, this will serve sầu lớn verify that the tin nhắn is written in the correct format.


Here is the shortcode obtained with our settings:

Url

Again, compared khổng lồ the text field, using the url field will cause a check to occur lớn verify that the format of the address entered is the correct one.


In this case there is no need lớn phối the field as mandatory. Here is the shortcode we get:

Phone

Just as in the previous fields, it is better to use the specific field for phone numbers instead of simply the text field.


As I told you before, it"s best not khổng lồ make this field mandatory, because not everyone will be willing to lớn enter their number.

Our shortcode with the settings you see in the screenshot above: this is it:

Number

With this field you can make sure that the entered character is a number và therefore no different characters are entered.


You can also choose to set a range within which the number should be included. For example in our case we used the range 1-100. Here is the shortcode:

Date

This field can be useful in case we want lớn give the user the possibility lớn mix an appointment or a date in which lớn be contacted again. In this case we can also phối a date range, as you see below:


Here"s the shortcode we get:


As you can see in this case the month & year are already fixed because we have sầu chosen a narrow date range, but of course you can choose the range you decide.

Text area

Through the text field your users will only be able lớn enter one line of text. If you need more lines, for example to lớn add a message or a request the field you have sầu lớn use is just the text field.


Our shortcode: