Creating a Contact Form for Your Website [Quick Tutorial]

Contact forms are a standard feature of most websites. This guide will show you how to make a simple one using HMTLand PHP.We are going to create a simple form that asks the user for their name, email address and message.

Here is the HTML:

 

<form action="contact.php" method="post">

    Your name<br>

<input type="text" name="cf_name"><br>

    Your email<br>

<input type="text" name="cf_email"><br>

    Message<br>

<textarea name="cf_message"><br>

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

<input type="reset" value="Clear">

</form>

 

The <form> tag is given an action and method attribute to send the data to your Web server.

The input of the name field is set as text, and given a name attribute: "cf_name". Make sure the name attribute is unique for each field in your form as it will be used to organise the data on your server.

The input of the email field is set as text and it is given a name attribute: "cf_email".

Message is set as <textarea> and is again given a unique name identifier: "cf_message"

Finally,the submit and clear buttons are created.

It will look something like this:

 


 

Image source: http://www.templatemonster.com/help/how-create-contact-form-html.html

Now you have to create the contact.php, which will get the data entered by the user on your website and send it to you in an email.

Here is the code:

<?php

$field_name = $_POST['cf_name'];

$field_email = $_POST['cf_email'];

$field_message = $_POST['cf_message'];

 

$mail_to = 'YOUR EMAIL ADDRESS';

$subject = 'Contact form message from '.$field_name;

 

$body_message = 'From: '.$field_name."\n";

$body_message .= 'Email: '.$field_email."\n";

$body_message .= 'Message: '.$field_message;

 

$headers = 'From: '.$field_email."\r\n";

$headers .= 'Reply-To: '.$field_email."\r\n";

 

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

 

if ($mail_status) { ?>

            <script language="javascript" type="text/javascript">

                        alert('Thank you for contacting us. We will get back to you as soon as we can.');

                        window.location = 'contact_page.html';

            </script>

<?php

}

else { ?>

            <script language="javascript" type="text/javascript">

                        alert('Sorry, but you message has failed. Please send an email to YOUR EMAIL ADDRESS and we will get back to you.');

                        window.location = 'contact_page.html';

            </script>

<?php

}

?>

 

It starts by assigning the data from the HTML contact form fields:

 

·         cf_name

·         CF_email

·         cf_message

 

It then specifies the email address that the query should be sent to, as well as the subject of the email. Note that the subject will also include the name of the person that sent the message through the contact form.

It then composes the email message and includes the name, email address, and message from the website visitor. The headers of the email are also created.

The next part checks whether the email has been sent properly to ensure that you don't miss any messages. If the email was sent properly, the user will get the message: "Thank you for contacting us. We will get back to you as soon as we can."

If the email was not sent properly, they will get the message: "Sorry, but you message has failed. Please send an email to YOUR EMAIL ADDRESS and we will get back to you."

Change "YOUR EMAIL ADDRESS" to your actual email address.

That's it! You now have a simple contact form on your website that emails you when a user completes the form.

Happymarli
Happymarli Hire Me

Professional Proofreader, Editor and Writer

Do you need a professional editor and writer to proofread your technical document, thesis, novel, statement of purpose, personal statement, resume, cover letter, manuscript, essay, short story, textbook content, article, and marketing material ensuring their content is flawless and appealing to readers? Why Hire Me? 1) I have a 5 star average rating for 2397+ projects completed on freelancer. 2)...

Hire Me

Next Article

Setting Up and Analyzing Campaign Tracking in Google Analytics