Creating a Contact Form in WordPress. Sending an email
Whether you're creating a simple blog, a large corporate website, or a WordPress-based portfolio project, page feedback almost always a necessary element. And it's always better to use a public contact form for feedback instead of publicly sharing your address Email(spam bots really love such addresses).
Of course, there are plenty of great WordPress plugins out there. But why burden your site with cumbersome plugins and additional database queries, if you can write your own simple feedback form using a small amount of code?
| Download sources |
Benefits of creating your own contact form
Plugins are great, but many of them come with unnecessary functionality that you don't need and will overload your database and site. This will happen due to the implementation of additional PHP code, adding style sheets CSS and files JS in the header of the page... and at some point you just want to stay away from all kinds of plugins, no matter how cool they are.
If you don't have coding skills, then I have to admit: your hands are a little tied and you'll have to use one of the existing plugins. But if you are familiar with it at any level (we'll assume you have such skills if you're still reading this article), then you should consider developing your own form for the site. Here's what advantages bears the following decision:
- Optimization- the use of redundant code, especially that which you do not need, leads to reaching the maximum permissible limits of your hoster. And even if you have a large supply of resources on the server, optimization will always benefit your site.
- Code cleanliness- in addition to optimizing the operation of the server itself, “clean” code will become the main factor in the speed of loading site pages. Writing your own code gives you an advantage: you only use what you need, and there is no need to download a lot of "junk" that is responsible for fairly simple functionality on your site. This also has a positive effect on SEO.
- The satisfaction of being in complete control- Never underestimate the power of complete control. Having full control over your site will push you to become a more passionate developer/designer than when you're just using a kit ready code. And even if you are provided with the code in finished form, it is always better to “go through” it manually than to simply “copy and paste”. Typing the code by hand gives you an understanding of how the plugin works.
Let's move on to the code
Okay, enough chatter: let's get to writing some code! We won't have to deal with a lot of code or expend a lot of effort, so even if you are new to PHP and/or WordPress, you will understand the following code without any problems, following my instructions for those parts of the code that you yourself cannot “recognize” ".
The code about which we'll talk, you can directly paste into a file functions.php your theme and apply it as a plugin. I advise you to design the code as a separate plugin. When you switch between themes, you won't have to re-add the same functionality. Let's start with standard information about the plugin :
Version: 1.0 Author: Barış Ünver Author URI: http://beyn.org/ */ // This line of comment holds the place of the amazingly simple code we"re going to write. So you don"t really need to read this. ?>
Small helper function: get_the_ip()
As you can guess from the name of the function, we use it to get the real IP address user, even if this user “came” to us through a proxy server. The solution, of course, is not 100% effective for protecting and obtaining information about the user, but nevertheless, we will get some additional information about the user.
We will mainly use other variables to $_SERVER: HTTP_X_FORWARDED_FOR, HTTP_CLIENT_IP and REMOTE_ADDR . And here is the code itself:
Function wptuts_get_the_ip() ( if (isset($_SERVER["HTTP_X_FORWARDED_FOR"])) ( return $_SERVER["HTTP_X_FORWARDED_FOR"]; ) elseif (isset($_SERVER["HTTP_CLIENT_IP"])) ( return $_SERVER["HTTP_CLIENT_IP" ]; ) else ( return $_SERVER["REMOTE_ADDR"]; ) )
Shortcode
We will divide the shortcode into three sections to make it clearer for you, but first you need to remember to open and close the function in the shortcode:
Function wptuts_contact_form_sc($atts) ( // This line of comment, too, holds the place of the brilliant yet simple shortcode that creates our contact form. And yet you"re still wasting your time to read this comment. Bravo. ) add_shortcode( "contact", "wptuts_contact_form_sc");
Attributes of our shortcode
We need to set a few attributes to make the shortcode flexible while still being easy to use. Here they are, these attributes:
extract(shortcode_atts(array(// if you don"t provide an e-mail address, the shortcode will pick the e-mail address of the admin: "email" => get_bloginfo("admin_email"), "subject" => "", "label_name" => "Your Name", "label_email" => "Your E-mail Address", "label_subject" => "Subject", "label_message" => "Your Message", "label_submit" => "Submit", // the error message when at least one of the required fields are empty: "error_empty" => "Please fill in all the required fields.", // the error message when the e-mail address is not valid : "error_noemail" => "Please enter a valid e-mail address.", // and the success message when the e-mail is sent: "success" => "Thanks for your e-mail! We"ll get back to you as soon as we can."), $atts));Remember that we will refer to these attributes in our code as variables with the attribute name (for example: $label_submit ).
Sending an email
This is the most important part of the function that is responsible for sending email:
//if the
";Clue: If you look closely at HTML code in the form, you may notice a variable $subject. Remember the shortcode attribute ‘ subject’ with an empty default value? This means that you can use a shortcode by substituting the value you need into the attribute, for example:
Adding return to shortcode
The final part of the work is quite simple. After sending, the user should see a message indicating that the letter was sent successfully, or, if unsuccessful, an error notification. Here is the code itself:
If ($sent == true) ( return $info; ) else ( return $info . $email_form; )
After sending the email, the form does not display again, but if you still want the form to display, you can use a small line of code:
Return $info . $email_form;
CSS code
Of course, the code itself doesn't look perfect. Let's add a little charm by CSS. Add the following lines to the CSS code in your file style.css:
Contact-form label, .contact-form input, .contact-form textarea ( display: block; margin: 10px 0; ) .contact-form label ( font-size: larger; ) .contact-form input ( padding: 5px; ) #cf_message ( width: 90%; padding: 10px; ) #cf_send ( padding: 5px 10px; )
If you did everything correctly, you will see something similar to what is shown in the picture below:
Congratulations: you've just made your own contact form!
Conclusion
This simple contact form will work for most websites, but if you want to add additional fields, then just edit it and add variables $form_data["name_of_the_new_field"] inside a variable $email_message(and you may also need to add the field name in the array $required_fields).
If you have thoughts on how to improve the shortcode in this post, or would like to show what you've come up with based on this form, please share your thoughts and links with us in the comments.
Contact forms are a necessary attribute of most websites. With their help, direct communication with the visitor is carried out, especially if the site does not provide other means of communication.
WordPress Directory has dozens of contact form plugins. But the most popular among them (more than a million installations) is Contact Form 7, using which we will look at creating a contact form on a website.
Creating a Form
If you use themes or , then you do not need to install any plugins - everything is already implemented! To do this, simply insert a shortcode into the contact form page. .
After installing and activating the plugin, a whole section appears in the admin panel:
Let's create a simple form that will be available on the page Connect with us. First let's move on Contact Form 7 > Add New, where you must enter the name of the form. Below is the form template block, i.e. a set of fields that the user will see and fill in on the site.
So, by entering a name, for example, “ Connect with us" and pressing the button Save This way you will create a display-ready contact form. To see it, you need to go Contact Form 7 > Contact Forms.
Pay attention to the field value Shortcode. The code taken in square brackets, will be used to display the form on the site.
Displaying the form on the website
In order for site visitors to use the contact form, it needs to be displayed somewhere. To do this, we will create a separate page with a name, for example, “ Connect with us". So let's move on Pages > Add new. In the title we write “ Connect with us“, and insert the above shortcode into the field below. The result should be:
Hello, friends! In this lesson we will talk about creating a feedback form, or as people also say "contact form".
Today we will show you how you can create it in a few minutes light, beautiful And functional feedback form using my favorite plugin Contact Form 7 .
I will try to explain in as much detail as possible all the stages of installing a contact form, and in this regard the lesson will turn out to be quite long :)
Creating a Contact Form in WordPress
At the very beginning, I want to note that the Contact Form 7 plugin is Russified, and you will not have any problems with it. As proof of my words can be the fact that this plugin was downloaded OVER 25 MILLION TIMES!!!
So, let's get started. To create a feedback form you need to do the following:
1. Install and activate the Contact Form 7 plugin. How to install plugins you can.
2. After activation, go to Contact Form 7 -> Forms.
3. In the window that opens copy the line with embed code.
4. Paste the copied code onto the page on which we want to add a feedback form. After you have inserted the code, do not forget to save the changes by clicking the button "Update".
Like this result adding a contact form we get:
Ready! You have installed work uniform feedback to your site!
As you can see, in total for a few minutes You can easily install a feedback form on your website. You can put an end to this, but for those who are not satisfied with the standard form and who want create completely new contact form with other fields and capabilities - I recommend read the lesson to the end.
In order to create a new form, we first need to decide which fields we need in it. In this tutorial, as an example, we will create a simple call back order form.
To do this, we need the form to have the following fields to fill out:
- Name (Required field)
- Surname
- Phone (Required field)
- Field with the choice of a convenient time to call
After we have decided on the fields, we move on to creating the form:
1. Go to Contact Form 7 -> Add new.
2. In the window that opens, click the button "Add new". If necessary, select a language from the dropdown list below. By by default the language will be Russian.
3. After clicking the button you will be taken to the page where the form editor.
At the very top of the page is the field in which we write Name new form. IN Form template we see standard form fields that are created by default.
Below we see the settings for the letter that comes to your email after someone has submitted an order from the form on the website. In these settings, for example, you can change or add the e-mail to which requests from the form on your website will be sent. IN letter template configure the information that will be displayed inside the letter.
4. After we have become superficially familiar with the structure of the editor, we move on to creating our new form. For this we need DELETE from the form template all lines except the button "Send", and in the letter template delete everything is complete . After removal you should get something like this:
5. Now we need to create new fields: Name(required) Surname, Telephone(required) Convenient call time.
Let's start by creating a field to enter a name, which must be filled out. To do this, press the button "Generate tag" and choose Text field.
In the settings of the new field, put a checkmark, which is only necessary if the field must be required to be filled out. Next, copy the generated code into the form template on the right, and copy the following code into the letter template. See the image below for comments and arrows for better understanding.
6. After we have added a field for entering a name, click “Generate tag” -> Text field and by analogy we create a field Surname And Telephone by copying and pasting the code into the form template and email template. The only difference is that for the field Surname There is no need to tick the required field .
After adding the First Name, Last Name and Phone fields, the form editor will look like this:
7. Now let's create the field Convenient call time. To do this, click "Generate tag" and choose "Drop-down menu".
In field Choice We write on the line according to one option, in our case this is the time from 8-00 to 18-00 with intervals of two hours. After filling out, copy the corresponding lines of code into the form template and letter template.
As a result, you should end up with something like this:
9. Copy the form code and paste it on the page where you need the form. If you did everything correctly, you should have a callback request form like this:
After the user places a call back order from your website, a letter will be sent to your email with this content:
READY! Here we have created with you call back order form from scratch.
I agree that for some, everything may seem very complicated and scary, but this feeling will only be felt until the first creation of a contact form from scratch 😉
In most cases, the standard feedback form, which is created by default by the plugin immediately after its installation and activation, is sufficient.
I hope this tutorial was useful to you and you understand the Contact Form 7 plugin.
If you have any questions while creating the form or something doesn’t work out - write and ask questions in the comments.
And remember that feedback form on the website - a required attribute on the contact page.
Hello, friends! In this lesson we will talk about creating a feedback form, or as people also say “contact form”. Today we will show you how you can create an easy, beautiful and functional feedback form in a few minutes using my favorite Contact Form 7 plugin. I will try to explain in as much detail as possible all the stages of installing a contact form, and therefore the lesson will turn out to be quite long :) Creating a contact form in WordPress At the very beginning, I would like to note that the Contact Form 7 plugin is Russified, and you will not have any problems with it. As proof of my words can be the fact that this plugin...
Review
Vote for the lesson
100
Grade
Result: Dear readers! Don't be lazy to vote and leave a comment. This way I can understand the usefulness of the lessons and articles, and improve their quality in the future. Thank you in advance!
A contact form is extremely useful for your site - it keeps your email address out of sight (reducing spam) and makes it easy for users to contact you directly through the site.
If you have created a page Contact us on a WordPress site, then adding a feedback form, setting it up and starting receiving messages will not be difficult.
The most the easy way to create a feedback form is to use – there are many different plugins and you can choose any one. However, in this tutorial we will be using Contact Form 7.
With over 3 million installations, Contact Form 7 is the most widely used feedback form for WordPress. Its intuitive interface and quick installation will help you create a feedback form in minutes.
Before you start this guide, you will need the following:
- Panel access WordPress management
Step 1 – Install Contact Form 7
- Login to your WordPress dashboard and click on Plugins → Add new in the left panel menu.
- Find Contact Form 7 in search and click Install.
- After installation, click Activate to activate the plugin.
Step 2 – How to Create a Feedback Form
After activating the plugin, the left menu of the panel will display new section Contact Form 7.
- Click Contact Form 7 → Add new to create your first form.
- Enter the name of your feedback form, for example WordPress Contact Form.
- Some labels and text areas have already been placed to help you understand the process. You can remove them or add new labels and text areas by selecting them from the list at the top.
If you're not sure which form elements you need, just leave them as is, you can come back and edit them later.
Depending on the elements you select, your code should look something like this:
- You can add and remove elements depending on your needs. For convenience, use special tools over the area with the shape itself.
- The * in the code means that this field is required.
Step 3 – Setting Up Message Format
When a visitor sends a message through the feedback form, you will receive a message containing his name, contact information and the content itself.
You can customize this message in the section Letter– some of the tags that you can use in the letter are listed above the letter itself. Try changing the email template by adding some tags to it - you can come back at any time and change it again.
IMPORTANT! Make sure you have entered the correct email address in the field To whom– this is the address to which all messages will be delivered.
Step 4 – Setting Up Notifications
In the tab Notifications you can customize the messages that your visitor will see when the email is sent successfully or when there is an error (incorrect email address or failure to fill in one of the required fields, etc.).
Step 5 – Saving and Publishing the Form
When you finish setting up, you can save the changes by clicking on the button Save at the top right of the panel.
After saving, a shortcode will appear at the top of the page. It will be highlighted in blue and should look something like this:
- Select the shortcode and copy it
- Paste the shortcode into the page, post, or widget where you want the form to appear
- The result should be something like this
Step 6 – Testing the Contact Form for WordPress
It is very important to check the operation of the feedback form and take care of its correct appearance. Also make sure that messages through the form are delivered consistently.
To do this, simply visit your site's page with the form and submit a message using it - you can always go back to the form editor and make the necessary changes.
Conclusion
This tutorial helped you learn how to create a contact form using the WordPress plugin – Contact Form 7. Now you can receive messages from your users directly through the site.
Want to know even more? You can experiment with tags and templates and change almost everything. You can also try setting Flamingo– a message storage plugin to store all received messages in a database (this is quite useful if you have problems with your mail server).
Greetings, friends. Today's tutorial will help your WordPress site have a nice and functional feedback form. We will do it using the Contact Form 7 plugin. At one time I spent a lot of time searching for a normal contact form and worthy alternative I haven't found this plugin yet.
Plugin features
Let me remind you once again that we will be working with a plugin, so if you need feedback without a plugin, you’d better visit the article about, the setup is a little more complicated, but the option is more universal (suitable for every site) and puts less load on the servers.
The main advantage of the contact form on Contact Form 7 is its ease of customization, almost unlimited functionality and automatic design adjustment to any WordPress template. With its help, you can create not only a form for sending messages from the site. The plugin can be used to create an order button, a call back, or a complex questionnaire with checkboxes and drop-down lists. It is also possible to attach files for transfer.
In a word, the plugin is mega-functional.
If you are still concerned about the question “to do or not to do a contact form?” (you can get by by simply posting contact information on the right pages), then I will say unequivocally - it’s worth doing.
Firstly, sending a message directly from the site is more convenient than opening mail program and fill everything out manually. Saving time won't hurt anyone.
Secondly, the contact form can be customized and this will allow you to receive letters of a standard format - they will be easier to navigate. For example, you can set a standard header for a message “Order” and all emails from the orders page will arrive with this header.
Thirdly, using a contact form allows you to hide your email address and, thereby, get rid of possible spam that inevitably appears when your email box becomes publicly available.
Fourthly, it is simply stylish and modern.
Installing and configuring the Contact form 7 plugin
The plugin is in general wordpress database, so there is no need to search for its files somewhere, download them for yourself and then upload them to the hosting. Everything is made simpler - through the WordPress admin, enter the plugins section, type “Contact form 7” in the search field and install it. If you have never installed plugins, then detailed instructions how to install the plugin.
Setting up the Contact form 7 plugin
Setting up the plugin consists of two stages.
The first is setting up a specific form. Various shapes there can be many, each of them can contain its own set of fields. In a word, for each task and each page on the site you can separately create a feedback form, Wordpress allows this - their list will be stored in the plugin database.
The second stage is inserting the form onto the site pages. Each form we create inside the plugin will have its own unique shortcode. To insert it onto the page, you only need to insert it.
So, let's go.
To begin, in the left menu of the admin panel we find the Contact form 7 tab. A menu with two items will pop up under it - “Forms” and “Add new”.
We don’t have any ready-made forms yet, so let’s go to the “Add new” section. A page will open there asking you to select a language, and the default language will also be listed there. Just click the blue “Add New” button.
Form settings are divided into separate blocks. I will consider them in order.
Block “Form name”
The first block is responsible for the name of your form - place the cursor on the inscription “Untitled” and enter the name you need. This name will only be displayed to you in the list of contact forms of the plugin, so make it clear to you so as not to get confused in the future by all the variety.
Block "Form template"
Initially, this block contains a standard field configuration. It contains the name of the sender of the letter, his email address, email subject, email content and send button.
Required fields are marked with asterisks. If this field is left empty, the message will not be sent.
The layout of the fields can be customized using regular html markings.
As for setting up the fields themselves, you can remove unnecessary ones and add those that you need. If you do not want the subject of the letter to be entered manually, simply delete the corresponding block.
Adding fields is also very easy. On the right side there is a button to generate a tag, by clicking on it you will see a list of all possible fields that this plugin supports.
Select required element and configure its settings. The plugin is in Russian, so all settings are intuitive.
The first checkbox indicates whether the field is required or optional (it adds an asterisk).
After setting up the field, you will have 2 shortcodes:
- “Copy this code and paste it into the form template on the left” – this code is inserted into the form code in the same way as all the others;
- “And paste the following code into the letter template below” - we will need this code to format the letter in the next block.
This way you can add any number of fields, checkboxes, drop-down lists, elements for attaching files, etc. to the form.
Block "Letter"
Now our task is to customize the letter that we will receive. The letter does not in any way affect the functionality of the feedback form; it only serves to convey the information entered in the form.
Our task is to include all the information in the letter.
The first step is to indicate the email address to which the message will be sent (it can be anything).
The second point indicates email, from which the letter will be sent to you. I wouldn't change anything here, it's listed by default Mailbox your blog and added a tag with the name of the person sending the message.
Next we indicate the subject of the letter. As a standard, the subject is taken from the field that is filled in in the form. But you can remove this element from the form, and enter a specific topic in the field, which is set automatically in each letter. I did this for feedback forms from pages about services and advertising. Messages from there always come with the same subject “Ordering services” or “Ordering advertising” - simple and clear.
The additional headers field contains the “Reply-To:” tag so that when you respond to a letter received from your blog, you send the message to the blog, and to the address that the sender of the letter indicated in the form field. There is no need to change this field.
The “Letter Template” field is responsible for the internal content of the message you received. By default, it contains information about the sender, subject, and message text entered in the field.
At the end, the site from which the letter was sent is indicated.
If you added any additional fields to the form that were not installed by default, then do not forget to add the corresponding tag in the letter template. It was given to you in the “Form Template” block, where you generated the corresponding tag (the “And paste the following code into the email template below” field).
I love it text information This block (except for tags) can be changed to your liking. You can also add any descriptions and swap tags, arranging them in the order that suits you.
Block “Letter 2”
If you want someone else to receive the message sent to you, you can check this box.
This block is configured similarly to the previous one. By default, all the fields in it are filled in so that the letter goes to the person who filled out the form (apparently so that he does not forget).
You can set up a copy to be sent to, for example, your manager or accountant.
Block “Notifications when submitting a form”
In this block you can configure the messages that the user sees after he clicks the send message button. If you want to change anything, please, I left everything as it is.
Form activation
After you have filled out all the fields, return to the beginning to the “Form Name” block and click the “save” button located on the right.
The plugin will place the form you created in the list of active ones and assign it special code something like this:
[ contact - form - 7 id = "5464" title = "Verification" ] !} |
By pasting this code anywhere on your site you will get ready-made form to communicate with your potential clients.
Anti-spam – Akismet and Captcha
Spammers cause a lot of trouble for website owners, and each new form that allows you to write something only adds to the number of spam bots.
If you leave the contact form plugin in basic version, then, after some time, you will be attacked by many empty and meaningless messages.
There are two ways to get rid of spammers:
- Place a mandatory captcha (this can be done with an additional plugin – Really Simple CAPTCHA).
- Use the anti-spam plugin for WordPress – Akismet.
The first option is inconvenient because it forces visitors to manually enter additional characters. It's not that difficult, but some people don't like it.
Using the Akismet plugin is more convenient because it independently analyzes the entered data (names, email addresses, links) and, based on the accumulated database, draws conclusions about the spam or non-spam of the message.
In addition, akismet is installed on most WordPress sites to protect against spam in comments to articles. This means that when using it you will not need to install additional plugins and create extra load to the website.
Spam protection with Akismet
1. Install the Akismet plugin on your site and activate it - .
2. Add additional data to the contact form tags:
- add in the field with the author's name akismet:author
- in the field with sender email letters akismet:author_email
- in the site address field akismet:author_url
It should look like this:
Once saved, the contact form should block all messages sent by spammers. You can check the operation of the filter using the special test name “viagra-test-123? – when you enter it, an error message should appear.
To make the verification less stringent, you can check only some of the fields, for example, name and email, and leave the website address unchecked. This will increase the likelihood of spam messages getting through, but you will be less likely to lose the messages you need.
Spam protection with Really Simple CAPTCHA
If you find that Akismet does not suit you (it lets through a lot of spam or blocks the necessary messages), then you can enable a captcha. To do this, install the Really Simple CAPTCHA plugin.
Open the desired contact form for editing
Select Captcha from the list of tags. In the tag settings, you can select the size of the image with symbols, otherwise there is no need to change anything. At the bottom of the settings window, 2 tags will appear, one is responsible for displaying the image, the second displays a field for entering data from this image.
For the captcha to start working, you need to copy and paste both of these tags into the left window of the form template, and then save the changes.
Placing a feedback form in a pop-up window
The contact form does not always have to be located in a specific section of the site; sometimes, the client should be able to access it from every page of the resource.
In such cases, posting a full form is not always convenient. It is much easier to place a button in a prominent place that attracts attention. Clicking this button should already lead to the opening of the form.
Thus, a person will be able to send messages from the site without leaving the page he needs.
This is done using another plugin – Easy FancyBox.
1. Install the plugin
First of all, we install the plugin itself; it is in the general plugin database, so all you need to do is enter its name in the admin panel of your blog in the search for plugins. After installing the plugin, a “media files” tab will appear in the “settings” section.
In this tab you need to find a list of content types that should be displayed in the pop-up window. By default there is only Images, you need to add Inline content.
Now that the plugin setup is complete, let’s move on to setting up the feedback button.
2. Paste the code into the site
In principle, you can use a regular text link, but an image button will look better.
On your site, where you want to display a button for the contact form (in the header, footer or sidebar), insert the following code:
< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "contact form" alt = " contact form " src = "http://link to picture"> < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [ contact - form - 7 id = "your form id" title = "name of your form"] < / div > < / div > |
In the code, you need to indicate the address of the image that you use as a feedback button, and edit the shortcode of the form itself - enter your id and title.
3. Remove the restriction on shortcodes in the sidebar
This item is required if you want to install a button in the sidebar. The sidebar in WordPress does not always allow shortcodes.
To enable this function, you need to open the function.php file for editing (directly from WordPress admin) and insert the following code before the closing bracket “?>”:
add_filter("widget_text", "do_shortcode");
add_filter ("widget_text" , "do_shortcode" ) ; |
It will give you the ability to execute all shortcodes in the sidebar.
I ended up with this nice pop-up form:
Several different pop-up forms on one page
Sometimes there is a need to place several forms on a website with different settings and fields.
For example, one button leads to a form with a name and phone number and is used to order a call back from the site, and the second should open another form where there is a detailed order application (with an address, a description field, the ability to attach a file, etc. ). In the very Contact plugin Form 7 you can make an infinite number of form options, but how to fit them into different buttons on the same page?
To do this, you need to adjust the button code from the previous paragraph. The first button uses the option presented above. In the second, two values change:
- The link changes, assign the href parameter the value #contact_form_pop_2
- Change the id to the same value #contact_form_pop_2