Add Contact Form Widget And Contact Us Page To Blogger

Adding a contact form and contact us page to your blog/website is very important. When a visitor browse your website, He/she can feel to contact you for various needs, so this is a very important and useful widget.

    Simple Contact Form Widget For Blogger
    Contact Form Widget And Contact Us Page For Blogger

    Why a Contact Page Important ?

    Most of the blogspot bloggers use third party sites (such as: FoxForm, JFForm, 123contactForm) because  there is no simple plugin like wordpress. But Today I am sharing with you how to create a contact form & Contact us page easily without using any third-party site

    Install Contact Form Gadget

    First of all we will complete this with official blogger form.

    Add the Contact Gadget

    First add a contact form Gadget using following steps.

    Step-1:

    Go and login to Blogger Dashboard . Choose your blog where you want to add Contact form.

    Step-2:

    Navigate and go to Layout
    Add Contact Form Widget And Contact Us Page To Blogger
    Layout

    Step-3:

    Click on add gadget
    Contact form

    Step-4:

    Select Contact Form from gadgets list
    Add Contact Form Widget And Contact Us Page To Blogger
    Contact form
    Well done you has been successfully added the contact form gadget . Follow the next steps to  hide the gadget from your font page/homepage.

    Hide Gadget From Homepage

    There is no problem with the contact form on the homepage. Since it is not needed on the homepage, it is best to hide it. If you do not want to show the contact form in the homepage only then follow this step .
    1) Go to Template from right sidebar
    Theme

    2) Click on edit html
    Add Contact Form Widget And Contact Us Page To Blogger
    Edit HTML

    3) Find for ]]> (keyboard shortcut: clt+f) . Copy the following code and paste it before ]]> .
    div#ContactForm1 { 
    display: none !important;
    }

    Add Contact Form Widget And Contact Us Page To Blogger
    Paste & Save Template
    After paste click to Save Template . The contract form will not visible anymore to font page/homepage . 

    Add the Contact Form to a page

    You already added the official contact form gadget , now time to customize it to use it on a (contact us) page. To do this task follow instructions below.
    Step 1: Go to Pages from right sidebar . Here you can see and customize all of your pages.

    Add Contact Form Widget And Contact Us Page To Blogger
    Pages

    Step 2: Now Click on New Page (if you already not added this) . You also can choose existing page from page list (if already created) .
    Add Contact Form Widget And Contact Us Page To Blogger
    New page
    Step 3: After creating a new page you will automatically referred to the page . See next step to add contact form in it.
    Contact form for page
    Paste & Publish

    Enter a Page name example:Contact/contact us . Navigate to post body and paste the code below  (See the screen shot ).
    <div align="center" class="widget ContactForm" id="custom_ContactForm2"><div class="contact-form-widget">
    <h2 style="text-align: center;">
    Please feel free to contact with us . Send us your issue,suggestion,request . Simply we will take 2 days to reply your message via email.</h2>
    <br />
    <h1 class="title" style="text-align: center;">
    Write to us</h1>
    <h3>
    <div class="form">
    <form name="contact-form">
    <div style="text-align: center;">
    <span style="font-size: 1.1em;">Name&nbsp;</span></div>
    <div style="text-align: center;">
    <input class="contact-form-name" id="ContactForm2_contact-form-name" name="name" size="30" type="text" value="" /><span style="font-size: 1.1em;">
    
    Email
    </span><span style="font-size: 1.1em; font-weight: bolder;">*</span><span style="font-size: 1.1em;">&nbsp;</span></div>
    <div style="text-align: center;">
    <input class="contact-form-email" id="ContactForm2_contact-form-email" name="email" size="30" type="text" value="" /><span style="font-size: 1.1em;">
    
    Message
    </span><span style="font-size: 1.1em; font-weight: bolder;">*</span><span style="font-size: 1.1em;">&nbsp;</span></div>
    <div style="text-align: center;">
    <textarea class="contact-form-email-message" cols="25" id="ContactForm2_contact-form-email-message" name="email-message" rows="5"></textarea><span style="font-size: 1.1em;">
    
    </span><input class="contact-form-button contact-form-button-submit" id="ContactForm2_contact-form-submit" type="button" value="Send" /><span style="font-size: 1.1em;">&nbsp;</span></div>
    <div style="max-width: 222px; text-align: center; width: 100%;">
    <div class="contact-form-error-message" id="ContactForm2_contact-form-error-message">
    </div>
    <div class="contact-form-success-message" id="ContactForm2_contact-form-success-message">
    </div>
    </div>
    </form>
    </div>
    </h3>
    </div>
    <div class="clear">
    </div>
    <br /></div>
    
    Step 4: Click Publish button to save your changes . Now view your page and congratulations to your contact us page from me.
    Note: Please change the blog id from code for full control over the gadget.

    Good job you have successfully completed all of all tasks for contact form and Contact us page.
    Thank you for reading this article . If you think that i deserve a thanks than comment please .