Add a Responsive Email Contact Form to Coming Soon Page

Category:

In our previous tutorial, we described how to create a responsive coming soon page for your website. In this tutorial, we'll show you how to add a responsive contact form to your coming soon page.

You can use this form to collect email addresses from interested people. This will let you notify them when you officially launch your website.

To begin, here is a sample code:

<div id="contact_form">
    <form name="contact" id="ff" method="post" action="coming-soon-form.php">
        <input type="text" placeholder="Your Name" name="name" id="name" required />
        <input type="email" placeholder="Your Email" name="email" id="email" required />
        <input class="sendButton" type="submit" name="Submit" value="Contact Us" />
    </form>
</div>        

This form has two fields. Your Name and Your Email. To capture these values after any user submits the form, we'll need a PHP code saved in a separate file called coming-soon-form.php. We need to provide path to this file in the above code as shown above. Here is the corresponding PHP code:

<?php 
// Get values from the form
$name=$_POST['name'];
$email=$_POST['email'];

$to = "email@domain.com";
$subject = "Contact Form Submission (Coming Soon)";
$message = "Name: " . $name . "\r\n E-mail: " . $email;
 
$from = "email@domain.com";
$headers = "From:" . $from . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n";

$success = mail($to,$subject,$message,$headers);

if($success) {
  print "<script>document.location.href='http://www.domain.com/coming-soon.html'</script>";
} else {
  echo "Some Error Occurred! Please try again.";
}
?>

Save this code in a separate PHP file called coming-soon-form.php. In the above code, we are saving submitted data into two variables $name and $email. This data will be sent to our email address, which is saved in the $to variable.

$message is the email text.

$from address will serve as the Email From address. This can be any email address. It is better to use an email address ending in your own website domain name.

PHP mail function mail() is used to send email.

In the end, we are checking if the process is successful. In case of success, users will be redirected to the coming soon page. You can also create a separate thank you page for users and redirect the users to that page instead.

After adding the form HTML code to the coming soon page, which we have created in our previous tutorial, we get the following code:

<!DOCTYPE html>
<html>
 <head>
  <style type="text/css">
     html {
		height: 100%;
		padding:0;
		margin:0;
    }
    body {
		margin: 0px;
		padding: 0;
		background: -webkit-linear-gradient(#018fe2 25%,#0F5E8B 75%);
		background: -moz-linear-gradient(#018fe2 25%,#0F5E8B 75%);
		background: -o-linear-gradient(#018fe2 25%,#0F5E8B 75%);
		background: linear-gradient(#018fe2 25%,#0F5E8B 75%);
		width: 100%;
	}
	section {
		text-align: center;
		margin-top: 125px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 100px;
	}
	h1 {
		font-size: 38px;
		font-family: Arial;
	}
	p {
		font-family: Arial;
		color: #fff;
		font-size: 22px;
		max-width: 855px;
		line-height: 40px;
		margin: 10px auto;
	}
	/* Contact form styling */
	#ff {
		margin-top:30px;
	}
	input {
		padding: 10px;
		font-family: Arial;
		border-radius: 5px;
		border: 1px solid #fff;
	}
	.sendButton:hover, .sendButton:focus {
		background: #ccc;
		cursor: pointer;
	}
  </style>
  <title>Coming Soon</title>
 </head>
 <body>
 <section>
  <h1>This Website is Coming Soon</h1>
  <p>Thank you for visiting our website. We are creating something nice and exciting for you. Contact us below to get notified when it's ready!</p>
    <form name="contact" id="ff" method="post" action="">
        <input type="text" placeholder="Your Name" name="name" id="name" required />
        <input type="email" placeholder="Your Email" name="email" id="email" required />
        <input class="sendButton" type="submit" name="Submit" value="Contact Us" />
    </form>   
  </section>
 </body>
</html>