How to Create A Contact Us Page for Blogger/Blogspot?
How to Create A Contact Us Page for Blogger/Blogspot? |
A
blog is supposed to have a contact us page. It helps the user to contact the
webmaster and management. There are a small number of ways to add a get in
touch with us page in Blogger. This post will lend a hand to you set up a contact
us page for Blogger or Blogspot. It is straightforward to append the contact us page HTMLinto a page. There is a mode to get a free contact form for Blogger on
your blog sidebar. Let’s check out how to create a contact us page in Blogger.
AddContact Us Page in Blogger
You can create a contact uspage in Blogger. Want to be acquainted with – how to add contact us page inBlogger? It is much uncomplicated, and no technical expertise is required. Just
follow the steps given below.
1. Go to Blogger dashboard >
Select a blog > Layout
2. Add the contact form to the blog sidebar
Warning: It
is required to add the contact form on your blog to work this contact form on
the contact us page in Blogger. If you will not add a contact form and tick the
checkbox “show write to form,” then the speak to form will not work.
3. Hide the contact form
from the blog sidebar
We will put out of sight the contact form for Blogger snider using CSS code.
You need to follow the steps to hide the contact form gadget from the blog
sidebar.
a. Go to Themes > Click
on the three perpendicular dots > Edit HTML
b. Search for the following
code-
]]></b:skin>
Here is how to search with Blogger HTML.
c. Paste the following CSS
code just above it.
div#ContactForm1{display:
none !important;}
Check the screenshot on how to implement it.
d. Now, click the floppy
icon to save the changes.
After implementation all the
steps mention under point number three. Your contact form will be present in
the sidebar but will not be visible to the blog visitor.
2. Next, navigate to the Pages section
3. Click the orange ⊕ icon to create a new page. (Not a post)
4. Paste the following HTML
code (contact us page template) and publish the page. It is a stylish contact
form for Blogger.
<style>
.page-contact-form input,.page-contact-form textarea {width: 100%;max-width:
100%;margin-bottom: 10px;}
.page-contact-form input.contact-form-button.contact-form-button-submit
{padding: 10px;background: #ea6337; color: #fff;border: none;}
.page-contact-form input.contact-form-button.contact-form-button-submit:hover
{background: #d85b32;color: #fff;}
</style>
<div class=”contact-form-widget page-contact-form”>
<div class=”form”>
<form name=”contact-form”>
Name:<br />
<input class=”contact-form-name” id=”ContactForm1_contact-form-name”
name=”name” size=”30″ type=”text” value=”” />
E-mail: <span id=”required”>*</span><br />
<input class=”contact-form-email” id=”ContactForm1_contact-form-email”
name=”email” size=”30″ type=”text” value=”” />
Message: <span id=”required”>*</span><br />
<textarea class=”contact-form-email-message” cols=”25″
id=”ContactForm1_contact-form-email-message” name=”email-message”
rows=”5″></textarea>
<input class=”contact-form-button contact-form-button-submit”
id=”ContactForm1_contact-form-submit” type=”button” value=”Submit” />
<br/>
<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>
</form>
</div>
</div>
Check the following screenshot-
5. Open the page in your web
browser and check if the leaf is functioning correctly, and users can send you letters.
Go to the Pages subdivision
and click on the eye icon to view the drop a-line to our page.