Create a contact form and send it by email. Connecting the PHP file and setting it up. Glow effect in jQuery

• Step 5. Using the example above, add the rest of the fields you need, each time starting with the tag

  . To set the field with text message use tag . Options " cols" And " rows" are responsible for the width and height of the text field. You can set the parameters which you like best. You should get something similar to what is shown in the screenshot below.

• Step 6. To protect yourself from bots, of which there are quite a lot on the Internet today, create another line using the tag . Due to the parameter " style=”display:none” "This field will not be visible to mere mortals, but will be filled in automatically by bots. Thus, you can always distinguish a living person from a program.

• Step 7. The final stage of markup will be creating a submit button. The tag is used for this . Create new block

  and inside it enter the button code with the following parameters:

  send a message . You should get a similar result as shown in the screenshot.

Working with Cascading Style Sheets (CSS)

• As you have already noticed during the marking process, we ended up with something very crooked, inconspicuous and disgusting. In order to give the feedback form a more or less neat appearance, one language HTML won't be enough. For this purpose you will have to resort to using styles CSS.
• If you took the advice to improve your basic skills on the resource htmlbook.ru, then set certain parameters design for all parts of the form using CSS It won't be difficult for you. If you don’t have the desire or time to tinker with all this, then we will provide you with a ready-made code and tell you how to connect it.

Connect styles CSS To HTML can be done in two ways:

• Copy the code from our cascading tables file to the very bottom of the file style.css, which is present on the site hosting
• Move our style file to your hosting and connect it

File style.css connects inside the tag using a script . If the file with styles is not in the same folder as the main html file, then you must specify the path to it. In our style file, each element has a designation. If you wish, you can change the parameters for yourself, guided only by basic programming skills.

Connecting the PHP file and setting it up

As mentioned earlier, the script PHP is responsible for the execution of the feedback form. However, in order to more or less understand how the language works PHP, must read large volume literature and spend a decent number of hours practicing. Therefore, as is the case with CSS, we will provide you with a ready-made file with a PHP script, which you only need to attach to the document with the form.

Unlike the file style.css, the file with the PHP script is attached in the properties of the form itself. Let's start in order:

• Step 1. Open the code you wrote earlier and find the line with open tag forms. Add properties to it " action="contact-form.php"" And " method="post"" See the example in the screenshot.

• Step 2. Download our php file and place it on your hosting in the same folder where the html document with the form is located. So php and html files will interact with each other.

• Step 3. Next, you need to customize the script for yourself. Open the file and set the variables, giving them the same names as in html script. If you added additional fields to the form, add them in the php script exactly as shown in the screenshot.

• Step 4. Next you need to add two more variables with the address of your Email and the subject of the letter, which will be displayed on your inbox. In the line with the variable " $address"Indicate your E-mail, and in the line " $sub» email subject as shown in the screenshot.

• Step 5. In the line with the variable " $mes» customize the format of the letter that you will receive by email. You can rewrite it unchanged or edit it to your liking.

• Step 6. All other lines are responsible for sending the message and contain bot protection settings, so they must be left unchanged. In the end, the complete code should look something like the screenshot below.

After completing all the steps, you will receive this simple, neat feedback form.

A selection of beautiful design feedback forms in HTML and CSS for various purposes

• Based on the instructions above, you can easily “draw” a feedback form to suit your own taste. However, if you do not have the time or desire to create a form yourself from scratch, you can find ready-made designer forms on the Internet and having basic skills HTML edit them to suit your needs.

• After a little searching, we found for you a selection of 35 beautiful pop-up design feedback forms that are written in HTML And CSS. These forms are suitable for engines such as WordPress And Joomla, have a simple and easy setup from the control panel, and are also great for sites without an engine.

VIDEO: Pop-up feedback form for a WordPress site

One of the most common tasks in practice is the implementation of a feedback form. You mean writing its HTML code, designing it in CSS, creating PHP script a, which would process the data received from the user and send it to our mail, writing a JS script that would check the form for the adequacy of the entered data, protecting our brainchild from spam, so that our Mailbox did not collapse from bot attacks.

All of the above points will be discussed in our review and commented on in detail.

So, let's start creating a feedback form:

HTML

First of all, we write HTML code, which specifies the fields that the user will fill in. They will be formalized in the future. The form code looks like this:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Name: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Telephone: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-mail: < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Message: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Send" />

