{"id":247,"date":"2019-05-08T20:29:21","date_gmt":"2019-05-08T20:29:21","guid":{"rendered":"https:\/\/avantutor.com\/blog\/?p=247"},"modified":"2019-05-08T20:33:14","modified_gmt":"2019-05-08T20:33:14","slug":"contact-us-form-html-template-to-work","status":"publish","type":"post","link":"https:\/\/avantutor.com\/blog\/contact-us-form-html-template-to-work\/","title":{"rendered":"How I Got a Contact Us Form Inside a HTML Template to Work"},"content":{"rendered":"\n

So you downloaded an amazing website template<\/strong> that you just can’t wait to work with. You were able to customize<\/strong> the whole template except for the contact form <\/strong>part. You realize that it takes some backend work<\/strong> in order for it to function. The problem is you are not a backend person. You just need some clear instructions on how to get the contact form data to be emailed to yourself. Well, here it is – assuming you have hosting with cPanel<\/strong> and an email associated with your domain through your host provider. <\/p>\n\n\n\n

The HTML Form<\/h2>\n\n\n\n
<form method=\"post\" action=\"php\/contact_us_action.php\">\n              <div class=\"form-group row\">\n                <div class=\"col-md-6 mb-4\">\n                  <input type=\"text\" class=\"form-control\" placeholder=\"First name\" name=\"first_name\">\n                <\/div>\n                <div class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" placeholder=\"Last name\" name=\"last_name\">\n                <\/div>\n              <\/div>\n\n              <div class=\"form-group row\">\n                <div class=\"col-md-12\">\n                  <input type=\"text\" class=\"form-control\" placeholder=\"Subject\" name=\"subject\">\n                <\/div>\n              <\/div>\n\n              <div class=\"form-group row\">\n                <div class=\"col-md-12\">\n                  <input type=\"email\" class=\"form-control\" placeholder=\"Email\" name=\"email\">\n                <\/div>\n              <\/div>\n              <div class=\"form-group row\">\n                <div class=\"col-md-12\">\n                  <textarea class=\"form-control\" id=\"\" cols=\"30\" rows=\"10\" placeholder=\"Write your message here.\" name=\"message\"><\/textarea>\n                <\/div>\n              <\/div>\n\n              <div class=\"form-group row\">\n                <div class=\"col-md-6\">\n\n                  <input type=\"submit\" class=\"btn btn-primary py-3 px-5 btn-block\" value=\"Send Message\">\n                <\/div>\n              <\/div>\n\n            <\/form><\/code><\/pre>\n\n\n\n
What is important here is the name attribute<\/strong> for each form element.  Your form will probably look different and have different fields but you definitely need to add a name attribute to each form element.  Additionally, pay special attention to the following line: <\/p>\n\n\n\n
<form method=\"post\" action=\"php\/contact_us_action.php\"><\/code><\/pre>\n\n\n\n
action attribute<\/strong> specifies where to handle the email submission logic.  In this case I created a ‘php’ folder<\/strong> and then created a contact_us_action.php<\/strong> file.  This is where the main form submission takes place. <\/p>\n\n\n\n
The contact_us_action.php File<\/h2>\n\n\n\n
Once the user submits the form we go to contact_us_action.php.<\/strong>  Please create this file (inside the newly created php folder) and add the following code to it.<\/p>\n\n\n\n
<?php\n\/\/ [ATTENTION] Change this if you want to check for a different field \n\/\/ Program doesn't continue if email field is missing\nif(isset($_POST['email'])) {\n    \/\/ EDIT THE 2 LINES BELOW AS REQUIRED\n    $email_to = \"CHANGE_TO_YOUR_PERSONAL_EMAIL_ADDRESS;\n\n    function died($error) {\n        \/\/ your error code can go here\n        echo \"We are very sorry, but there were error(s) found with the form you submitted. \";\n        echo \"These errors appear below.<br \/><br \/>\";\n        echo $error.\"<br \/><br \/>\";\n        echo \"Please go back and fix these errors.<br \/><br \/>\";\n        die();\n    }\n    \/\/ validation expected data exists\n    \/\/ [ATTENTION] This part makes sure that 'first_name', 'message' and \n    \/\/ 'email' fields were submitted. Add more or remove some.  \n    if(!isset($_POST['first_name']) ||\n        !isset($_POST['message']) ||\n        !isset($_POST['email'])) {\n        died('We are sorry, but there appears to be a problem with the form you submitted.');\n    }\n\n    \/\/ [ATTENTION] Change these fields accordingly. \n    \/\/ Change the value for $email_from_default\n    $first_name = $_POST['first_name'];\n    $last_name = $_POST['last_name'];\n    $subject = $_POST['subject'];\n    $message = $_POST['message'];\n    $email_from = $_POST['email'];\n    $email_subject = \"CHANGE_TO_YOUR_SUBJECT\";\n    $email_from_default = \"CHANGE_TO_YOUR_HOST_DOMAIN_EMAIL\";\n\n    $error_message = \"\";\n    $email_exp = '\/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,4}$\/';\n\n  if(!preg_match($email_exp,$email_from)) {\n    $error_message .= 'The Email Address you entered does not appear to be valid.<br \/>';\n  }\n\n    $string_exp = \"\/^[A-Za-z .'-]+$\/\";\n\n  if(!preg_match($string_exp,$first_name)) {\n    $error_message .= 'The First Name you entered does not appear to be valid.<br \/>';\n  }\n\n  if(!preg_match($string_exp,$last_name)) {\n    $error_message .= 'The Last Name you entered does not appear to be valid.<br \/>';\n  }\n\n  if(strlen($error_message) > 0) {\n    died($error_message);\n  }\n    $email_message = \"Form details below.\\n\\n\";\n\n    function clean_string($string) {\n      $bad = array(\"content-type\",\"bcc:\",\"to:\",\"cc:\",\"href\");\n      return str_replace($bad,\"\",$string);\n    }\n\n    $email_message .= \"First Name: \".clean_string($first_name).\"\\n\";\n    $email_message .= \"Last Name: \".clean_string($last_name).\"\\n\";\n    $email_message .= \"message: \".clean_string($message).\"\\n\";\n    $email_message .= \"Email: \".clean_string($email_from).\"\\n\";\n\n    \/\/ create email headers\n    $headers = 'From: '.$email_from_default.\"\\r\\n\".\n    'Reply-To: '.$email_from_default.\"\\r\\n\" .\n    'X-Mailer: PHP\/' . phpversion();\n    @mail($email_to, $email_subject, $email_message, $headers);\n?>\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <link rel=\"shortcut icon\" href=\"images\/icon.ico\">\n  <title>CHANGE_TO_YOUR_TITLE<\/title>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n  <meta name=\"description\" content=\"Thank you for contacting us\" \/>\n<\/head>\n<body>\n  <h1>Thank You!<\/h1>\n<\/body>\n<\/html>\n\n<?php\n}\n?>\n<\/code><\/pre>\n\n\n\n
In the example above the form has a first_name, last_name, subject, email and a message field. Change it to whatever fields you have. I have added [ATTENTION]<\/strong> comment to all the places where you have to pay special attention to and might have to do an edit.  Also pay attention to all CHANGE_… <\/strong> text.  Feel free to modify the HTML section<\/strong> at the end.  <\/p>\n\n\n\n
PHP mail Function and Your Host<\/h2>\n\n\n\n
I am using the PHP mail function<\/strong> to achieve my goal.  There are other ways!<\/strong>  I believe they require more work but none the less there are other ways.  In order for the mail function to work out of the box I needed to make sure I had an email account<\/strong> that was created in the Namecheap cPanel <\/strong>and that was hosted<\/strong> on their servers<\/strong>.  <\/p>\n\n\n\n
Here is how determined what my default email address with my host was. Login into your cPanel then click on Email Accounts<\/strong><\/p>\n\n\n\n
\"cPanel
Step 1) cPanel Email Accounts<\/figcaption><\/figure>\n\n\n\n
I had an email account already listed. If you don’t have one just click on create otherwise click on CHECK EMAIL<\/strong><\/p>\n\n\n\n
\"cPanel
Step 2) cPanel Email Accounts CHECK EMAIL<\/figcaption><\/figure>\n\n\n\n
Click on horde<\/strong><\/p>\n\n\n\n
\"cPanel
Step 3) cPanel Check Email horde<\/figcaption><\/figure>\n\n\n\n
 Send an email to personal email address here<\/p>\n\n\n\n
