In this series of tutorials, we’ll try to cover most of the aspects of a well-coded and secure HTML/PHP contact form. Even if you’re not familiar with PHP and have only basic knowledge of HTML, that will be totally enough. First, let’s think of why you would actually need a contact form on your site? Well… if you’re running a business, there should be a way for customers to contact you and discuss the project or prices with you. Of course, there can be any other reason you would want that on your website. Since we want everything to be as easy-to-follow as possible, we’ll do one thing at a go. Today, we’ll just create a basic layout for our contact form.
Though, not always it’s a customer who uses the form. It can be a spam bot, which found vulnerabilities in the code of your php contact form and sends tons of spam emails through your website. A situation like this can lead to blockage of your hosting account or even poor ranking in search engines like Google, which will treat your site as a spammer. We shall learn how to prevent such problems and many more in this and upcoming tutorials.
Creating Basic HTML Contact Form Layout
First, create a new file and name it “contact-form.html” By the way, you may want to check this post to see what free HTML/PHP editors are available out there. Below, you will find the code to insert into the file. This is basically how any well-coded HTML file should start.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>HTML PHP Contact Form by WebDesy.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>
All the further HTML code should be inserted between the <body> and </body> tags. Now add the following line of code right after the opening <body> tag
<form name="contact-form" action="send-mail.php" method="POST">
</form>
Again, we have the opening tag <form> and the closing tag </form>. All the form items, like input fields and buttons, should go between those two tags. Now let’s run through the additional attributes we’ve set for the <form> tag:
name– this attribute specifies the name of the form. Basically it’s not very important for us at the moment, as this value is required in case we want to attach some JavaScript actions to the form. Nevertheless we’ll define thenameattribute, as we might need it in upcoming tutorials;action– specifies where to send the form data to when it’s submitted. It’s not an email you send the data to, but a PHP file which should process that data and send it to your email. In our case, the file is entitled send-mail.php;method– specifies the HTTP method to send submitted form data. It can be either POST or GET. Just remember that it’s preferable to use POST when sending any sensitive data, so we’ll stick with the POST method.
Adding input fields
<label for="field_name">Name:</label>
<input type="text" id="field_name" name="sender_name">
This piece of code adds a one-line text input field to our contact form. As you can see it consists of two tags: <label> and <input>.
<label> – defines a text label for the <input> element. This tag provides a usability improvement for mouse users – if the user clicks on the text within the <label> element, it toggles the input.
- the “for” attribute should have a value which is equal to the “id” attribute of the related input element to bind them together. If you look at the code above, you will notice that both the “for” and “id” attributes have the “field_name” value
Now let’s learn the attributes assigned to the <input> tag:
type– defines the type of theinputelement. Those are radio buttons, checkboxes, one-line text fields and so on. Here are the values this attribute can have:text,checkbox,radio,button,image,password,reset,submit,file,hidden.name– this one is extremely important for the contact form to work. You should assign some unique name to each of your input fields. For example if it’s an input for the customer’s phone, it can be something like “customer_phone”, “field_phone”, “phone”, etc.Note: if this attribute is omitted or has no value assigned to it, the data from the field won’t be sent to the server.
Now you can just lay back and watch a quick screencast. It’s about what we’ve just covered but in video format. I’m using Adobe Dreamweaver in that screencast but you can use any HTML editor of your choice. Even NotePad.
Now let’s add two more fields of the same type, so that the visitor could enter the subject of the email and his/her phone.
<label for="field_email">Your e-mail:</label>
<input type="text" id="field_email" name="sender_email">
<label for="field_phone">Phone:</label>
<input type="text" id="field_phone" name="sender_phone">
Ok, now for the last field – the one where your visitor can actually write a message to you
<label for="field_message">Message:</label>
<textarea id="field_message" name="sender_message"></textarea>
This field should allow the user to input multi-line text, so we’ll use another tag for that – <textarea>. One thing to remember is that <textarea> requires a closing tag </textarea>, while <input> – does not. The rest of the syntax and attributes are the same.
So, are we there yet? 🙂 Almost! One last thing – the button to submit the contact form:
<input type="submit" name="send_message" value="Send">
The “submit” button is created using the input tag with the type of the attribute set to “submit” – this basically tells the browser that when the button is pressed, the contact form should be submitted. The new attribute we have here is <value> – it defines the text of the submit button.
We’ve added all the fields and a button, and now we can end the form with the <form/> tag. A small “improvement” we can add – a couple of <br /> tags, after each input field.
If you preview your work in the browser you should see something similar to the screenshot below. Not too fancy I would say 🙂
The Final Code You Should Have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>HTML PHP Contact Form by WebDesy.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form action="send-mail.php" method="POST">
<label for="field_name">Name:</label>
<input type="text" id="field_name" name="sender_name">
<br /><br />
<label for="field_email">Your e-mail:</label>
<input type="text" id="field_email" name="sender_email">
<br /><br />
<label for="field_phone">Phone:</label>
<input type="text" id="field_phone" name="sender_phone">
<br /><br />
<label for="field_message">Message:</label>
<textarea id="field_message" name="sender_message"></textarea>
<br /><br />
<input type="submit" name="send_message" value="Send">
</form>
</body>
</html>
And the second part of the screencast that explains the same contact form stuff but in video (again!) It shows how to add input items and the send button. Do I have a chance in Hollywood? 🙂
If you don’t really feel like doing anything from scratch or just on a tight deadline, you can also download a ready-made file at this link html-php-contact-form
In the next part of the tutorial, we’ll learn how to create a PHP file to process the submitted data from the contact form and send this to your email.
