Why contact us page for blogger Websites is important?
A Website should have an option for visitors to contact the admin for a query or any question and for this, all the website owners need to create a page on the website called " Contact us".
There are multiple options available for creating a contact us page on a blogger website. For example, people create a contact us page on google forms and add a simple code on the page, but this is not the right method for creating a contact us page. In this article, I am going to tell you how you can create a good-looking and responsive contact page for your blogger website.
In blogger, it is very easy to create a contact us page, you just need to add some markup codes into a page and everything will be done automatically. Follow the step one by one for creating your website visitor contact page.
You Can Also watch the video add at the end of this article for better understanding.
01 Step: Create a Contact us page
Open your blogger Dashboard panel and find the Pages option on the left side navigation panel. Click on it or watch the image below.
Select the Composed view option for typing the HTML code on your contact us page. for more details please visit the digital sudhir youtube channel.
Copy the contact us page code below and paste this code into your blogger contact Us page.
<div dir="ltr" style="text-align: left;" trbidi="on">
<form name="contact-form">
<div>
<div class="MsoNormal">
<span style="font-family: inherit;"><span style="font-size: 13.5pt; line-height: 107%;">Your Name</span></span><span style="font-family: inherit;"><span style="font-size: 13.5pt; line-height: 107%;">: </span></span><i><span style="font-family: inherit;">(</span>required)</i><span style="font-family: "open sans" , sans-serif;"><o:p></o:p></span></div>
</div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="85" type="text" value="" />
<br />
<div>
<br />
<div class="MsoNormal">
<span style="font-family: inherit;"><span style="font-size: 13.5pt; line-height: 107%;">Your Email</span></span>: <i><span style="font-family: inherit;">(re</span>quired)</i><span style="font-family: "open sans" , sans-serif;"><o:p></o:p></span></div>
</div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="85" type="text" value="" />
<br />
<br />
<div class="MsoNormal">
<span style="font-family: inherit;"><span style="font-size: 13.5pt; line-height: 107%;">Subject:</span></span><span style="font-family: "open sans" , sans-serif;"><o:p></o:p></span></div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="85" type="text" value="" />
<br />
<div>
<div class="MsoNormal">
<br />
<span style="font-family: "open sans" , sans-serif; font-size: 13.5pt; line-height: 107%;"><span style="font-family: inherit;">Your Message:</span><o:p></o:p></span></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" style="height: 190px; margin: 0px; width: 632px;"></textarea>
<br />
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div style="max-width: 720px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</div>
</form>
</div>
2. Turn off commenting user as it is a contact us page not an article of any website.
Click on Publish Putton and fill the contact us form, if you received an email, it means, it's working else follow some more steps below.
Received Response
I fill all columns and received an email, from the blogger that someone emails me. In some templates It will not work directly we need to add a contact us gadget available in the blogger layout.
For adding that please follow the steps below.
02 Step: Go to Theme Layout and click on add gadget option available in the blogger. Watch the Image below.
Select Contact form gadget with title contact form. After doing this we need to hide the contact form, because it will appear on all the pages or posts on the website.
We will hide the contact form for Blogger sider using CSS code. You need to follow the steps to hide the contact form gadget from the blog sidebar.
03 Step. Hide the contact form from the blog sidebar.
a. See the left side navigation area and click on Theme>click on the three vertical dot or select edit HTML option.
b. Search the following HTML code in your blogger template code
]]></b:skin>
div#ContactForm1{display: none !important;}
d. Your last task is to save this change, for this, you need to click on the floppy type icon in your template.
after following step c, your contact us form will be available in the sidebar but it would not visible to the visitors of your website.
0 Comments