Breaking News
Loading...
Sunday, 23 March 2014

How to Create Contact Page Using Blogger Contact Form

Finally long wait is over after Google has launched it's new widget Contact Form. You can add it in sidebar or footer bar in your Blog template as a widget or you can also create a static Contact Page for Blogger using this widget.
So let's start making it

Step#1

■ Open Blog Dashboard
■ Open Layout → Click on sidebar blank widget box (Displayed in figure below)

■ Then open  More Gadgets option and add Contact Form Widgets in your Blog template.
■ Now hit Save button.


Step#2

■ Open Blog Dasboard
■ Open Template → Html Editor
■ Now expand Contact Form Widget 




■ Now erase the Highlighted syntax code.
■ Open Pages in your Blogger Dashboard.
■ Now Go to New page then open Blank Page.
■ Now simply add the below code in your HTML page (it is in right side ofCompose)

    HTML

    <div>
    We sincerely thank you for reaching out to us. We accept all sorts of valuable suggestions , feedbacks and your views about our blog.<<br />
    <br />
    Kindly fill the form below and contact us</div>
    <div class="contact-form" id="contact-form-1">
    <div>
    <form name="contact-form">
    Your Name : </form>
    </div>
    <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
    <br />
    <div>
    Your Email: <em>(required)</em></div>
    <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
    <br />
    <div>
    Your Message: <em>(required)</em></div>
    <textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
    <br />
    <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
    <br />
    <div style="max-width: 650px; text-align: center; width: 120%;">
    <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>

    Now hit Publish button and You are done.

    0 comments:

    Post a Comment

     
    Toggle Footer