And visually it now looks like this:

I agree, so far everything is ugly and nothing is clear, but we have just begun.

Let's look at the above code in detail:

• < form method= "post" action= "mail.php" > …

  
  In order to create a form you need to use the form tag. It is he who determines the beginning and end of the form for the code interpreter. It, like any tag, has a whole set of attributes, but there are only two required for the form to work, these are method (the method of sending a request to the server, post is used as standard for forms) and action (indicates the path to the form handler file, namely in This file will contain a PHP script, which will then send the user-entered values ​​to us by email. In our case, we see that this file is called mail.php and it is located in the same site directory as the page we are considering).

• < input maxlength= "30" type= "text" name= "name" />

  
  Next we have inputs. These are actually the form fields themselves into which users will enter the information we need (type="text" indicates that this will be text). The maxlength attribute specifies how many characters the user can enter in a given form field. Most important attribute this is name – it specifies the name of a specific field. It is by these names that the PHP script will subsequently process the information entering it. If desired, you can also set the placeholder attribute, which displays text inside the field that disappears when the cursor is placed inside it. One of the problems with placeholder is that it is not supported by some older browsers.

• < label for = "name" >Name:

  
  Used if we have abandoned placeholders. The usual field signature, the for attribute tells which specific field it refers to this signature. The value indicates the name of the field we are interested in.

• < textarea rows= "7" cols= "50" name= "message" >

  
  Just like input, it is intended for the user to enter information, only this time the field is designed for long messages. Rows specifies the field size in rows, cols in characters. In general, they set the height and width of our field.

• < input type= "submit" value= "Send" />

  
  Type="submit" tells us that this is a button for submitting a form, and value specifies the text that will be inside this button.

• < div class = "right" >

  
  used only for further visual design forms.

CSS

In order for our feedback form to look presentable, it needs to be formatted. To get the following result:

We used this code:

