How to Create an Efficient Contact Us Section
Forms are key parts of Contact Us pages. However, a form may not be enough by itself. Supplementing the contact form with direct contact information such as e-mail addresses and phone numbers will help people reach you directly when they have a question.
Contact Us pages are one of the most visited pages on websites. Putting a contact form will not only help you gather data from your website's visitors but make your website look professional as well. Contact forms are so efficient and versatile that you can customize the forms and decide exactly what kind of information you'd like to gather.
That being said, there are times when people may want to reach out to you directly. For example, they may have a question before filling out the contact form or if your form stops working, people will still be able to reach out to you. Especially when users are frustrated, the last thing they want to do is deal with a contact form. In this tutorial, we'll show you how to build a contact section that provides a comprehensive contact form and direct contact information in a clean and stylish way that emphasizes your brand.
Getting Started
We're using Bootstrap so go ahead and put the Bootstrap CDN links below in the head section of your project's HTML file:
HTML
Below, we have two columns inside a container div with the classname of .contact-section. The left column is the direct contact info column and the form is on the right. Bootstrap's grid structure and built-in classes provide us with an easy and efficient way of structuring our columns. We used the classname .col-md-3 for the contact information column and .col-md-9 for the contact form. This way the form will take about two-thirds of the screen width while the contact info part will take one-third of space. Depending on the size of your form and number of fields, you can make these columns bigger and smaller. Also, in the contact info section we added an h4 heading to display your company's name and a short sentence about the company in addition to providing a phone number and an e-mail address. This is a good way to capture your visitor's attention and make your contact section much less boring.
And there it is. Take a look at the JSFiddle below and resize the window to see how the contact section looks before committing to its use:
Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter
