Create a Responsive Thank You Page for Coming Soon Page

Category:

Although you can redirect your users to your main coming soon page after they submit the contact form, it is highly recommended to have a separate thank you page for this purpose.

In this tutorial we will show you how to create a responsive thank you page for your coming soon page.

Here is a sample code:

<!DOCTYPE html>
<html>
 <head>
 <title>Thank You</title>
 </head>
 <body>
 <section>
  <h1>Thank You for Contacting Us</h1>
  <p>Thank you for contacting us and showing your interest in our website. We'll get back to you when it's done!</p>  
  </section>
 </body>
</html>

After adding some CSS styling, it becomes:

<!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;
	}
  </style>
  <title>Thank You</title>
 </head>
 <body>
 <section>
  <h1>Thank You for Contacting Us</h1>
  <p>Thank you for contacting us and showing your interest in our website. We'll get back to you when it's done!</p>  
  </section>
 </body>
</html>

Save this page as thank-you.html. This will result in a web page as shown in the image above. You can update this url in the PHP script we created in our previous tutorial and it will redirect your users to this thank you page after form submission.