How To Create a Perfect “Contact Us” Page for your website

Hey everyone!!!

Do you have any idea of your website’s contact page and how it should be?

If your answer is NO! , don’t worry; today I’m here to show how we add a Perfect “Contact Us” Page for your web site. It is very easy. Though, you are new to web designing do not make it big issue. By following these steps you can make your own contact page for your web site.

Here, I would like to present it in step by step. Then, definitely you can get a clear understand about “How to create a perfect “Contact Us” page for your web site.”

· Importance of contact pages and why we need a contact page for a web site.

· What are the features of a perfect web contact us page should have?

· Key elements of a Contact us page.

· Some examples for a contact us page.

· How to build a contact us page using html and CSS.

Ok! Let’s get start without taking much more time.

Importance of contact pages and why we need a contact page for a web site.

In some cases, the need of a contact page for a web site is pretty obvious…No matter what type of your web site you’re running, contact us page of your web site is very important to your page and it provide a way for potential employers and employees, collaborators, visitors, readers, customers, clients and more to be able to get in touch with you.

Most web site owners feel they do not need one, but this leads to lost opportunities. When you have a specific contact page on your website, readers can ask questions, make suggestions, contact the writer and easily collaborate and so on.

What are the features of a perfect web contact us page should have?

A well designed contact us page with features such as a dedicated contact form gives you the best chance at encouraging these communications. Plus, it should be creative and effective one and user friendly. Do not take much time; it means not difficult to fill. It must be easily accessible from the home page. You should put the link to your “Contact Us” page on an expected place on the website so that the users could easily find it. Mostly, it includes in navigation bar of the webpage. “Contact us” page should be clean because it reflects your product’s visual identity.

Key elements of a Contact us page

Now, I would like to discuss about what are the things effective “Contact us” page should have?

· You can request a contact form with various contact details with the name. As contact details, you can request an e-mail address, phone number and a physical address. Then, they could quickly find the required information and easy communicate with you. By adding a contact form visitors can send you a message without leaving the site.

· There should a space to put a message or a feedback called message. Then, they can simply put a message without any issue to get the relevant information.

· Social media links — Many people now prefer social media more than traditional ways of communication. If they do not want to complete even a simple form, you can link your active corporate social media accounts like Twitter, Facebook, Instagram, and LinkedIn to give visitors a quickly way to engage with your business.

· A map or the location — If your company has a physical location you can add a Google map to show the comprehensive directions. It is more friendly and helpful than a simple address to find the relevant location of your business.

· Add a “Submit” button.

· You can add your contact name, e-mail address, contact number and the address of the physical location in this page.

· The background image makes the contact us page more stylish and attractive.

Example images for Contact_us page.

How to build a contact us page using html and CSS.

The above examples illustrate what finished contact page might looks like. Now, let’s move on to the fun part — learning how to build a contact page!

Actually, we can divide this task into three major parts.

1. Create html and CSS files

2. Build the page using html.

3. Add styles to the html document using CSS.

After completing these two parts you will get a nicely arranged “Contact Us” page.

Let’s start!

This is the “Contact_us” page which I’m going to create for you.

As you can see, we have navigation bar on the top of the page. After that, we have one title and a small description under the navigation bar. Then we have two columns left and right. Those are consist of different contact details.

1. Create html and CSS files.

First, create a folder in a particular location in your PC and create two text document files (.txt) in it. Now, rename the both files. One file should be with (.html ) extension and the other one is (.css) file. Then, they will appear as follows.

2. Build the page using html.

Define main html tags.

Now, open the Contact_us.html file using a text editor application.

First, define the main html structure in the .html file. Inside the main <html></html> tag, we define the <head> tag and the <body> tag. Most tags have START tag and an END tag.

Then, save the code. After that, you have to open the .html file using any web browser again. (Always, when you do the changes to the code, you have to save the code and refresh the web page to see the changes)

Then, you will see a blank web page with the title “Contact_us”.

Link .css file with the .html file inside the <head> tag.

Coding inside the body tag.

Next, we will write codes in body tag. We add separated divided class for each part of the page. Then, we can easily add css also.

Let’s do it part by part.

First, we define a class called “container”. (You can use a name you like). Inside that class, I define the first heading (h1) and a small passage (we use <p> tag)

Next, we build the “contact Box” part. It contains of two major parts called left and right.

In left hand side, we define a form using <form></form> tag. Inside it, I have defined some classes for each part of the contact form. Here, I have added labels for each one called Name, Phone, E-mail, Subject and Message. There also an Input type.

A placeholder is text inside your form’s fields that’s prompts users to respond to each field in a particular way.Here’s how you can easily add prompt texts to your HTML form.

After that, I have added a “SEND” button to submit. For that part, I used <button> tag.

In the right hand side, I have defined a table using the <table></table> tag. Inside this tag, I have mentioned the web page owner’s contact details such as E-mail, Phone and address.

The command “tr” tells the code to arrange the following statements into a row. The “td” code stands for “table data” and tells the program that the what you type next is the data you want to have in your contact_us page.

Add the navigation bar to the top of the page. In <body></body> tag , we write html part.

Here, I have written the html code with the CSS part also. I add CSS part in <head></head> tag. If you like, you can code the CSS part of the navigation bar in the linked .css file also. With CSS you can transform boring HTML menus into good-looking navigation bars.

Now, .html file creating is over.

Add font to the Contact_us page.

Here, you can add any font according to your preference, but it should be not difficult to read. This is how we add a font type to the page. We add this part in the <head></head> tag.

3. Add styles to the html document using CSS.

Now, open the .css file which you created previously in the folder.

This is the full code of .css file.

· In “body”, the background image must be included in the folder which you created .html and .css file before.

· Next, I have added css to each “class” one by one which we created in html file.

· In CSS,

Margins are used to create space around elements, outside of any defined borders.

Padding properties are used to create space around an element’s content, inside of any defined borders.

Font-family properties are used to define the font type.

The CSS height and width properties are used to set the height and width of an element.

Background properties are used to add background for the page.

The CSS border properties allow you to specify the style, width, and color of an element’s border.

Colors properties are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

Ok! Guys, now we have finished the creating both .html file and .css file.

This is the full code of .html file.

So, how do you feel? Is it difficult or not?

Finally, my conclusion is,

Contact pages seem simple, but they are very essential thing to building an interactive audience for your website through communication. For this reason, it’s important to put some effort into creating a great contact page for your own web site.

Thank you all…