This HTML code snippet helps you to create a responsive Contact Us page with input fields for name, email, phone, message, and website URL. The page design ensures ease of use and prompts quick contact submission.
You can use this code on your website to provide a convenient way for visitors to contact you. It helps in enhancing user engagement and building trust with your audience. Additionally, it streamlines the communication process, allowing for quick responses to inquiries.
How to Create a Responsive Contact Us Page
1. First of all, create the HTML structure for the Contact Us page. Inside the <body> tag, create a <div> with a class of “container” to contain your contact form.
Inside the “container” <div>, create a <form> element with an id of “contact” and set the action attribute to an empty string (action=””). This form will handle user input.
Within the <form> tags, add input fields for name, email, phone number, website URL, and a textarea for the message. Also, include a submit button for users to send their message.
<div class="container">
<form id="contact" action="" method="post">
<h3>Quick Contact</h3>
<h4>Contact us today, and get reply with in 24 hours!</h4>
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input placeholder="Your Web Site starts with http://" type="url" tabindex="4" required>
</fieldset>
<fieldset>
<textarea placeholder="Type your Message Here...." tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
2. You can customize the appearance of your contact form using CSS. Save the following CSS code in a file named “styles.css” and link it to your HTML file.
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);
* {
margin:0;
padding:0;
box-sizing:border-box !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body {
font-family:"Open Sans", Helvetica, Arial, sans-serif;
font-weight:300;
font-size: 12px;
line-height:30px;
color:#777;
;
}
.container {
max-width:400px;
width:100%;
margin:0 auto;
position:relative;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }
#contact {
background:#F9F9F9;
padding:25px;
margin:50px 0;
}
#contact h3 {
color: #F96;
display: block;
font-size: 30px;
font-weight: 400;
}
#contact h4 {
margin:5px 0 15px;
display:block;
font-size:13px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
width:100%;
border:1px solid #CCC;
background:#FFF;
margin:0 0 5px;
padding:10px;
}
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #AAA;
}
#contact textarea {
height:100px;
max-width:100%;
resize:none;
}
#contact button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:#0CF;
color:#FFF;
margin:0 0 5px;
padding:10px;
font-size:15px;
}
#contact button[type="submit"]:hover {
background:#09C;
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#contact input:focus, #contact textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder {
color:#888;
}
:-moz-placeholder {
color:#888;
}
::-moz-placeholder {
color:#888;
}
:-ms-input-placeholder {
color:#888;
}
That’s all! hopefully, you have successfully integrated this HTML code to create a Responsive Contact Us page on your website. If you have any questions or suggestions, feel free to comment below.
