{"id":1709,"date":"2011-11-15T10:24:58","date_gmt":"2011-11-15T15:24:58","guid":{"rendered":"http:\/\/mts-help.nick.php.dev\/after_sale_support\/working_with_html\/Advanced\/article14.html"},"modified":"2016-11-11T04:09:32","modified_gmt":"2016-11-11T09:09:32","slug":"how-create-contact-form-html","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/how-create-contact-form-html.html","title":{"rendered":"How to create a contact form in HTML"},"content":{"rendered":"

This tutorial will teach you how to create a very simple contact form for HTML based website template.<\/p>\r\n\r\n

First of all create 2 files: contact_form.html<\/strong> and contact.php<\/strong>. The first file will contain HTML code for the form and the second -will process the data from the form<\/p>\r\n\r\n

HTML<\/h3>\r\n\r\n

Below is the HTML code of the contact form<\/p>\r\n\r\n

\r\n<form action=\"contact.php\" method=\"post\">\r\n\tYour name
\r\n    <input type=\"text\" name=\"cf_name\">
\r\n\tYour e-mail
\r\n    <input type=\"text\" name=\"cf_email\">
\r\n\tMessage
\r\n    <textarea name=\"cf_message\"><\/textarea>
\r\n\t<input type=\"submit\" value=\"Send\">\r\n\t<input type=\"reset\" value=\"Clear\">\r\n<\/form>\r\n<\/pre>\r\n\r\n
And this is how it will look in the browser<\/p>\r\n\"HTML<\/a>\r\n\r\n
Let’s have a quick look at some main aspects of it. The <form> tag should have 2 additional attributes: <\/p>\r\n
action=”contact.php”<\/strong> – this attribute specifies where to send the data from the contact form fields, when it has been submitted<\/p>\r\nmethod=”post”<\/strong> – this attribute specifies how to send data from the form to the file specified in the action<\/strong> attribute<\/p>\r\n\r\nThe <input> and <textarea> tags should have an attribute “name” with a unique identifier. This attribute is used to identify form data after it has been submitted to the server\r\nAnd the 2 input elements that are used as Submit and Clear buttons, one should have type=”submit” assigned to it and the other type=”reset”<\/p>\r\n\r\n
That’s basically it. As easy as it looks<\/p>\r\n\r\n
PHP<\/h3>\r\n\r\n
Now for the contact.php file that will actually grab the data from the fields, compose into a message and send to your email. You can download contact.php<\/a> file from this link. Below is the code of the file with comments to its major sections.<\/p>\r\n\r\nAssigning the data sent from the contact form fields (cf_name, cf_email, cf_message) to php variables ($cf_message, $field_email, $field_message)\r\n
\r\n$field_name = $_POST['cf_name'];\r\n$field_email = $_POST['cf_email'];\r\n$field_message = $_POST['cf_message'];\r\n<\/pre>\r\n\r\n
$mail_to<\/strong> shall contain the site owner email, this is where the email is sent to. You can specify multiple emails by separating them with a comma (e.g. mail-one@template-help.com, mail-two@template-help.com)<\/p>\r\n
\r\n$mail_to = 'test@test-mail.com';\r\n<\/pre>\r\n\r\n
Subject of the email you receive from the contact form<\/p>\r\n
\r\n$subject = 'Message from a site visitor ' . $field_name;\r\n<\/pre>\r\n\r\n
Constructing the body of the message<\/p>\r\n
\r\n$body_message = 'From: '.$field_name.\"\\n\";\r\n$body_message .= 'E-mail: '.$field_email.\"\\n\";\r\n$body_message .= 'Message: '.$field_message;\r\n<\/pre>\r\n\r\n
Constructing the headers of the message<\/p>\r\n
\r\n$headers = \"From: $cf_email\\r\\n\";\r\n$headers .= \"Reply-To: $cf_email\\r\\n\";\r\n<\/pre>\r\n\r\n
Defining mail() <\/strong>function and assigning it to a variable $mail_status, which is used below to check whether the mail has been sent or not<\/p>\r\n
\r\n$mail_status = mail($mail_to, $subject, $body_message, $headers);\r\n<\/pre>\r\n\r\n
If the mail()<\/strong> function executed successfully then do the code below\r\n<\/p>\r\n
\r\nif ($mail_status) { ?>\r\n\t<script language=\"javascript\" type=\"text\/javascript\">\r\n\t\t\/\/ Print a message\r\n\t\talert('Thank you for the message. We will contact you shortly.');\r\n\t\t\/\/ Redirect to some page of the site. You can also specify full URL, e.g. http:\/\/template-help.com\r\n\t\twindow.location = 'contact_page.html';\r\n\t<\/script>\r\n<?php\r\n}\r\n<\/pre>\r\n\r\n
If the mail()<\/strong> function fails, then execute the following code<\/p>\r\n
\r\nelse { ?>\r\n\t<script language=\"javascript\" type=\"text\/javascript\">\r\n\t\t\/\/ Print a message\r\n\t\talert('Message failed. Please, send an email to gordon@template-help.com');\r\n\t\t\/\/ Redirect to some page of the site. You can also specify full URL, e.g. http:\/\/template-help.com\r\n\t\twindow.location = 'contact_page.html';\r\n\t<\/script>\r\n<?php\r\n}?>\r\n<\/pre>\r\n
\r\nYou can also download compiled contact_form.html and contact.php files in a single package<\/a><\/p>\r\n\r\n
 <\/p>\r\n
Proceed to the tutorial on how to add fields to the contact form<\/a><\/p>\r\n
If you want to pep up the design of your admin panel, review our Bootstrap Admin Themes<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"
This tutorial will teach you how to create a very simple contact form for HTML based website template.<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[253],"tags":[497,509,2411],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1709"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=1709"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1709\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}