• Twitter
  • Facebook
  • QQuora
  • Pinterest
  • Youtube

Saturday, September 28, 2019

Make a Contact Form Using HTML and PHP That Emails You Data


contact-form

Whether you are managing a small or a large business, contact form  is mandatory. Having a contact form in your business website can help your customers engage with you and in return, you will get higher sales and more profit. Contact form can help you understand your customers and improve your business accordingly.
In this tutorial, we are going to make a contact form using PHP, HTML and some CSS that will send the information to your email. This contact form can also function in your localhost if you have properly setup your email service.

Requirements: 

To get started with your contact form, you will need the followings: 
  •  A Text Editor (E.g. Notepad)
  • PHP Server
  • Email Server

Initial Setting:

 Download and install your favorite text editor from their official website. One of the most popular free text editor software is Notepad++. You can download it from the following link:
https://notepad-plus-plus.org/downloads/
Here is a link to my favorite text editor, Sublime Text:
https://www.sublimetext.com/3

Starting with the HTML:

We are making our contact form in PHP but making and designing a form requires HTML and CSS which can be written inside a PHP file.
So let's start by creating a .php file. You can give it a name you like. (e.g contact-form.php)
Now make a contact form using HTML. The HTML code goes as follows:


<html>
<head>

<title>Contact Form </title>

</head>

<body>
<form action="" method="post">
<h3all are="" fields="" h3="" required="">
  <input name="full_name" placeholder="Your Full Name" required="" type="text" />

  <input name="email" placeholder="Your Email" required="" type="email" />

  <input name="password" placeholder="Your Message" required="" type="text" />

  <button name="data-submit" type="submit">Submit
</h3all></form>
</body>
</html>

You can also manually add some more fields like address, age, gender etc.

Explanation to HTML code:

 We have used Doctype declaration to tell the browder about our HTML version. This informs the browser that our code is written in HTML5.

Title tag is used to give the title to our webpage that is displayed in top of browser tab.

Then we have specified our viewport using meta tag. It adjusts our form according to screen size.

Inside the form tag, we have used POST method to send data to PHP. This method sends data to PHP as HTTP post transaction. This method of data sending is safer than other method (GET).
Action attribute in form tag determines the action to be taken when user presses 'Submit' button. In this form I have left this field blank since I want to receive data in same page. If you want to receive data on another page, you may specify page address inside action attribute.

'Input' and 'Textarea' receive data and store in the variable defined by 'name'. 'Placeholder defines the default display text in input field. 'Type' attribute defines the type of data to be entered.
Finally,  submit button sends data to the address defined in our 'action' attribute.

Designing our form with CSS:

Use of CSS in our contact form will help us make our contact form look attractive. Only a few lines of CSS can change the whole appearance of our form. Let's style our form by using the following CSS:

  form {
  background-color: #ebebeb;
  padding: 10px;
  padding-right: 30px;
  width: 90%;
  border-radius: 3px;
  border-left: 3px solid green;
}


button[type=submit] {
  background-color: #57ff36;
  width: 100px;
  height: 30px;
  font-size: 20px;
  margin-top: 12px;
  cursor: pointer;
  border-radius: 5px;
}

button[type=submit]:hover {
  background-color: #4ce02f;
  transform: scale(1.1); 
}

input[type=text], input[type=email], textarea {
  width: 100%;
  margin-top: 5px;
  height: 40px;
  font-size: 18px;
  border-radius: 4px;
  padding-left: 10px;
  font-family: 'Mukta', sans-serif;
}
textarea {
  height: 200px;
  padding-top: 10px;
}


If you are good at CSS, you can manually change the style of your form. Even if you don't know CSS, search for some tutorials in google. You can learn its basics in a day.

 After proper HTML and CSS markup, our contact form will show up like this:
contact-form-using-php
A view of our contact form
NOTE: The view of contact form may vary slightly in different browsers. ( I am using firefox.)

Using PHP to store user data in variables: 

We have used 'name' tag in our HTML to give corresponding names to the data. Now we will extract those data and store in our variables in PHP so that we can send those data through email. It will require following markup:

// Get data from the form and store in respective variables
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = $_POST['full_name'];
  $email = $_POST['email'];
  $message = $_POST['message'];
}

Explanation to this code:

Now we will look whether the form method is 'POST' or not using 'if' statement. If our method is 'POST' the data collected from the form will be stored in different variables to send it to us.

