Sick Gaming
[Tut] Contact Us Page Design – HTML Form - Printable Version

+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html)
+--- Thread: [Tut] Contact Us Page Design – HTML Form (/thread-101216.html)



[Tut] Contact Us Page Design – HTML Form - xSicKxBot - 08-13-2023

[Tut] Contact Us Page Design – HTML Form

<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2023/03/contact-us-page-design-html-form.jpg" width="550" height="286" title="" alt="" /></div><div><div class="modified-on" readability="7.0909090909091"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on March 23rd, 2023.</div>
<p>This article has HTML templates for contact form pages. All these templates are responsive to fit any viewports.</p>
<p>On a responsive page, the site header menu can be toggled. Template 1 and 2 of this example has JavaScript function to perform the toggle events for a sliding menu in the mobile view.</p>
<h2>Contact Form Template 1</h2>
<p>This template has the contact form in the site footer. The footer contains three columns to show the contact form details.</p>
<p>If you are creating a contact form page, it should clearly show the location and the contact details.</p>
<p>In this template, the footer columns show these details with a contact form.</p>
<p>The site header contains menu links and a hamburger icon. The hamburger icon can be seen in the mobile view only.</p>
<p>The <a href="https://phppot.com/css/multilevel-dropdown-menu-with-pure-css/">header dropdown menu</a> will be shown on clicking that icon in the site banner.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-20637" src="https://phppot.com/wp-content/uploads/2023/03/contact-form-template1-550x286.jpg" alt="contact form template1" width="550" height="286" srcset="https://phppot.com/wp-content/uploads/2023/03/contact-form-template1-550x286.jpg 550w, https://phppot.com/wp-content/uploads/2023/03/contact-form-template1-300x156.jpg 300w, https://phppot.com/wp-content/uploads/2023/03/contact-form-template1-768x399.jpg 768w, https://phppot.com/wp-content/uploads/2023/03/contact-form-template1.jpg 1200w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p class="code-heading">template-1/index.html</p>
<pre class="prettyprint"><code class="language-html">&lt;html&gt;
&lt;head&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
&lt;/head&gt;
&lt;body&gt; &lt;div class="container"&gt; &lt;div class="site-banner"&gt; &lt;div class="header-menu"&gt; &lt;a href=""&gt;Logo&lt;/a&gt; &lt;span id="menu-icon" onClick="toggleMenu()"&gt;&lt;img src="images/menu.svg" /&gt;&lt;/span&gt; &lt;span id="header-right-menu"&gt; &lt;a href="#"&gt;Our work&lt;/a&gt; &lt;a href="#"&gt;About&lt;/a&gt; &lt;a href="#"&gt;News&lt;/a&gt; &lt;a href="#" class="header-active"&gt;Contact&lt;/a&gt; &lt;/span&gt; &lt;/div&gt; &lt;h1 class="heading"&gt;Contact Us&lt;/h1&gt; &lt;/div&gt;&lt;div class="footer"&gt; &lt;div class="footer-column"&gt;&lt;img class="map-image" src="images/location.jpg" /&gt;&lt;/div&gt; &lt;div class="footer-column"&gt; &lt;div class="tile-content"&gt; &lt;h1&gt;Meet Us&lt;/h1&gt; &lt;div class="contact-row"&gt; &lt;img src="images/phone.svg"&gt;&lt;span class="tile-field"&gt;+466723723666&lt;/span&gt; &lt;/div&gt; &lt;div class="contact-row"&gt; &lt;img src="images/at-sign.svg"&gt;&lt;span class="tile-field"&gt;[email protected]&lt;/span&gt; &lt;/div&gt; &lt;div class="contact-row"&gt; &lt;img src="images/map-pin.svg"&gt;&lt;span class="tile-field"&gt;1784 Griffin Street, Alabama&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="footer-column contact-form-container"&gt; &lt;div class="tile-content"&gt; &lt;form method="POST"&gt; &lt;h1&gt;Contact&lt;/h1&gt; &lt;div class="contact-row"&gt; &lt;input type="text" class="form-field" placeholder="Name"&gt; &lt;/div&gt; &lt;div class="contact-row"&gt; &lt;textarea rows="5" class="form-field" placeholder="Message"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;button class="button"&gt;Send&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script&gt; function toggleMenu() { var menuElement = document.getElementById("header-right-menu"); if (menuElement.style.display === "block") { menuElement.style.display = "none"; } else { menuElement.style.display = "block"; } } &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>The below CSS is created for this contact form template. It contains media queries for the <a href="https://phppot.com/php/responsive-contact-form-with-php/">responsiveness of the contact form</a> page.</p>
<p class="code-heading">template-1/style.css</p>
<pre class="prettyprint"><code class="language-css">body { font-family: Arial;
} .container { max-width: 1180px; margin: 0 auto; line-height: 1.5;
}
/* header style starts */
.site-banner { min-height: 400px; background-image: url('images/header-image.jpg'); background-size: cover; background-position: center; color: #ffffff;
} .site-banner a { color: #ffffff; text-decoration: none; font-weight: bold; padding: 12px;
} .header-menu { padding: 40px 20px;
} #header-right-menu { float: right;
} .header-active { background: rgba(0, 0, 0, 0.5); border-radius: 25px;
} .heading { color: #ffffff; text-align: center; font-family: cursive; padding: 40px 0px; font-size: 3em; margin: 0px;
}
/* header style ends */ .footer { display: flex;
} .footer-column { width: 33.3%; float: left;
} .map-image { width: 100%;
} .contact-form-container { background-color: #eaeaea;
} img { vertical-align: middle;
} .tile-content { padding: 20px 40px;
} .tile-content .contact-row { margin-bottom: 20px;
} .tile-field { margin-left: 20px;
} .form-field { width: 100%; padding: 10px 8px; border-radius: 4px; border: #d9d8d8 1px solid;
} .button { color: #ffffff; padding: 10px 30px 10px 30px; border-radius: 20px; background: linear-gradient(to right, #08a9df, #12054a); border: 0px;
} #menu-icon { display: none; float: right;
} @media screen and (max-width: 1000px) { .footer-column { width: 50%; } .contact-form-container { width: 100%; } .footer { display: block; }
} @media screen and (max-width: 540px) { #header-right-menu { float: none; display: none; } #header-right-menu a { display: block; } .heading { padding: 0px; } .tile-content { padding: 0px 20px; } .footer-column { width: 100%; } #menu-icon { display: block; float: right; }
}
</code></pre>
<h2>Contact Form Template 2</h2>
<p>This contact template shows the contact details, address, phone, and email. It offers a form with primary fields to let the user communicate with the site owner.</p>
<p>This template has two columns in the site content area. The contact details and the contact form are shown in these two columns, respectively.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-20638" src="https://phppot.com/wp-content/uploads/2023/03/contact-form-template2-550x305.jpg" alt="contact form template2" width="550" height="305" srcset="https://phppot.com/wp-content/uploads/2023/03/contact-form-template2-550x305.jpg 550w, https://phppot.com/wp-content/uploads/2023/03/contact-form-template2-300x166.jpg 300w, https://phppot.com/wp-content/uploads/2023/03/contact-form-template2-768x425.jpg 768w, https://phppot.com/wp-content/uploads/2023/03/contact-form-template2.jpg 800w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p class="code-heading">template-2/index.html</p>
<pre class="prettyprint"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Contact - Form&lt;/title&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
&lt;/head&gt;
&lt;body&gt; &lt;div class="container"&gt; &lt;div class="text-center"&gt; &lt;h1&gt;Contact Us&lt;/h1&gt; &lt;div&gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore &lt;div&gt;et dolore magra aliqua. Ut enim ad minim veniam.&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="content"&gt; &lt;div class="col-1"&gt; &lt;div class="address-line"&gt; &lt;img alt="location" src="image/marker.png" class="icon"&gt; &lt;div class="contact-info"&gt; &lt;div class="contact-info-title"&gt;Address&lt;/div&gt; &lt;div&gt;1002 West 5th Ave,&lt;/div&gt; &lt;div&gt;Alaska, New York,&lt;/div&gt; &lt;div&gt;55060.&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="address-line"&gt; &lt;img alt="location" src="image/phone.png" class="icon"&gt; &lt;div class="contact-info"&gt; &lt;div class="contact-info-title"&gt;Phone&lt;/div&gt; &lt;div&gt;12523-4566-8954-8956.&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="address-line"&gt; &lt;img alt="location" src="image/mail.png" class="icon"&gt; &lt;div class="contact-info"&gt; &lt;div class="contact-info-title"&gt;Email&lt;/div&gt; &lt;div&gt;[email protected]&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="col-2"&gt; &lt;form&gt; &lt;div class="form-container"&gt; &lt;h2&gt;Send Message&lt;/h2&gt; &lt;div class="form-row"&gt; &lt;label&gt;Full Name&lt;/label&gt; &lt;div&gt; &lt;input type="text" class="form-field"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-row"&gt; &lt;label&gt;Email&lt;/label&gt; &lt;div&gt; &lt;input type="text" class="form-field"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-row"&gt; &lt;label&gt;Type your message...&lt;/label&gt; &lt;div&gt; &lt;input type="text" class="form-field"&gt; &lt;/div&gt; &lt;/div&gt; &lt;input type="button" class="send-btn" value="Send"&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>See the below CSS and include it in the template 2 HTML.</p>
<p class="code-heading">template-2/style.css</p>
<pre class="prettyprint"><code class="language-css">body { font-family: Arial; background-image: url('image/bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed;
} .container { width: 950px; margin: 80px auto; color: white; line-height: 1.5;
} .text-center { text-align: center;
} .content { display: flex; margin-top: 40px;
} .icon { background-color: white; border-radius: 30px; padding: 15px; vertical-align: top;
} .contact-info { display: inline-block; padding: 4px 20px 0px 20px;
} .address-line { margin-top: 40px;
} .col-1 { width: 530px;
} .col-2 { flex: 1 1 auto; background-color: white;
} .form-container { color: #000; padding: 30px;
} .contact-info-title { color: #01bdd4;
} .form-row { padding-bottom: 30px;
} .form-field { width: 100%; border: none; border-bottom: 1px solid #000;
} .send-btn { border: 0px; padding: 12px 26px; background-color: #01bdd4; color: white;
} @media all and (max-width: 1024px) { .container { width: auto; padding: 30px; } .col-1 { width: 360px; } } @media all and (max-width: 700px) { .content { display: block; } .col-2 { margin-top: 40px; } .col-1{ width:100%; }
} @media all and (max-width: 500px) { .container { padding: 10px; }
}
</code></pre>
<h2>Contact Form Template 3</h2>
<p>Template 3 is a simple and clean theme for a contact form page. It displays a contact form with a few primary fields. Also, it shows only the vital contact details on the page.</p>
<p>A simple contact template will encourage the end user to connect with you and increase the conversion rate.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-20639" src="https://phppot.com/wp-content/uploads/2023/03/contact-form-template3-550x284.jpg" alt="contact form template3" width="550" height="284" srcset="https://phppot.com/wp-content/uploads/2023/03/contact-form-template3-550x284.jpg 550w, https://phppot.com/wp-content/uploads/2023/03/contact-form-template3-300x155.jpg 300w, https://phppot.com/wp-content/uploads/2023/03/contact-form-template3-768x396.jpg 768w, https://phppot.com/wp-content/uploads/2023/03/contact-form-template3.jpg 800w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p class="code-heading">template-3/index.html</p>
<pre class="prettyprint"><code class="language-html">&lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
&lt;/head&gt; &lt;body&gt; &lt;div class="container"&gt; &lt;div class="header-content"&gt; &lt;a href=""&gt;Logo&lt;/a&gt; &lt;span id="menu-icon" onClick="toggleMenu()"&gt;&lt;img src="images/menu.svg" /&gt;&lt;/span&gt; &lt;span id="header-right-menu"&gt; &lt;a href="#"&gt;Services&lt;/a&gt; &lt;a href="#"&gt;Products&lt;/a&gt; &lt;a href="#"&gt;Pricing&lt;/a&gt; &lt;a href="#" class="header-active"&gt;Contact Us&lt;/a&gt; &lt;/span&gt; &lt;/div&gt; &lt;div class="inner-container"&gt; &lt;div class="tile1"&gt; &lt;div class="tile1-heading"&gt;Get in touch&lt;/div&gt; &lt;div class="form-row"&gt;We are here for you! How can we help?&lt;/div&gt; &lt;form&gt; &lt;div class="form-row"&gt; &lt;input type="text" class="form-field" placeholder="Enter your name"&gt; &lt;/div&gt; &lt;div class="form-row"&gt; &lt;input type="text" class="form-field" placeholder="Enter your email address"&gt; &lt;/div&gt; &lt;div class="form-row"&gt; &lt;textarea class="form-field" placeholder="Go ahead we are listening..."&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;div class="form-row"&gt; &lt;input type="button" class="form-field btn" value="Submit"&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;div class="tile2"&gt; &lt;div class="tile2-image"&gt; &lt;img src="images/contact.png"&gt; &lt;/div&gt; &lt;div&gt; &lt;div class="form-row"&gt; &lt;img src="images/loaction.png" class="contact-image"&gt;&lt;span&gt;564 Alabama Avenue&lt;/span&gt; &lt;/div&gt; &lt;div class="form-row"&gt; &lt;img src="images/phone.png" class="contact-image"&gt;&lt;span&gt;+466723723666&lt;/span&gt; &lt;/div&gt; &lt;div class="form-row"&gt; &lt;img src="images/mail.png" class="contact-image"&gt;&lt;span&gt;[email protected]&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script&gt; function toggleMenu() { var menuElement = document.getElementById("header-right-menu"); if (menuElement.style.display === "block") { menuElement.style.display = "none"; } else { menuElement.style.display = "block"; } } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;
</code></pre>
<p>And the styles of this template three are shown below.</p>
<p class="code-heading">template-3/style.css</p>
<pre class="prettyprint"><code class="language-css">body { font-family: Arial; background-image: url('images/bg.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;
} .container { border-radius: 16px; max-width: 1180px; margin: 0 30px;
} a { color: #ffffff; text-decoration: none;
} .header-content { font-weight: bold; width: 800px; margin: 20px auto;
} #header-right-menu { float: right;
} #header-right-menu a { padding: 12px;
} .header-active{ color:#000;
} .inner-container { width: 750px; margin: 80px auto; display: flex; background-color: white; border-radius: 12px; padding: 30px
} .tile1 { width: 350px;
} .tile2 { flex: 1 1 auto; padding: 0px 40px;
} .tile1-heading { background: -webkit-linear-gradient(#0aa6bd, #f126bd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; font-size: 1.5em;
} .form-row { padding: 20px 0px 0px 0px;
} .form-field { border-radius: 4px; width: 100%; padding: 15px; background-color: #f5f4fa; border: 0px;
} .contact-image { padding: 10px; border-radius: 35px; border: 1px solid #a8a4a4; vertical-align: middle; margin-right: 20px; width: 16px; height: 16px;
} textarea { height: 100px; font-family: Arial;
} .btn { color: white; background: linear-gradient(to right, #0aa6bd, #f126bd);
} .tile2-image img { width: 321px; height: 211px;
} #menu-icon { display: none; float: right;
} @media all and (max-width: 900px) { .inner-container { width: auto; display: block; margin: 30px auto; } .header-content { width: auto; } .tile1 { width: 100%; } .tile2 { padding: 0px; } .tile2-image img { width: 100%; height: auto; }
} @media all and (max-width: 540px) { #header-right-menu { float: none; display: none; } #header-right-menu a { display: block; padding: 10px 0px; } #menu-icon { display: block; float: right; }
} @media all and (max-width: 400px) { .container { padding: 10px; }
}
</code></pre>
<p><a class="download" href="https://phppot.com/downloads/php/contact-us-page.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/php/contact-us-page/#top" class="top">↑ Back to Top</a> </p>
</div>


https://www.sickgaming.net/blog/2023/03/23/contact-us-page-design-html-form/