In this blog we’re going to know how to create send mail form using PHP
Here is the complete source code in PHP to make send mail form
index.php
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<title>Send Email</title>
<meta name="description" content="Email/Contact Form">
<meta name="author" content="Clio Tsun">
<!-- WEB FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- SCRIPT::to reset inputs when the page reload -->
<script type="text/javascript" language="javascript">
<!-- //
function ClearForm(){
document.emailform.reset();
}
// -->
</script>
</head>
<body id="subPAGE" class="yellowBG" onload="ClearForm()">
<!-- (((((( HEADER )))))) -->
<header class="subpageTITLE">
<h1 class="_small ccDarkBlue">Contact</h1>
<h1 class="_large ccDarkBlue">Shawn</h1>
</header>
<!-- (((((( CONTENTs )))))) -->
<main id="contactFORM">
<!-- (((((( EMAIL FORM )))))) -->
<form id="emailform" name="emailform" class="h6 ccDarkBlue" method="post" action="email.php" onload="reset();">
<!-- radio buttons for personal titles -->
<label>Personal Title (optional)</label><br>
<!-- choice of gender: MS. -->
<p class="radioBTN">
<input id="Ms" type="radio" name="gender" value="Ms. ">
<label for="Ms">Ms.</label>
</p>
<!-- choice of gender: MR. -->
<p class="radioBTN">
<input id="Mr" type="radio" name="gender" value="Mr. ">
<label for="Mr">Mr.</label>
</p>
<!-- choice of gender: NO MATTER -->
<p class="radioBTN">
<input id="noMatter" type="radio" name="gender" value="" checked>
<label for="noMatter">No Matter</label>
</p>
<br><br>
<!-- client's first & last name -->
<label for="fname">First Name<sup>∗</sup></label><br>
<input id="fname" class="p ccDarkBlue" type="text" name="fname" maxlength="20"
pattern="[A-Za-z]{2,20}"
title="At least 2 Letters and limit to 20. Not accept any special character, space, and number."
placeholder="your first name" required autofocus>
<br><br>
<label for="lname">Last Name<sup>∗</sup></label><br>
<input id="lname" class="p ccDarkBlue" type="text" name="lname" maxlength="20"
pattern="[A-Za-z]{2,20}"
title="At least 2 Letters and limit to 20. Not accept any special character, space, and number."
placeholder="your last name" required>
<br><br>
<!-- sender email address -->
<label for="sender_email">Email<sup>∗</sup></label><br>
<input id="sender_email" class="p ccDarkBlue" type="email" name="sender_email" maxlength="100"
pattern="[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+"
title="Need to fill a valid email address format"
placeholder="email@example.com" required>
<br><br>
<!-- email subject list -->
<label for="subject">Subject<sup>∗</sup></label><br>
<input id="subject" class="p ccDarkBlue" type="text" name="subject" maxlength="100"
placeholder="what's your message about?" required>
<br><br>
<!-- message text field-->
<label for="message">Message<sup>∗</sup> (limit to 1000 character)</label><br>
<textarea id="message" class="p ccDarkBlue" type="text" name="message" maxlength="1000"
placeholder="tell me what you need to say..." required></textarea>
<br><br>
<h6 class="ccDarkBlue"><sup>∗</sup> Input requires to Proceed</h6>
<br><br>
<!-- submit button -->
<input class="p button" type="submit" name="sendMail" value="SEND">
<!-- reset form button -->
<input class="p button" type="reset" value="RESET">
</form>
</main>
</body>
</html>
email.php
<?php
//proceed if the "SEND" button is clicked
if( isset($_POST["sendMail"]) ) {
//validate sender email field is filled or not
if($_POST["sender_email"] && $_POST["sender_email"] !=''){
//validate the email address has correct structure
if( filter_var($_POST["sender_email"], FILTER_VALIDATE_EMAIL) ){
//send the email
$to = "email@example.com";
$gender = $_POST["gender"];
$firstName = $_POST["fname"];
$lastName = $_POST["lname"];
$senderEmail = $_POST["sender_email"];
$subject = $_POST["subject"];
$message = $_POST["message"];
$body = "";
$body .= "SENDER-NAME: ".$gender.$firstName." ".$lastName."\r\n";
$body .= "SENDER-EMAIL: ".$senderEmail. "\r\n";
$body .= "MESSAGE: ".$message. "\r\n";
$succeedMail = mail($to, $subject, $body);
}
}
}
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<title>Message Receipt</title>
<meta name="description" content="Email/Contact Form">
<meta name="author" content="Clio Tsun">
<!-- WEB FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="subPAGE" class="yellowBG">
<!-- (((((( HEADER )))))) -->
<header class="subpageTITLE">
<h1 class="_small ccDarkBlue">Result</h1>
</header>
<!-- (((((( CONTENTs )))))) -->
<main id="MEMO">
<!-- message shows ONLY when the email has successfully sent -->
<?php if( isset($succeedMail) && $succeedMail): ?>
<div id="trueMEMO" name="trueMEMO">
<h6 class="ccDarkBlue" style="line-height: 1.8;">
<?php echo $_POST["gender"], $_POST["fname"], " ", $_POST["lname"], ", " ?>
your message is successfully sent.<br>
Here're the information of your message:
</h6>
<br>
<article class="ccDarkBlue" style="text-align: left;"><br>
<h6>Your Email:</h6>
<p><?php echo $_POST["sender_email"] ?></p><br>
<h6>Subject:</h6>
<p><?php echo $_POST["subject"] ?></p><br>
<h6>Message:</h6>
<p><?php echo $_POST["message"] ?></p><br>
</article>
</div>
<br><br>
<!-- message shows ONLY when the email has failed to send -->
<?php else: ?>
<div id="falseMEMO" name"falseMEMO">
<h6 class="ccRed" style="line-height: 1.8;">No SMTP Server Setup!<br>Message delivery failed.</h6>
</div>
<br><br>
<!-- BUTTON::direct to contact page -->
<button class="p button" onclick="location.href='index.php';">BACK</button>
<?php endif; ?>
</main>
<!-- (((((( FOOTER::COPYRIGHT & SOCIAL MEDIA LINKS )))))) -->
<footer class="foot">
<p class="ccRed">Ⓒ <span>2021</span> created by Clio Tsun<br>All Right Resrved<br><br></p>
<section class="socialLINK">
<!-- Button::Open my Twitter -->
<button onclick="window.open('https://twitter.com/ClioTsun?ref_src=twsrc%5Etfw');">
<svg class="svgICON" height="34px" width="34px" x="0" y="0" viewBox="0 0 34 34">
<circle class="" fill-opacity="0" cx="17" cy="17" r="17"/>
<path class="ccRed" d="M17,2C8.7,2,2,8.7,2,17s6.7,15,15,15s15-6.7,15-15S25.3,2,17,2z M25.3,13.9v0.3c0.3,5.9-3.1,10.7-10.1,11.1c-3.4,0.2-5.8-0.6-6.8-1.4c-0.1-0.1,0-0.2,0.1-0.2c2.6-0.1,4-0.8,5.1-1.6c-2.1,0-3.5-0.6-4.2-2.6c0-0.1,0-0.1,0.1-0.1c0.9,0.6,1.8,0.4,3.2,0.4c-1.5-0.4-3.4-1.9-3.9-3.9c0-0.1,0-0.1,0.1-0.1c0.7,0.6,1.5,0.7,2.5,0.7c-1.5-1.1-2.9-3.1-1.6-5.5c2.1,2.2,4,3.2,7.8,3.9v-0.5c0-2.2,1.7-4,3.8-4c0.8,0,2.1,0.7,2.5,0.9c0.1,0.1,0.2,0.1,0.3,0c0.7-0.2,1.5-0.6,2.4-0.9c0,0,0.1,0,0.1,0c-0.3,0.8-0.8,1.5-1.6,2.2c0,0,0,0.1,0,0.1l1.9-0.7c0,0,0.1,0,0.1,0.1C26.7,12.8,26.2,13.6,25.3,13.9z"/>
</svg>
</button>
<!-- Button::Open my LinkIn -->
<button onclick="window.open('https://www.linkedin.com/in/cliotsun');">
<svg class="svgICON" height="34px" width="34px" x="0" y="0" viewBox="0 0 34 34">
<circle class="" fill-opacity="0" cx="17" cy="17" r="17"/>
<path class="ccRed" d="M17,2C8.7,2,2,8.7,2,17c0,8.3,6.7,15,15,15c8.3,0,15-6.7,15-15C32,8.7,25.3,2,17,2z M12.9,24.5H9.6V13.8h3.3V24.5z M11.3,12.4c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2C13.2,11.5,12.3,12.4,11.3,12.4z M25.3,24.5H22v-5.6c0-1.5-0.6-2.4-1.8-2.4c-1.3,0-2,0.9-2,2.4v5.6h-3.2V13.8h3.2v1.4c0,0,1-1.8,3.2-1.8s3.9,1.4,3.9,4.2L25.3,24.5z"/>
</svg>
</button>
</section>
</footer>
</body>
</html>
style.css
@charset "UTF-8";
/* ----- (((((( GET START BASIC )))))) ----- */
* {
margin: 0;
padding: 0;
}
html, body {box-sizing: border-box;}
body {line-height: 1.6;}
body:root {font-size: 16px;}
img {pointer-events: none !important;} /* NO-Reaction of Any Mouse Event */
svg {display: block;}
/* -------------------------------- */
/* common background */
.yellowBG {
background-image: url("images/svgTRI_dkbS.svg");
background-repeat: no-repeat;
background-position: left bottom;
background-origin: border-box;
background-color: #fee59a;
}
/* -------------------------------- */
/* color scheme */
.ccDarkBlue {color: #33444d; fill: #33444d;} /* rgba(51,68,77,1) */
.ccRed {color: #ff6666; fill: #ff6666;} /* rgba(255,102,102,1) */
.ccYellow {color: #fee59a; fill: #fee59a;} /* rgba(254,229,154,1) */
.ccIvory {color: #fbf4e4; fill: #fbf4e4;} /* rgba(251,244,228,1) */
.ccAqua {color: #93D2CF; fill: #93D2CF;} /* rgba(147,209,207,1) */
/* -------------------------------- */
/* common fonts */
h1, .h1 {
font-family: 'Josefin Sans', sans-serif;
font-weight: 700;
font-size: 1rem;
}
h6, .h6,
a,
ol, ul {
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-size: 1.2rem;
letter-spacing: 0.06rem;
}
p, .p,
li {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
font-size: 1.1rem;
letter-spacing: 0.03rem;
}
/* -------------------------------- */
/* common <a> */
a,
a:hover,
a:active,
a:visited {
text-decoration: none;
background-color: transparent;
border: none;
border-radius: 10px;
cursor: pointer;
}
/* -------------------------------- */
/* common <button> */
button {
background-color: transparent;
border: none;
}
.button {
cursor: pointer;
width: 200px;
height: 50px;
padding: 1rem 0;
margin: 10px;
text-align: center;
line-height: 1;
font-weight: 400;
letter-spacing: 0.03rem;
font-size: 1rem;
color: #fbf4e4;
border: 3px solid #33444d;
border-radius: 2rem;
background-color: #ff6666;
}
.button:hover {
font-weight: 700;
letter-spacing: 0.1rem;
text-decoration: underline;
}
/* -------------------------------- */
/* common list-items */
ol,
ul {
text-align: left;
list-style-position: outside;
padding: 0 2rem;
}
ol {list-style-type: decimal;}
ul {list-style-type: inherit;}
li {
margin-left: 1.5rem;
padding-left: 0.05rem;
line-height: 1.8;
}
/* -------------------------------- */
/* "focus" steup */
a:focus,
button:focus {
outline: 3px solid #ff6666;
outline-offset: -3px;
}
.socialLINK button:focus {outline-offset: 3px;}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
outline: 3px solid #33444d;
outline-offset: -3px;
}
.thumb:focus,
.button:focus {
outline: 4px solid #ff6666;
outline-offset: 2px;
}
/* -------------------------------------------------- */
/* ----- (((((( MOBILE :: screen < 768px )))))) ----- */
/* -------------------------------------------------- */
/* ---- common <footer> ---- */
#homePAGE .foot,
.foot {
text-align: center;
padding: 250px 0 130px 0;
}
.foot p,
.foot span {
font-weight: 300;
font-size: 0.8rem;
}
/* social media LINK-ICONs @ <footer> */
.svgICON {
height: 40px;
width: 40px;
}
.socialLINK button {margin-left: 20px;}
.socialLINK button:first-child {margin-left: 0;}
/* ================================ */
/* ----------- subPAGEs ----------- */
/* ================================ */
/* common "header" setup */
.subpageTITLE {
padding-top: 100px;
text-align: center;
line-height: 1;
}
.subpageTITLE ._small {
font-size: 11vw;
}
.subpageTITLE ._large {
font-size: 22vw;
letter-spacing: 0.1rem;
}
/* common "content" setup */
._note {
border-top: 2px solid #33444d;
border-bottom: 2px solid #33444d;
text-align: left;
padding: 0.6rem 0.9rem;
font-weight: 400;
}
._paddedCenter {
padding: 0 3vw;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
/* --------------------------------- */
/* -- subPAGE::EMAIL/CONTACT FORM -- */
/* --------------------------------- */
#contactHEAD,
#contactFORM,
#trueMEMO,
#falseMEMO {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
#contactHEAD {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#contactFORM {padding: 30px 5vw;}
#contactHEAD h1{padding: 20px 0 0 0;}
/* form content */
#emailform {padding: 0 2vw;}
label {line-height: 2;}
/* superscripted asterisk for required input */
sup {color: #ff6666;}
/* text fields */
input[type=text]:-webkit-autofill,
input[type=email]:-webkit-autofill {
-webkit-box-shadow: 0 0 0 2rem #fbf4e4 inset;
box-shadow: 0 0 0 2rem #fbf4e4 inset;
}
input[type=text],
input[type=email],
textarea {
width: 90%;
max-width: 90%;
padding: 1rem 1rem 0.6rem 1rem;
background-color: #fbf4e4;
border: none;
}
input[type=text],
input[type=email] {
height: 1rem;
line-height: 1;
overflow: hidden;
}
textarea {
min-width: 200px;
min-height: 300px;
line-height: 1.8;
overflow-y: auto;
}
input[type=text]:invalid,
input[type=email]:invalid,
textarea:invalid {
outline: 3px solid #ff6666;
outline-offset: -3px;
}
/* radio buttons */
.radioBTN {display: inline-block;}
/* hide the default radio buttons */
input[type=radio]:checked,
input[type=radio]:not(:checked) {
visibility: hidden;
}
/* radio buttons <label> setup */
input[type=radio]:checked + label,
input[type=radio]:not(:checked) + label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 1.8rem;
padding-right: 1rem;
line-height: 1;
}
/* mouse over radio buttons */
input[type=radio]:checked:hover + label:before,
input[type=radio]:not(:checked):hover + label:before {
-webkit-box-sizing: border-box;
-mz-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid #33444d;
}
/* customize radio buttons before checking */
input[type=radio]:checked + label:before,
input[type=radio]:not(:checked) + label:before {
content: '';
position: absolute;
top: 0;
left: 0;
margin-top: -0.43rem;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background: #fbf4e4;
}
/* customize radio buttons after checking */
input[type=radio]:checked + label:after,
input[type=radio]:not(:checked) + label:after {
content: '';
width: 0.8rem;
height: 0.8rem;
background: #33444d; /* selected dot color */
position: absolute;
top: 0;
left: 0.43rem;
border-radius: 100%;
/* animation for changes */
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
/* show selected dot with enlarging animation */
/* nothing when not checked */
input[type=radio]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
/* display color and enlarging when checked */
input[type=radio]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
/* inside "email.php" content */
/* display message style after email is sent */
#MEMO {
padding-top: 200px;
text-align: center;
height: 100vh;
}
#trueMEMO,
#falseMEMO {padding: 0 2vw;}
#trueMEMO article {
background-color: #fbf4e4;
border: none;
border-radius: 5px;
margin: 0.5rem;
padding: 0.5rem 1rem;
}
/* -------------------------------------------- */
/* ----- (((((( LANDSCAPE < 768px )))))) ----- */
/* -------------------------------------------- */
@media only screen and (orientation:landscape) {
/* subPAGE */
.subpageTITLE ._small {font-size: 3rem;}
.subpageTITLE ._large {font-size: 6rem;}
}
/* ---------------------------------------------------- */
/* ----- (((((( TABLET :: screen => 768px )))))) ----- */
/* ---------------------------------------------------- */
@media only screen and (min-width: 768px) {
/* COMMON STYLE */
.yellowBG {background-image: url("images/svgTRI_dkbL.svg");}
/* subPAGE */
.subpageTITLE ._small {font-size: 4rem;}
.subpageTITLE ._large {font-size: 8rem;}
/* FOOTER */
.foot {
text-align: right;
padding: 200px 100px 130px 0;
}
/* subPAGE::EMAIL/CONTACT FORM */
#contactHEAD {flex-direction: row;}
#contactHEAD h1 {padding: 0 0 0 20px;}
}
/* ------------------------------------------------------ */
/* ----- (((((( DESKTOP :: screen => 1024px )))))) ----- */
/* ------------------------------------------------------ */
@media only screen and (min-width: 1024px) {
header,
main,
footer {
max-width: 1500px;
margin-left: auto;
margin-right: auto;
}
}