\"cPanel
Step 4) Compose Email <\/figcaption><\/figure>\n\n\n\n
Check your personal email inbox<\/strong> and copy the from email address<\/strong>.   That is one way to obtain what the full email address associated with your host is.  I am sure there is an easier way but this is how I did it.  In my case it wasn’t as simple as username@mydomain.com. <\/p>\n\n\n\n
My host Namecheap also suggested I have Local Mail Exchanger<\/strong> (whatever that is).  Here is how I made sure I do! Click on Email Routing<\/strong> in cPanel.<\/p>\n\n\n\n
\"cPanel
Step 1) cPanel Email Routing<\/figcaption><\/figure>\n\n\n\n
Bamn, that it is.  It was already selected for me. <\/p>\n\n\n\n
\"cPanel
Step 2) cPanel Email Routing Local Mail Exchanger<\/figcaption><\/figure>\n\n\n\n
Upload to Host and Done<\/h2>\n\n\n\n
Once I had uploaded my modified files including the new contact_us_action.php file onto the server I was able to use the contact us form.  I didn’t have to install special PHP email libraries and mess with 3rd party email configurations which was awesome. <\/p>\n\n\n\n
If you are looking for more information I recommend checking out the following namecheap article: <\/p>\n\n\n\n
https:\/\/www.namecheap.com\/support\/knowledgebase\/article.aspx\/10038\/31\/how-to-configure-a-contact-form-with-us <\/a><\/p>\n\n\n\n
 Good Luck and Happy Coding! <\/p>\n","protected":false},"excerpt":{"rendered":"