Using PHP to email the data to you:

 PHP has a inbuilt 'mail' function which we can use to send mail through mail server. From the PHP side we will use the following codes to mail the data:

  //Setup email sending service

  //Sender's email
  $email_from = "[email protected]";

  //Reciever's email where you want to recieve contact information
  $email_to = "[email protected]";
  //Visitor's email
  $visitor_email ="$email";

  //Email subject
  $email_subject = "New Form Submission";

  //Main body of your email
  $email_body = "Name: $name\nEmail: $email\nMessage: $message";

  //Email headers
  $email_header = "From: $email_from";

  //Send Mail
  $send = mail($email_to, $email_subject, $email_body, $email_header);

  //Display error or success message
  if ($send) {
    echo "Your message has been sent successfully.";
  }else{
    echo "Some error occurred. Please try again.";
  }

To send mail successfully, you will need proper server side validation. So if you are getting email delivery problems, try fixing problems in mail server.

Explanation to this code: 

The inbuilt PHP function 'mail' is accepts mainly four parameters. Firstly we store the data in some variables and use those variables as parameters. The first parameter defines the receiver's email address. You must use your email address where you want to receive the contact information.
The second parameter defines email's subject. In our case, we set it to 'Contact Information' since we are receiving information from contact form.
In the third parameter, we write the email body. It will contain name, email and message of the person who sends us data.
Finally, fourth parameter is a header. It will be displayed as a drop-down in gmail. Check this our by ourself!

We now email all the data to our email address. Then we use 'if' statement to tell the user whether the message has been sent or not.

Filtering the data to prevent hacking:

Some harmful scripts may be sent through the contact from either intentionally or unintentionally. We have to filter our data before we process them. This can be simply done by adding a small piece of php code in 'action' attribute under 'form' tag. 'Htmlspecialchar' converts all the html tags and codes into plain text due to which any scripts cannot be run through contact form.

  echo htmlspecialchars($_SERVER["PHP_SELF"]);


Finally assembling all data in a single page: 

Now I am going to assemble all the codes that I have written to single page, which can be used as contact form.


<html>
<head>
<title>Contact Form </title>
<style>
form {
  background-color: #ebebeb;
  padding: 10px;
  padding-right: 30px;
  width: 90%;
  border-radius: 3px;
  border-left: 3px solid green;
}


button[type=submit] {
  background-color: #57ff36;
  width: 100px;
  height: 30px;
  font-size: 20px;
  margin-top: 12px;
  cursor: pointer;
  border-radius: 5px;
}

button[type=submit]:hover {
  background-color: #4ce02f;
  transform: scale(1.1); 
}

input[type=text], input[type=email], textarea {
  width: 100%;
  margin-top: 5px;
  height: 40px;
  font-size: 18px;
  border-radius: 4px;
  padding-left: 10px;
  font-family: 'Mukta', sans-serif;
}
textarea {
  height: 200px;
  padding-top: 10px;
}
</style>
</head>

<body>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF">
<h3>All fields are required</h3>
<input name="full_name" placeholder="Your Full Name..." required="" type="text" />

  <input name="email" placeholder="Your Email..." required="" type="email" />

  <textarea name="message" placeholder="Your Message..." required="" type="text"></textarea>

  <button name="data-submit" type="submit">Submit</button>
</form>
<!-- Start PHP code-->
<?php
// Get data from the form and store in respective variables
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = $_POST['full_name'];
  $email = $_POST['email'];
  $message = $_POST['message'];

  //Setup email sending service

  //Sender's email
  $email_from = "[email protected]";

  //Reciever's email where you want to recieve contact information
  $email_to = "[email protected]";
  //Visitor's email
  $visitor_email ="$email";

  //Email subject
  $email_subject = "New Form Submission";

  //Main body of your email
  $email_body = "Name: $name\nEmail: $email\nMessage: $message";

  //Email headers
  $email_header = "From: $email_from";

  //Send Mail
  $send = mail($email_to, $email_subject, $email_body, $email_header);

  //Display error or success message
  if ($send) {
    echo "Your message has been sent successfully.";
  }else{
    echo "Some error occurred. Please try again.";
  }
}
?>
</body>
</html>


Found any mistakes or have any queries?
Feel free to comment below or contact me directly.

0 comments:

Post a Comment

Contact

Get in touch with me


Adress/Street

Bharatpur - 22, Chitwan, Nepal

Phone number

+(977) 9865359485

Website

www.sapkotaanish.com.np