PHP send mail form

by

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 &#40;optional&#41;</label><br>
			<!-- choice of gender: MS. -->
			<p class="radioBTN">
				<input id="Ms" type="radio" name="gender" value="Ms.&nbsp;">
				<label for="Ms">Ms.</label>
			</p>
			<!-- choice of gender: MR. -->
			<p class="radioBTN">
				<input id="Mr" type="radio" name="gender" value="Mr.&nbsp;">
				<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>&lowast;</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>&lowast;</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>&lowast;</sup></label><br>
			<input id="sender_email" class="p ccDarkBlue" type="email" name="sender_email" maxlength="100"
				   pattern="[a-zA-Z0-9.!#$%&amp;’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+"
				   title="Need to fill a valid email address format"
				   placeholder="[email protected]" required>
			<br><br>
			<!-- email subject list -->
			<label for="subject">Subject<sup>&lowast;</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>&lowast;</sup> &#40;limit to 1000 character&#41;</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>&lowast;</sup>&nbsp;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>

Table of Contents

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 protected]";
			
			$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">&#9400; <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;
	}

}

Leave a Comment

© Codingtube ~ 2024
Privacy