So you downloaded an amazing website template that you just can’t wait to work with. You were able to customize the whole template except for the contact form part. You realize that it takes some backend work in order for… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[8,39],"tags":[50,46,48,47],"yoast_head":"\nHow I Got a Contact Us Form Inside a HTML Template to Work - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding<\/title>\n<meta name=\"description\" content=\"You got a fancy new HTML website template but the contact us form doesn't work :( Here is one of the fastest ways to get it to work using PHP.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/avantutor.com\/blog\/contact-us-form-html-template-to-work\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How I Got a Contact Us Form Inside a HTML Template to Work - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\" \/>\n<meta property=\"og:description\" content=\"You got a fancy new HTML website template but the contact us form doesn't work :( Here is one of the fastest ways to get it to work using PHP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/avantutor.com\/blog\/contact-us-form-html-template-to-work\/\" \/>\n<meta property=\"og:site_name\" content=\"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-08T20:29:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-05-08T20:33:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/05\/Email_Accounts.png\" \/>\n<meta name=\"author\" content=\"avansardar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"avansardar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/avantutor.com\/blog\/contact-us-form-html-template-to-work\/\",\"url\":\"https:\/\/avantutor.com\/blog\/contact-us-form-html-template-to-work\/\",\"name\":\"How I Got a Contact Us Form Inside a HTML Template to Work - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\",\"isPartOf\":{\"@id\":\"https:\/\/avantutor.com\/blog\/#website\"},\"datePublished\":\"2019-05-08T20:29:21+00:00\",\"dateModified\":\"2019-05-08T20:33:14+00:00\",\"author\":{\"@id\":\"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e\"},\"description\":\"You got a fancy new HTML website template but the contact us form doesn't work :( Here is one of the fastest ways to get it to work using PHP.\",\"breadcrumb\":{\"@id\":\"https:\/\/avantutor.com\/blog\/contact-us-form-html-template-to-work\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/avantutor.com\/blog\/contact-us-form-html-template-to-work\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/avantutor.com\/blog\/contact-us-form-html-template-to-work\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/avantutor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How I Got a Contact Us Form Inside a HTML Template to Work\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/avantutor.com\/blog\/#website\",\"url\":\"https:\/\/avantutor.com\/blog\/\",\"name\":\"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\",\"description\":\"Looking for expert advice on how to improve your coding skills? The AvanTutor blog provides a wealth of resources and insights to help you become a better programmer. Our experienced tutors share tips and tricks for mastering popular programming languages such as Java, and JavaScript, as well as insights into the latest trends in software development. With regular updates and engaging content, the AvanTutor blog is your go-to resource for all things coding.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/avantutor.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e\",\"name\":\"avansardar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/avantutor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g\",\"caption\":\"avansardar\"},\"url\":\"https:\/\/avantutor.com\/blog\/author\/avansardar\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How I Got a Contact Us Form Inside a HTML Template to Work - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","description":"You got a fancy new HTML website template but the contact us form doesn't work :( Here is one of the fastest ways to get it to work using PHP.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/avantutor.com\/blog\/contact-us-form-html-template-to-work\/","og_locale":"en_US","og_type":"article","og_title":"How I Got a Contact Us Form Inside a HTML Template to Work - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","og_description":"You got a fancy new HTML website template but the contact us form doesn't work :( Here is one of the fastest ways to get it to work using PHP.","og_url":"https:\/\/avantutor.com\/blog\/contact-us-form-html-template-to-work\/","og_site_name":"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","article_published_time":"2019-05-08T20:29:21+00:00","article_modified_time":"2019-05-08T20:33:14+00:00","og_image":[{"url":"https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/05\/Email_Accounts.png"}],"author":"avansardar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"avansardar","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/avantutor.com\/blog\/contact-us-form-html-template-to-work\/","url":"https:\/\/avantutor.com\/blog\/contact-us-form-html-template-to-work\/","name":"How I Got a Contact Us Form Inside a HTML Template to Work - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","isPartOf":{"@id":"https:\/\/avantutor.com\/blog\/#website"},"datePublished":"2019-05-08T20:29:21+00:00","dateModified":"2019-05-08T20:33:14+00:00","author":{"@id":"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e"},"description":"You got a fancy new HTML website template but the contact us form doesn't work :( Here is one of the fastest ways to get it to work using PHP.","breadcrumb":{"@id":"https:\/\/avantutor.com\/blog\/contact-us-form-html-template-to-work\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/avantutor.com\/blog\/contact-us-form-html-template-to-work\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/avantutor.com\/blog\/contact-us-form-html-template-to-work\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/avantutor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How I Got a Contact Us Form Inside a HTML Template to Work"}]},{"@type":"WebSite","@id":"https:\/\/avantutor.com\/blog\/#website","url":"https:\/\/avantutor.com\/blog\/","name":"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","description":"Looking for expert advice on how to improve your coding skills? The AvanTutor blog provides a wealth of resources and insights to help you become a better programmer. Our experienced tutors share tips and tricks for mastering popular programming languages such as Java, and JavaScript, as well as insights into the latest trends in software development. With regular updates and engaging content, the AvanTutor blog is your go-to resource for all things coding.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/avantutor.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e","name":"avansardar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avantutor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g","caption":"avansardar"},"url":"https:\/\/avantutor.com\/blog\/author\/avansardar\/"}]}},"_links":{"self":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts\/247"}],"collection":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/comments?post=247"}],"version-history":[{"count":3,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts\/247\/revisions"}],"predecessor-version":[{"id":257,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts\/247\/revisions\/257"}],"wp:attachment":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/media?parent=247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/categories?post=247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/tags?post=247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}