Block “Form name”. Benefits of creating your own contact form

This tutorial will show you how to create the simplest contact form for an HTML template.

First of all, create 2 files: contact_form.html and contact.php. The first file will contain the code for your contact form, and the second will process the data from this form.

HTML

Below is an example of HTML code contact form:

Your name

Your e-mail

Message

In the browser it will look like this:

Let's take a quick look at the main aspects of this form. The tag must have 2 additional attributes:

action="contact.php" - determines where to send data from the contact form after sending the letter.

method="post" - defines how to send data from the contact form to a file, specified by attribute action. Tags must have a "name" attribute with a unique identifier. This attribute is used to identify contact form data after an email has been sent. It should also be noted 2 additional element, which are used as Submit and Clear buttons, the first element must be defined with the type="submit" tag and the second with the type="reset" tag.

The procedure for creating a contact form is quite simple.

PHP

Let's move on to creating a contact.php file that will collect data from the contact form, compose it into a message and send it by email. Download the finished contact.php file from this link. Below is the code of the file with comments to its main sections:

Assigning data from each contact form field (cf_name, cf_email, cf_message) to the following PHP variables ($cf_message, $field_email, $field_message) $field_name = $_POST["cf_name"]; $field_email = $_POST["cf_email"]; $field_message = $_POST["cf_message"];

The $mail_to function should contain the email of the site owner, this is exactly the address where messages will be sent. You can specify several addresses at once Email, separating them with a comma (for example, [email protected], [email protected])

$mail_to = " [email protected]";

Subject of the letter you will receive:

$subject = "Message from a site visitor " . $field_name;

Building a message structure:

$body_message = "From: ".$field_name."\n"; $body_message .= "E-mail: ".$field_email."\n"; $body_message .= "Message: ".$field_message;

Construction of message headers:

$headers = "From: $cf_email\r\n"; $headers .= "Reply-To: $cf_email\r\n";

We define the mail() function and assign it to the $mail_status variable, which is used to check whether the letter was sent successfully.

$mail_status = mail($mail_to, $subject, $body_message, $headers);

If the mail() function succeeds then use the code below:

If ($mail_status) ( ?> // Print a message alert("Thank you for the message. We will contact you shortly."); // Redirect to some page of the site. You can also specify full URL, e.g. http ://template-help.com window.location = "contact_page.html"; // Print a message alert("Message failed. Please, send an email to [email protected]"); // Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com window.location = "contact_page.html";

You can download ready files contact_form.html and contact.php

This article will show you how to create a form. feedback, which sends data using AJAX. We will use jQuery and simple mail PHP script to send form data by email.

Creating an HTML Form

Our first task is to set up the HTML form. Set the element's id to ajax-contact , its method attribute to post , and its action attribute to mailer.php .

Name: Email: Message: Send

We've created a form with fields to enter your username, email address, and message. Note that each form field contains a required attribute. In browsers that support HTML5 form validation, its use will not allow data to be submitted if the fields are left blank.
Next, you need to create a message that will be used to display error or successful submission messages. Place this element above the tag and give it an ID of form-messages .

Now you need to download the code examples and copy the style.css file to your project directory. You also need to add an element that tells the browser to load the CSS file.

You need to create two elements that reference jQuery library and app.js file. Add them before the closing tag.

It's important to download the jquery-2.1.0.min.js file first because the app.js script requires jQuery.
This is all the HTML code you will need. Now let's look at JavaScript.

Submitting form data using AJAX

Create in the project directory new file named app.js. It will include the code needed to submit the form data using AJAX.
Copy the following code into your app.js file.

We've created two variables form and formMessages that refer to the corresponding HTML elements.
Next, you need to create a listener that intercepts the submit event on the form. This can be done using the jQuery submit method.

// Set up a listener for the contact form. $(form).submit(function(event) ( // Block the submission of form data in the browser. event.preventDefault(); // TODO ));

We pass the submit method a function that will be executed when the user submits the form data. We also told the browser not to submit the form as usual by calling the preventDefault method on the event.
Now we need to serialize the form data. These will be converted to a key/value string to be sent via an AJAX request. Use jQuery's serialize method to serialize the form data, and then store the result in the formData variable.

// Serialize the form data. var formData = $(form).serialize();

Now let's write the code that is responsible for sending the form data to the server and processing the response. Copy the following code into your app.js file.

// Submit form data using AJAX. $.ajax(( type: "POST", url: $(form).attr("action"), data: formData ))

To create a new AJAX request, use jQuery's ajax method. We passed the object to the ajax method, which includes a number of properties used to customize the request. The type property specifies the HTTP method that will be used to send the request. In our case, this is the POST method.
The url property is the location of the script that will process the form data. We set the value for this property by retrieving action attribute from the form. The value of the data property is set using the formData variable we created earlier.
Then you need to process the successful response received from the server. Copy the following code directly after the closing bracket of the ajax call. Please note that I intentionally left out semicolons.

Done(function(response) ( // Make sure the formMessages div contains the "success" class. $(formMessages).removeClass("error"); $(formMessages).addClass("success"); // Set the text messages. $(formMessages).text(response); // Clear the form. $("#name").val(""); $("#email").val(""); $("#message ").val(""); ))

The done method will be called if the request completes successfully. First, we check that the formMessage s element contains the success class. Then we set the text content of the element using the data returned by the mail script. Then we clear the values ​​of each form field.
In the last fragment JavaScript code we need to write what should happen if an error occurs. Copy the following code into your app.js file.

Fail(function(data) ( // Make sure that the formMessages div contains the "error" class. $(formMessages).removeClass("success"); $(formMessages).addClass("error"); // Set the message text. if (data.responseText !== "") ( $(formMessages).text(data.responseText); ) else ( $(formMessages).text("Oops! An error occurred and your message could not be sent."); ) ));

The fail method is called if the mail script returns an error. First, let's check that the formMessages element contains an error class. Then we check if the AJAX request returns responseText . If so, use text to set the contents of the formMessages element. Otherwise it is used standard message about the error.
This is all the HTML and JavaScript code needed to create an AJAX contact form. In the next section, we will create a script that is responsible for processing the form data and sending the email.

Creating a PHP email script

This simple script is responsible for validating the form data and sending the email. If an error occurs, the mail script will respond with the appropriate status code to execute the JavaScript.
Create a new file called mailer.php and copy the following code into it.