Contact Us Page HTML Code

 

If you're creating a website, then one of the pages you should have, is the Contact Us page, and today, you'll be able to create one in seconds.

The contact us page, is where you give your site visitors access to reach out to you for answers or support by sending you an email or a message explaining what is it they want. There are many ways to create the contact us page and almost all of them are free 

It's part of the document generators toolkit that you will need when you first create a website. It helps you create the following pages:

• Affiliate Disclaimer page
• Privacy Policy page
• Terms and Conditions page
  
• About Us page
• Contact Us page
• HTML Sitemap page (for your visitors)
  
• XML Sitemap page (for search engines)
  

Benefits of having the contact us page?

1- Good user experience

With you having a contact us page in your website or mobile application, your audience know that they can reach you if they have questions, or want to suggest something that can improve their experience.

Personally, I have experienced this couple of times before where I wanted to ask the website owner something about his content and didn't find the contact us page so I ended up not visiting that site.

2- Higher ranking

Enabling your visitors to ask you questions and suggest ideas to improve your content, contributes to your website's engagement, bouncing rate, and traffic, which therefor improve your website's ranking

What to include in your Contact Us page?

Typically you should include a tool for your users to use in sending their message to you, and you only need to ask them for few information that can help you respond back to them.

The basis questions you should be asking them are:

Name

This helps personalize your response when you answer them and it proves that the requester is human.

It's also totally normal for someone to use their company's name when asking if this is their preferred way of communication

Email address

It's always a good practice to ask the requester to include the email address that they wish to be contacted with. Sometimes you're logged in with one email address, but you want the response to another email.

Also, it's a good way of you collecting email addresses for your email marketing campaigns.

The message

This is where you give them space to ask the questions they want to ask, or share feedback, or suggest ideas

Additional information you can ask for:

You also, depending on your website or mobile application's nature, can include other elements to be shared by the requester like:

Address

You can ask for the requester's address to better investigate the problem, like in products delivery delays.

Phone number

You can ask for the phone number of the requester if that's going to help you investigate and solve the problem faster for your clients instead of having back and forth emails.

Or it could be that you're offering services that can be done over the phone and your Contact us page is used as appointments requests like in counseling or therapy

Company details

In few occasions, you can ask for company details of the requester if you're involved in B2B industry or if your services varies according to the industry requesting them.

In that case, knowing your requester company name and industry for example is going to be beneficial for your response

Personal information

In other situations, you may want to know more personal information about the requester like marital status, family members, etc. This is applicable if you're having customized services or products according to the different marital statuses for example.

Others

There are no limitation to what you can include in your checklist needed from the requester. The sky is your limit provided that you're only asking for the minimum needed information that can help you better serve your users.

Having the minimum needed information is a good practice to comply with most privacy policies and it provides a good user experience by sharing just the needed information

How to create your contact us page?

1. Copy the code below

<p>Name</p> <input class="contact-form-name" id="ContactForm_contact-form-name" name="name" size="30" type="text" value="" /> <p>Email<span style="font-weight: bolder;">*</span></p> <input class="contact-form-email" id="ContactForm_contact-form-email" name="email" size="30" type="text" value="" /> <p>Message<span style="font-weight: bolder;">*</span></p> <textarea class="contact-form-email-message" cols="25" id="ContactForm_contact-form-email-message" name="email-message" rows="5"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm_contact-form-submit" type="button" value="Send" /> <div style="max-width: 222px; text-align: center; width: 100%;"> <p class="contact-form-error-message" id="ContactForm_contact-form-error-message"></p> <p class="contact-form-success-message" id="ContactForm_contact-form-success-message"></p> </div> </form> </div> </div> <script src="https://www.blogger.com/static/v1/widgets/609130596-widgets.js" type="text/javascript"></script> <script type="text/javascript"> window['__wavt']='AOuZoY4PUAjvdPMazQDQJXJCrDFxkBfenw:1546660985916';_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d4801369736756949407','//blogspot.com','4801369736756949407');_WidgetManager._SetDataContext([{'name':'widgets','data':[{'title':'Contact Form','type':'ContactForm','sectionId':'sidebar2','id':'ContactForm'}]}]);_WidgetManager._RegisterWidget('_ContactFormView',new _WidgetInfo('ContactForm','sidebar2',document.getElementById('ContactForm'),{'contactFormMessageSendingMsg':'Sending...','contactFormMessageSentMsg':'Your message has been sent :) ','contactFormMessageNotSentMsg':'Message could not be sent. Please try again later.','contactFormInvalidEmailMsg':'A valid email address is required.','contactFormEmptyMessageMsg':'Message field cannot be empty.','title':'Contact Form','blogId':'4801369736756949407','contactFormNameMsg':'Name','contactFormEmailMsg':'Email','contactFormMessageMsg':'Message','contactFormSendMsg':'Send','submitUrl':'https://www.blogger.com/contact-form.do'},'displayModeFull')); </script>

2. Go to your website and create a new page. Name it Contact Us.
3. Using the HTML editing choice, paste the code you copied from above.
4. Preview your page and you can add an image to the top if you want to make it more appealing
5. Publish your page
6. Test it by entering a name, email, and any message and click send
7. Check your email address and verify that you've received a note from your website.

Note: sometimes, it can be sent to the junk folder as it's not recognizable yet, so you can mark that email as trusted so that future emails come from your website can go directly to your inbox.