How to Create A Contact Us Page for Blogger/Blogspot?

 

How to Create A Contact Us Page for Blogger/Blogspot?

How to Create A Contact Us Page for Blogger/Blogspot?

Add Contact Us Page in Blogger : 

 

Add Contact Us Page in Blogger

1. Go to Blogger dashboard > Select a blog > Layout

2. Add the contact form to the blog sidebar

3. Hide the contact form the blog sidebar

a. Go to Themes > Click on the three vertical dots > Edit HTML

b. Search for the following code-> ]]></b:skin>

c. Paste the following CSS code just above it. code->  div#ContactForm1{display: none !important;}

2. Next, navigate to 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.

contact us page template code:

<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>

HOME