form ( background: #f4f5f7; padding: 20px; ) form . left, form . right ( display: inline- block; vertical- align: top; width: 458px; ) form . right ( padding- left: 20px; ) label ( display: block; font- size: 18px; text- align: center; margin: 10px 0px 0px 0px; ) input, textarea ( border: 1px solid #82858D; padding: 10px; font- size: 16px; width: 436px; ) textarea ( height: 98px; margin- bottom: 32px; ) input[ type= "submit" ] ( width: 200px; float: right; border: none; background: #595B5F; color: #fff; text- transform: uppercase;

I don’t see the point in describing CSS in detail; I’ll only draw your attention to the key points:

1. There is no need to write a design for each tag in the form. Try to build your selectors so that you can design all the elements you need in a couple of lines of code.
2. Do not use unnecessary type tags to break lines and create indentations < br>, < p> etc. CSS with the display: block and margin with padding properties copes well with these tasks. More about why you shouldn't use it < br> in layout in general, you can read in the article Tag br, but is it really necessary? .
3. Not worth using tabular layout for forms. This contradicts the semantics of this tag, and search engines love semantic code. In order to form the visual structure of the document, it is enough for us div tags, and given by them in CSS properties display: inline-block (arranges the blocks in a row) and vertical-align: top (prevents them from scattering across the screen), set them the required height and voila, nothing superfluous and everything is located the way we need.

For those who want to save their time on website design, I can recommend using CSS frameworks when creating websites, especially self-written ones. My choice in this regard is Twitter Bootstrap. You can watch a lesson on how to design forms using it.

PHP

Well, it's time to make our form work.

We go to our root directory of the site and create the mail.php file there, to which we previously specified the path in action attribute form tag.

Ultimately his code will look like this:

\" javascript: history.back()\" >Go back

You can skip the discussion of the HTML and CSS portions of this document. At its core it is regular page website, which you can design according to your wishes and needs. Let's look at its most important part - the PHP script for processing the form:

$back = "

\" javascript: history.back()\" >Go back

With this line we create a link to return to previous page. Since we don’t know in advance from which page the user will get to this one, this is done using a small JS function. In the future, we will simply access this variable to display it in the places we need.

if (! empty ($_POST [ "name" ] ) and ! empty ($_POST [ "phone" ] ) and ! empty ($_POST [ "mail" ] ) and ! empty ($_POST [ "message" ] ) ) ( //internal part of the handler) else ( echo "To send a message, fill in all fields! $back "; exit ; )

Here we add a form check to ensure that the fields are full. As you guessed, in the $_POST["name"] part we write the value in quotes name attribute our inputs.

If all the fields are filled in, the script will begin to process the data in its internal part, but if at least one field has not been filled in, then a message will be displayed on the user's screen asking them to fill out all the fields of the form echo "To send a message, fill out all the fields! $back" and a link to return to the previous page that we created with the very first line.

Next we paste into the internal part of the form handler:

$name = trim (strip_tags ($_POST [ "name" ] ) ) ; $phone = trim(strip_tags($_POST["phone"])); $mail = trim(strip_tags($_POST["mail"])); $message = trim(strip_tags($_POST["message"]));

This way we cleared the user input from html tags And extra spaces. This allows us to protect ourselves from receiving malicious code in the messages sent to us.

The checks can be made more complicated, but this is at your discretion. We have already installed minimal protection on the server side. We will do the rest on the client side using JS.

I don’t recommend completely abandoning form protection on the server side in favor of JS, since, although extremely rare, there are unique ones with JS disabled in the browser.

After cleaning the tags, add sending a message:

mail ( "[email protected]", "Letter from your_site_address", "Wrote to you: " . $name. "
His number: " . $phone . "
His email: " . $mail . "
His message: ". $message "Content-type:text/html;charset=windows-1251") ;

It is this line that is responsible for generating and sending the message to us. It is filled out as follows:

1. “[email protected]” – here you insert your email between the quotes
2. “Letter from your_site_address” is the subject of the message that will be sent to your email. You can write anything here.
3. "Wrote to you: ".$name." < br /> His number: ".$phone." < br /> His email: ".$mail." < br /> His message: ".$message – we form the message text itself. $name – we insert the information filled in by the user by accessing the fields from the previous step, in quotes we describe what this field means, with the tag < br /> We break the line so that the message as a whole is readable.
4. Content-type:text/html;charset=windows-1251 - at the end there is an explicit indication of the type of data transmitted in the message and its encoding.

IMPORTANT!

The encoding specified in the “head” of the document ( < meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" /> ), encoding from the message Content-type:text/html;charset=windows-1251 and encoding in general PHP file must match, otherwise messages received by email will display “krakozyabry” instead of Russian or English letters.

Many do not explicitly indicate the encoding of the message being sent, but on some mail clients because of this, problems may arise in the future (unreadable letters are sent to the mail), so I recommend that you still indicate it.

Checking the form for adequacy of the entered data

To ensure that users do not inadvertently miss fields and fill out everything correctly, it is worth checking the entered data.

This can be done both in PHP on the server side and in JS on the client side. I use the second option, because this way a person can immediately find out what he did wrong and correct the error without making additional page transitions.

We paste the script code in the same file where we have the HTML part of the form. For our case it will look like this:

< script>function checkForm(form) ( var name = form. name. value; var n = name. match(/ ^[ A- Za- zA- Jaa- z ] * [ A- Za- zA- Ja- z ] + $/ ) ; if (!n) ( alert( "The name entered is incorrect, please correct the error") ; return false ; ) var phone = form. phone. value; var p = phone. match(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; if (! p) ( alert( "Phone number entered incorrectly") ; return false ; ) var mail = form. mail. value; var m = mail . match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \ ) + [ A- Za- z] + $/ ) ; if (! m) ( alert( "The email entered is incorrect, please correct the error") ; return false ; ) return true ; )

Well, now the usual analysis:

For that, so that when you click on the form submit button, we check it We attach the launch of our script to the form tag:

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

Now let’s take the contents of the check point by point:

As you can see, such a mini check is written for each of our fields. I highlighted the check for one field in the screenshot with a red square; for other fields it has a similar structure, and if there is a need to add a field or remove it, you can now easily do this.

Any website must have a feedback form, so sooner or later, each of us thinks about developing one. There are quite a lot of options on the Internet, some use popular plugins, some use their own personal developments, but most are looking for ready-made solutions. In any case, our feedback form for the site will be working and functional and about all this in order.

HTML

So, let's start, as always, with the usual template - html. First we need a form with several fields. For clarity and the standard of all forms, we will take 3 fields. Those. this will be Name, Email and Phone.

Each input we have has its own unique name name , we will need it later to send messages. You can also freely add your own fields and not only input , but also select , textarea . Just don’t forget to assign each of them their own names, which we will use when sending information by email. For convenience, I added a required attribute to each field, thanks to which the browser will not allow the user to send empty values ​​and will notify the need to fill them.

CSS

When the form is ready, you can transform it a little. Everything here also depends on your needs and fantasies. For clarity, I sketched out a few styles for each element so that everything wouldn’t look so flat. But if you are lazy or don’t know how to do it, then you can use my option:

Form( max-width: 400px; width: 100%; margin: 0 auto; ) input( box-sizing: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.11); padding: 10px 20px; margin: 10px 0; outline: none; border- radius: 5px; text-transform: uppercase; width: 200px; transition: 0.3s; background: black; box-shadow: 0px 2px 0 1px black;

Client part

Here it’s worth understanding in more detail, or rather choosing the appropriate option for yourself. To send messages by email we will need to use php language, i.e. create separate file, into which we will transfer all this data. But we this method We will not consider it here, since it is much more beautiful when everything happens without reloading the page. So we'll look at sending data via ajax.

If you want to do everything the old fashioned way, then you will need to slightly tweak the top html and set the form's method attribute value (post or get). It all depends on how you want to transfer data from the form. And also don’t forget to write an action that will indicate the path to the php file.

And we will use a more advanced method and send data without reloading the page, and upon receiving a response from the server we will give the user a message about successful operation, or an error. However, we will also need 2 files, let's say contact.php And custom.js.

First of all, don’t forget to include the library Jquery, with its help we will reduce the code several times and will be able to easily perform any actions using ready-made solutions.

$(".form").submit(function() ( var str = $(this).serialize(); $.ajax(( type: "POST", url: "contact.php", data: str, success : function(msg) ( if(msg == "ok") ( alert("The message has been sent"); ) else ( alert("Error! You may have filled out the fields incorrectly."); ) ) )); );

Now let’s understand the action plan and why we need all these libraries and files. When the user clicks the submit button, we have a submit event, which we will write in custom.js and based on which we will receive all the data from the form and pass it to the contact.php file. Here we check again whether our fields are empty (in order to avoid another opportunity spam), we send a message by email and notify the user of the results, which are transmitted as a response to custom.js.

If (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail "]); $txtphone = trim($_POST["mfbPhone"]); // from whom $fromMail = " [email protected]"; // Enter your email here $emailTo = " [email protected]"; $subject = "Feedback"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "From: Example form<$fromMail>\n"; $headers .= "Content-type: text/plain; charset="utf-8"\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Date: ". date("D, d M Y h:i:s O") ."\r\n"; // body of the letter $body = "Received a letter from the site ".$site." \n\nName: ".$txtname."\nPhone: ".$txtphone."\ne-mail: ".$txtemail."\nMessage: ".$txtmessage; mail($emailTo, $subject, $body, $headers); echo "ok";

This is the most elementary example work contact form. There are many options for how to modify the check file in PHP, create your own classes, etc. But our task was to create a simple and working example that you can use on your website.

demo

files

Ready plugins

Since you are on WordPress blog, then you are probably ready and eager to use all kinds of plugins, especially if you are a complete lamer in programming and layout. And I don’t blame you for this, and I can even present one of them to your attention for clarity. The purpose of this paragraph is not a recommendation, but only an example, since I used the plugin Contact Form 7 in several projects.

It is very easy to configure and almost always works flawlessly. If you need to create your own unique design, you can do it. All you need to do is add the necessary fields in the constructor, translate and change notifications about errors and successful sending in your own way, and you're done. Next, copy the shortcode and paste it in the desired place in the form.

I have never had any problems with the plugin and if you need quick and ready-made solution, then this is exactly it. If you have your own requirements for the form in terms of functionality and design, then it is better to use the first option, which requires knowledge in this industry.

It is now difficult to imagine a website without a feedback form.

Therefore, if your resource does not have a contact section, you should install it. Let's figure out how to do this.

Solutions for organizing feedback

Naturally, now there are several ways to organize feedback on a website: from universal scripts in PHP to plugins and modules for CMS. That is, as you can see, there is no need to write code manually.

You can use the following universal solutions:

• resort to services free online services, which automatically generate code HTML forms communications. But at the same time the file php processing you will need to write and stage it yourself. Here is one of the resources for these purposes
• Seek help from free online services that generate HTML code and provide data processors in PHP, which are often hosted on the servers of these services. One example of such resources
• Find free scripts on the Internet for setting up a feedback form. This option is applicable for people who know HTML and PHP at a certain level, because in any case the script will have to be adapted specifically for their site.

However, users often do not need extensive knowledge of website development - the versatility and wide selection of solutions allow you to set the desired form of feedback using any of the above methods.

Easy installation of feedback forms in HTML

Let's consider one of popular programs for writing and installing HTML feedback forms with captcha. A wide selection of them is presented, for example, on this website. The site is Russian-language, it will be easy to make a choice, and the installation itself will take no more than three minutes.

But first you should remember to make amendments to standard file config.php - you need to change the encoding and write the correct one email address recipient.

The folder with the corrected files must be copied to the root directory of the site, but before that, limiting its indexing in the Robots.txt file ( Disallow: /sendmail-zakaz).

In fact, that's all - if the actions are performed correctly, finished form will look like this:

There are feedback form builders that do not require PHP support. Let's consider one of them. After clicking on the link, you will see a window where you can create the desired form by making settings.

After everything required parameters entered, you should enter the verification captcha and click on the “Generate” button, and then “Get code”.

The resulting code just needs to be copied to the selected page of the site.

You can make a simple contact form yourself. To do this, you need to create a form.php file and save the following code in it:

For the form to function, a handler file is needed. Let's call it mail.php and save it in the following code:

Feedback form in Joomla

This one is quite universal system control, the feedback form can be configured using the “Contacts” component. It is quite simple, but nevertheless its functionality is quite enough for normal operation forms.

So, to configure the component, go to administrative panel and select the “Components/Contacts/Contact Categories” tab.

A page will open that will not have any categories. To create it, click on the “New” button.

The system will prompt you to fill in the “Title” and “Nickname” fields. Having done this, you need to check the “Yes” box in the “Published” line.

The settings must be saved by clicking the button of the same name in the right top corner window. There is a category, all that remains is to create a page with a contact form. To do this, go to the “Contacts” tab and click on the “New” button in the upper right corner.

Fill out the dialog box that opens. Be sure to fill in the “Name” line and the “Nickname” line. Check the “Yes” box in the “Published” line and indicate the category this contact. Moving a little lower, we will find the “Contact with User” window, where you need to specify the contact person who will receive the messages.

The “Information” field must also be filled in, where you must indicate the position of the form on the website and the recipient’s email address. The remaining menu items can be filled out as desired.

The feedback form is configured, all that remains is to place it on the website. For these purposes, you need to go to the administrative panel and, by selecting the “Menu” tab, decide on where the item will be displayed.

In this menu we create new item. To do this, click the “Create” button and select “Contacts/Contact Page” in the menu that opens.

A page will open on which you need to set the name of the menu item, enter its alias, enable its reflection, and in the “Select a contact” main parameters field, specify the contact information to which this menu item will be linked. Save the settings.

Go to the site, find the “Contacts” item and click on it. The following page should open:

Feedback for WordPress

In this system, you can create a feedback form using plugins. The most popular and functional is the Contact Form 7 plugin.

After this, you need to go to the “Pages/Add New” tab, and, turning on HTML mode, paste the previously copied feedback form code

Create a feedback form

Creating a feedback form on the website

In the process of website promotion, along with studying visitor statistics, information about the website from the visitors themselves is of particular importance. One of the most simple ways to obtain such information is to place a page on the website with feedback form. The visitor leaves a message, and it will be sent to your email address or any other one you specify. In this case, the visitor does not need to use his mail program, he doesn’t even have to have his own e-mail.

The simplest example This form is shown in Fig. 1. (This is a completely working sample, and you can use it to send me a thank you note.)

Fig.1. Simple feedback form

To place such a feedback form on a website, you only need basic information about HTML and the ability to operate two commands - Copy And Insert. Let's consider the sequence of actions to create a feedback form (Fig. 1) on the HTML page of the site.

1. Check that tariff plan your hosting (the office where your website is hosted) supports PHP. If not, then you will most likely have to pay extra to switch to another tariff that supports this same PHP. You don’t have to look for the meaning of this abbreviation, since you don’t need knowledge of PHP.

As you can see, the entire form is created by the tag