How To Create A Contact Us Page In Blogger/Blogspot | Copy & Paste

How To Create A Contact Us Page In Blogger/Blogspot | Copy Paste Work
How To Create A Contact Us Page In Blogger/Blogspot | Copy Paste Work

Create responsive contact form for blogger

A contact form is a great way to get in touch with your audience you’ll be able to create a professional contact us page in blogger simple using copy paste work just do the step given in this article or you can watch the given video for complete information

This entire page is dedicated for bloggers who want to get in touch with audience. This contact form is created in such a way that if the users filling out the contact form you’ll get the notification directly to my personal inbox.

How To Create A Contact Us Page In Blogger/Blogspot | Copy Paste Work

how to add contact form on blogger | Step-by-step Guide

you can create a contact us page in blogger there is no HTML/CSS skills required you just need to follow the steps and create a professional contact us page in blogger

2022 Best Professional Blogger Templates For Fast Adsense Approval | Adsense Ready Templates

How Can I Find Free Unique Articles? | Automatic Article Generator AI

(2022 Updated) How To Create a Coupon Affiliate Website On Blogger

Video Documentation
You can check this below video to understand the setup process much more easily, just click the below video to watch the video directly on YouTube, or click this link – How To Setup Blog Coupon Blogger Template

Step 1

a) Go to Blogger Dashboard > Select Layout Option

b) Add the contact form to the blog sidebar (Important)

How To Create A Contact Us Page In Blogger/Blogspot | Copy Paste Work

Step 2

3. Hide the contact form the blog sidebar

We need to disable the contact form in the layout sidebar using CSS Code. You need to follow these given steps to hide the contact form gadget from the blog sidebar.

a) Go to themes and open the Edit HTML section

How To Create Any Website For Free | Earn From Google Adsense | No Domain No Hosting (Complete Video Tutorial)

How To Create A Contact Us Page In Blogger/Blogspot | Copy Paste Work

Tab anywhere and press Ctrl + F and the search option will get open 

b. Search for the following code

]]></b:skin>

c. Paste the following CSS code just above it. and Click on save changes

div#ContactForm1{display: none !important;}
How To Create A Contact Us Page In Blogger/Blogspot | Copy Paste Work

After completing all the steps mentioned above your contact form in sidebar will not be visible to the visitors

Step 3

  1. Navigate to Pages > Create a new Contact Us page 
How To Create A Contact Us Page In Blogger/Blogspot | Copy Paste Work

Paste the following HTML code and publish the page.

<style>
.page-contact-form input,.page-contact-form textarea {width: 100%;max-width: 100%;margin-bottom: 10px;border:1px solid black}
.page-contact-form input.contact-form-button.contact-form-button-submit {padding: 10px;background: DodgerBlue; color: #fff;border: none;}
.page-contact-form input.contact-form-button.contact-form-button-submit:hover {background: RoyalBlue;color: #fff;}
</style>
<div class="contact-form-widget page-contact-form">
<div class="form">
<form name="contact-form">
<p style="color:black; font-size:15px; font-family:verdana; border:1px solid black; padding:8px">Thank you for choosing to contact us. you can write us at the below mentioned contact address for any of your queries / clarifications / products and services. You can also email us for a faster response and return reply<br />
<br /><span style="color:red; font-size:15px; font-family:verdana;"><b>
Email us at: <b style="text-decoration:underline;">support@mytechnicalnews.com </b></b></span></p>
<br/>
<span style="color:black;">Name:</span><br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<span style="color:black"> E-mail:</span> <span id="required" style="color:red;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<span style="color:black"> Message:</span> <span id="required" style="color:red;">*</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>
How To Create A Contact Us Page In Blogger/Blogspot | Copy Paste Work

Now you can see your contact us page look like this if you like this contact us page don’t forget to Subscribe our youtube channel for more blogging videos and learn something new with us

SUBSCRIBE
How To Create A Contact Us Page In Blogger/Blogspot | Copy Paste Work

Create a Website Video
Dropshipping Website With WordPress: https://youtu.be/kMrf6T1-KiA
Free Website Using Mailchimp: https://youtu.be/wNAUR3EcYmk
Amazon Affiliate Website With WordPress: https://youtu.be/269zHd1keh8
Make An E-Commerce Website: https://youtu.be/geXDfqd6M6g

Bhavesh Parmar

My Name is Bhavesh Parmar. I’m a writer living in India. I am a fan of technology, design, and writing. I’m also interested in programming and blog. I would like to share articles related to, blogging, WordPress, Affiliate Marketing, Earn money online. you can subscribe to me on Youtube for more videos