STEP 1) THE HTML FORM

  
    

      
CONTACT US

      Name
      Email
      Message
      
  

Yep – No surprises here, this is just a common Joe HTML form. A quick recap for those who might have forgotten the basics:

• Captain Obvious – A form is defined with the
  tag.
  • The action attribute specifies which script will handle the processing of this form.
  • The method attribute can either be post or get.
  • Difference between them is that get will show all the form data in the URL, for example, https://site.com/2-email.php?c-name=John+Doe&[email protected]… Not very pleasant, which is why we use post to silently submit the data instead.
• We sandwich and fields inside the
  tags, feel free to add more of your own as required.
  • The type attribute specifies what kind of field it is. A few of the common ones are – text, email, number, password, hidden, tel, button, submit.
  • The name attribute must be unique, and that is how we know which-is-which in PHP later.
  • Adding a required attribute will make sure that the user will enter something, or the form will not submit.
• Finally a submit button at the bottom of the form.

STEP 2) PHP MAILER

Believe it or not, that’s all to the PHP script… Guess it does not need much explanation here.

• We can get all the submitted form data in the $_POST global variable. Remember the name attributes that we defined in the HTML  fields earlier?
• Format the email message nicely, and just use the mail() function to send it out.
• Done.

STEP 1) THE HTML

  
    

      
CONTACT US

      Name
      Email
      Message
      
  

Fret not. This is essentially still the same HTML form as above, with only 2 improvements:

• Added some CSS styles, cosmetics to make the form look good. Feel free to change the styles to fit your own project theme.
• Added minlength and maxlength to the input fields to further restrict the user input.

STEP 2) PHP MAILER

'
  // IF YOU NEED TO ADD CC
  // 'Cc: [email protected]'
];
$headers = implode("\r\n", $headers);

// SEND
if (@mail($to, $subject, $message, $headers)) {
  // OK
  header("Location: 5-thank-you.html");
} else {
  // ERROR
  header("Location: 6-error.html");
}
?>

Minor additions to this script as well –

• Added email headers, where we can define the “email from”, and even add a “cc” field.
• A slightly better way to deal with the process, just-in-case the email send fails.

STEP 3) PROPER FEEDBACK

Well, there is not much to this third step, we just create nice looking HTML pages to show the user on the process results.

  
    
Thank You!
    

      We have received your contact query.
    
  

  
    
Error
    

      Error sending out email.
      Try again?
    
  

STEP 1) THE HTML

  
    

      
CONTACT US

      Name
      Email
      Message
      
  

Yes… Same old form again, but a few small changes to take note in this alternative:

• To make this HTML clean, the CSS and Javascript are moved to external files.
• The
  element no longer has method and action. 
• We use onsubmit to specify that a Javascript function will handle the processing instead.

STEP 2) THE CSS

#conform {
  padding: 20px;
  max-width: 320px;
  font-family: arial;
  background: #f2f2f2;
  border: 2px solid #ccc;
}
#conform h1 {
  margin: 0;
  padding: 0;
}
#conform label, #conform input, #conform textarea {
  box-sizing: border-box;
  width: 100%;
  display: block;
}
#conform label, #conform input[type=submit] {
  margin-top: 20px;
}
#conform label {
  color: #555;
}
#conform input[type=text], #conform input[type=email], #conform textarea {
  padding: 5px;
}
#conform input[type=submit] {
  padding: 10px;
  background: #486891;
  border: 0;
  color: #fff;
  font-size: 1em;
  cursor: pointer;
}

Same CSS as above… Except that we moved it into a separate file.

STEP 3) THE JAVASCRIPT

function conform() {
  // APPEND FORM DATA
  var data = new FormData();
  data.append('c-name', document.getElementsByName("c-name")[0].value);
  data.append('c-email', document.getElementsByName("c-email")[0].value);
  data.append('c-text', document.getElementsByName("c-text")[0].value);

  // INIT AJAX
  var xhr = new XMLHttpRequest();
  xhr.open('POST', "10-email.php", true);

  // WHEN THE PROCESS IS COMPLETE
  xhr.onload = function () {
    if (this.response=="OK") {
      // OK - Do something
      // Redirect user?
      // location.href = "5-thank-you.html";
      alert("OK");
    } else {
      // ERROR - Do something
      alert("ERROR");
    }
  };

  // SEND
  xhr.send(data);
  return false;
}

Confused? Well, if you look through the Javascript function, it really isn’t so bad:

• We start by getting the form data from the HTML input fields.
• Initiate AJAX, set to use the post method, and the target PHP script.
• Set what to do when the AJAX process is complete with xhr.onload.
• Finally, we just send the data out via AJAX. Take note – We need to return false to prevent the HTML form from submiting and reloading the page.

STEP 4) PHP MAILER

'
  // IF YOU NEED TO ADD CC
  // 'Cc: [email protected]'
];
$headers = implode("\r\n", $headers);

// SEND
if (@mail($to, $subject, $message, $headers)) {
  // OK
  echo "OK";
} else {
  // ERROR
  echo "ERROR";
}
?>

The same as above again, with the only exception that it will echo "OK" on success and echo "ERROR" on failure.

REFERENCES

• PHP Mail
• HTML Form

PROBLEM SENDING OUT EMAIL?

Is the email not sending out on your computer or server? Check this out:

3 Ways to Fix PHP Mail Not Working

SOURCE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
 

The post How to Create a Simple PHP Contact Form appeared first on Code Boxx.