Home » Blogger » How To Add Blogger Contact Form Into A Page

How To Add Blogger Contact Form Into A Page

In last tutorial, I showed you how to add Blogger’s official contact form to your Blogger blog. You can also add Blogger contact form into a page of your Blogger website. It will work absolutely fine and it will not break anything. Let me show you how:

[alert style=”red”]Note: In order to add contact form to a page, you first need to add the contact form widget to the sidebar of your Blogger.[/alert]

Hiding Contact Form From Your Sidebar

First, we need to hide the default contact form from your Blogger’s sidebar widget. Navigate to your Dashboard > Template > Edit HTML. Search and paste this code just above ]]></b:skin>:

#ContactForm1{
display: none !important;
}

Save your template.

Adding Contact Form To A Page

Now, we will add the contact form to a static page of your Blogger blog. Navigate to your Dashboard > Posts, and click on New Page and select Blank Page.

Now, in your blank page, click on HTML option to switch to HTML editor mode. Add following code and publish your page:

<form name='contact-form'>
<p></p>
Name<br />
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' value='' type='text' />
<p></p>
Email
<span style='font-weight: bolder;'>*</span><br />
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' value='' type='text' />
<p></p>
Message<span style='font-weight: bolder;'>*</span><br />
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' value='Send' type='button' />
<p></p>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

That’s it! You can also customize the contact form with custom CSS styling or jQuery.

60 thoughts on “How To Add Blogger Contact Form Into A Page”

  1. hey hardeep i want to add differnt buttens in my blogs like contact us , categories, tools …. but dont know how to .. so can you plz plz plz help me ..

  2. Why hide the widget? Does the contact form on a page not work if you don’t have the widget added on a sidebar? Why not just DON’T add the widget to the sidebar. I don’t understand.

  3. yes..got the query after 4 hours..don’t know what the issue is..I have added a Mobile field in the form, but its data is not coming in the form..can you please check this also..thanks

      1. Hi Hardeep,

        Can your remove my previous comment. I have redirected blog to a website, so its giving problem. I would be thankful if you can remove my previous comment given as :

        “annu
        ON AUGUST 28, 2014 01:57:45
        i tried using the widget but , send button is not working…don’t know where query is going..chek that form in the website link.
        (link removed)”

  4. nice little ninja trick there. i like these sneaky work-arounds.

    fyi, you can safely delete the classes from the inputs so they don’t inherit the css from blogger. beats overriding all of their styles.

    i have not figured out how to keep the javscript from changing the send button.

    oh, and be sure to add label tags and change the email field input type to email.

  5. I Tryd, and i have a contact form now, but it’s not working. I’m clicking on the send button, but it does nothing. I’m looking in my gmail inbox but also there, nothing. Help? Thanks …

  6. i follow your steps..its working on normal blog like testblog.blogspot.com..
    but not working with custom domain..i was tested on 2 custom domains but no result..i was tested on to blogger blogs, it was working fine…y contact form not working with custom domain? please help me

    1. Hi Hardeep,
      An update on my earlier message.
      I switched from default mobile format to desktop template on mobile devices and the contact form page now works on my smart phone.
      I’d be interested to know if it possible to fix the contact form so that it works in default mobile format but I am grateful for your information about to get it on a page and will send a donation.
      Amanda

      1. Hey Amanda,

        First of all, thanks for the donation :)

        Second, it appears to me that Blogger doesn’t load JS we need to trigger the contact form, so that’s why it doesn’t work on mobile devices. Using a responsive theme will solve this issue :)

  7. Greetings from England.

    I’ve followed your instructions exactly. All looks the way you describe. But no messages are arriving – it’s been over a day since I sent a couple of test messages via my contact page.

    Yes, I have the contact widget hidden.

    Yes I have a custom domain.

    Any help appreciated.

  8. Hi, Contact form worked very well until a add a photo in my page. Now I deleted the page and create a new only with your html code and it dosn’t work too… I don’t understand

Leave a Comment

Scroll to Top