Ready to use contact form [Just Copy and Paste]

Hello Guys! How are you? Today we’ll learn how to create a contact form (Contact us page) by using HTML, CSS, and PHP. You just copy and paste it to your static website, only changes you have to make are e-mail and website name.

What is contact form?

Contact forms are the best way to built the trust among your users.

Additional Reads:

<div class="container">
  <form action="action_page.php">

    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">

  </form>
</div>

This form is completely customizable!
JavaScript validates required fields; plus there is a verification on the server-side.
The captcha image protects the form against SPAM.
Captcha image can be reloaded.
There are many styles of Captcha image available.

How to use free BasicCaptcha code

1. Copy and paste the code below into your webpage.

2. Change the email address [email protected] to your own email address.

3. Change the return address http://www.YourWebsiteAddress.com/ThankYouPage.html to your website address.

4. You can also change the email subject – Contact Us Captcha Form.

Warning: BasicCaptcha image has a link pointing to our site and promoting us; you must not remove the link, otherwise your site will be automatically banned in few days without warning. Do not add nofollow attribute!
If you don’t like having a link then consider using our ProCaptcha form instead – click here.

<h2>Contact Us</h2>
<form action="https://www.SnapHost.com/captcha/send.aspx" id="ContactUsCaptchaWebForm" method="post" onsubmit="return ValidateForm(this);" target="_top">
<input name="skip_WhereToSend" type="hidden" value="[email protected]" />
<input name="skip_SnapHostID" type="hidden" value="3EAULPPS87PK" />
<input name="skip_WhereToReturn" type="hidden" value="http://www.YourWebsiteAddress.com/ThankYouPage.htm" />
<input name="skip_Subject" type="hidden" value="Contact Us Form" />
<input name="skip_ShowUsersIp" type="hidden" value="1" />
<input name="skip_SendCopyToUser" type="hidden" value="1" />
<script type="text/javascript">
function ValidateForm(frm) {
if (frm.Name.value == "") {alert('Name is required.');frm.Name.focus();return false;}
if (frm.FromEmailAddress.value == "") {alert('Email address is required.');frm.FromEmailAddress.focus();return false;}
if (frm.FromEmailAddress.value.indexOf("@") < 1 || frm.FromEmailAddress.value.indexOf(".") < 1) {alert('Please enter a valid email address.');frm.FromEmailAddress.focus();return false;}
if (frm.Comments.value == "") {alert('Please enter comments or questions.');frm.Comments.focus();return false;}
if (frm.skip_CaptchaCode.value == "") {alert('Enter web form code.');frm.skip_CaptchaCode.focus();return false;}
return true; }
function ReloadCaptchaImage(captchaImageId) {
var obj = document.getElementById(captchaImageId);
var src = '' + obj.src;
obj.src = '';
var date = new Date();
var pos = src.indexOf('&rad=');
if (pos >= 0) { src = src.substr(0, pos); }
obj.src = src + '&rad=' + date.getTime();
return false; }
</script>
<table border="0" cellpadding="5" cellspacing="0" width="600">
<tr>
<td><b>Name*:</b></td>
<td><input name="Name" type="text" maxlength="60" style="width:350px;" /></td>
</tr><tr>
<td><b>Phone number:</b></td>
<td><input name="PhoneNumber" type="text" maxlength="43" style="width:350px;" /></td>
</tr><tr>
<td><b>Email address*:</b></td>
<td><input name="FromEmailAddress" type="text" maxlength="60" style="width:350px;" /></td>
</tr><tr>
<td><b>Comments and questions*:</b></td>
<td><textarea name="Comments" rows="7" cols="40" style="width:350px;"></textarea></td>
</tr><tr>
<td colspan="2" align="center"> <br />
<table border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="2" style="padding-bottom:18px;">
<!-- Please check our ProCaptcha service which is ad-free:
https://www.SnapHost.com/captcha/ProCaptchaOverview.aspx -->
<a href="http://www.snaphost.com/captcha/CaptchaCode.aspx" alt="free html forms" title="free html forms">
free html forms</a></td></tr>
<tr valign="top"><td> <i>Enter web form code*:</i>
<input name="skip_CaptchaCode" type="text" style="width:80px;" maxlength="6" />
</td><td>
<a href="https://www.snaphost.com/captcha/ReadyForms/ContactUsForm.aspx"><img id="CaptchaImage" alt="Contact Us form" title="HTML code for Contact Us form"
style="margin-left:20px;"
src="https://www.SnapHost.com/captcha/CaptchaImage.aspx?id=3EAULPPS87PK&ImgType=2" /></a><br />
<a href="#" onclick="return ReloadCaptchaImage('CaptchaImage');"><span style="font-size:12px;">reload image</span></a> </td></tr>
</table> <br />
* - required fields. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<input name="skip_Submit" type="submit" value="Submit" />
</td></tr>
</table><br />
</form>

<?php
if ($_SERVER['REQUEST_METHOD'] === "POST") {
	if (empty($_POST['email'])) {
		$emailError = 'Email is empty';
	} else {
		$email = $_POST['email'];

		// validating the email
		if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
			$emailError = 'Invalid email';
		}
	}
	if (empty($_POST['message'])) {
		$messageError = 'Message is empty';
	} else {
		$message = $_POST['message'];
	}
	if (empty($emailError) && empty($messageError)) {
		$date = date('j, F Y h:i A');

		$emailBody = "
			<html>
			<head>
				<title>$email is contacting you</title>
			</head>
			<body style=\"background-color:#fafafa;\">
				<div style=\"padding:20px;\">
					Date: <span style=\"color:#888\">$date</span>
					<br>
					Email: <span style=\"color:#888\">$email</span>
					<br>
					Message: <div style=\"color:#888\">$message</div>
				</div>
			</body>
			</html>
		";

		$headers = 	'From: Contact Form <[email protected]>' . "\r\n" .
    				"Reply-To: $email" . "\r\n" .
    				"MIME-Version: 1.0\r\n" . 
					"Content-Type: text/html; charset=iso-8859-1\r\n";

		$to = '[email protected]';
		$subject = 'Contacting you';

		if (mail($to, $subject, $emailBody, $headers)) {
			$sent = true;	
		}
	}
}
?>
<html>
<head>
	<title>Leelawati Enquiry Form</title>
	<style type="text/css">
		
		body {
			background-color:#fafafa;
		}
		form {
			width:50%;
			margin:auto;
		}
		.input-wrap {
			padding:20px 0;
		}
		.label {
			display:block;
			margin-bottom:2px;
		}
		input, textarea {
			border:1px solid #eee;
			padding:6px;
			border-radius:3px;
			width:100%;
		}
		textarea {
			height:200px;
			resize:none;
		}
		.submit-button {
			padding:10px;
		}
	</style>

</head>
<body>

<form method="POST" action=""> 
	<div class="input-wrap">
		<span class="label">Email:</span>
		<input type="text" name="email">
	</div>
	
	<div class="input-wrap">
		<span class="label">Message:</span>
		<textarea name="message"></textarea>
	</div>

	<div class="input-wrap">
		<input type="submit" name="submit" value="Submit" class="submit-button">
	</div>
</form>

<?php if (isset($emailError) || isset($messageError)) : ?> 
	<div id="error-message">
		<?php 
			echo isset($emailError) ? $emailError . '<br>' : ''; 
			echo isset($messageError) ? $messageError . '<br>' : ''; 
		?>
	</div>
<?php endif; ?>


<?php if (isset($sent) && $sent === true) : ?> 
	<div id="done-message">
		Your data was succesfully submitted
	</div>
<?php endif; ?>

</body>
</html>