How to Add Blogger Contact Form to Specific Pages Without Coding Skills
After a few days back, we’re discussing on the Blogger contact form. In 2013, Blogger acquainted new gadgets for users. In initial days 2013, they released Wikipedia search box gadget and then official contact form for blogger. After updating the Blogger template editor, many people joined to Blogger and most of existing users were engaging in Blogging on daily basis.
You know the importance of the contact form in various situations, right? It has become an indispensable widget that every website and blog must have. The Blogger contact form widget has some features such as working speedily (send message to email account of blog owner immediately), simple to work (no word confirmation) and littleness (can be used in whether fixed or fluid templates) etc.
A few weeks before, one of my friends on Facebook asked me that can I use Blogger contact form widget in a post page or stand-alone page (static page). So, this post is for you who intend to add a contact form in separate pages (add contact form to blogger page or posts). Let’s start embedding the official contact form widget into a stand-alone page in Blogger.
Add contact form widget to Blog
You should add the contact form widget so that showing it on a specific page. If you have already installed it, please ignore these steps and who haven’t added official blogger “Contact Us” widget can follow instructions in below.
1: Sign into your Blogger account and go to Layout.
2: Now click on “Add a Gadget” link and “More Gadgets”.
3: Now find “Contact form” page element and click on it.
4: If you want to change the title of the contact form widget, so change it as you need. Then click on “Save” button.
Hide contact form widget in Blogger
The next thing to do is hiding the official blogger contact form widget by showing in the sidebar. So, we have some methods to do it.
One method is removing the contact form HTML code. Although one day when you want to show it again in the sidebar, you might be confused by asking “How do I add the removed contact form widget code to my blog?”. It is easy to add. But you have to do some works.
So, I will show how you can hide contact form gadget using CSS. Whenever you want to show contact form, you just need to remove the piece of CSS code from the template.
Now go to Template and click on the Edit HTML button.Then paste below code just above of ]]></b:skin> code in the blogger template.
display: none ! important;
Add Contact form widget on a Static Page
Now we’re going to add the contact form widget to a stand-alone page. Follow below steps and make necessary customization in the after-mentioned steps.
Step 1: Click on ‘Pages’ tab on the left-hand side.
Step 2: Now click on New page >> Blank page.
Step 3: Switch to HTML mode and click on ‘options’ tab on the right side. Then select the “Use <br> tag” option in the Line Breaks section like below.
Step 4: Now paste below contact US form html code for Blogger on the empty Edit HTML field.[sociallocker id=1471]
Your Name:<br />
<input class=”contact-form-name” id=”ContactForm1_contact-form-name” name=”name” size=”30″ value=”” type=”text” />
<span style=”font-weight: bolder;color:red;”>*</span><br />
<input class=”contact-form-email” id=”ContactForm1_contact-form-email” name=”email” size=”30″ value=”” type=”text” />
Your Message: <span style=”font-weight: bolder;color:red;”>*</span><br />
<textarea class=”contact-form-email-message” id=”ContactForm1_contact-form-email-message” name=”email-message” cols=”25″ rows=”5″></textarea>
<input class=”contact-form-button contact-form-button-submit” id=”ContactForm1_contact-form-submit” value=”Send” type=”button” />
<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>
- Change highlighted words with relevant your own words.(i.e: for Your Email,Type your Email address)
- Replace Required message instead of red color star symbols(*)( i.e: (required) )
- Change Send with wished text to be shown on Submit button.
Note: Don’t overuse or add new HTML codes for Blogger contact form code. I have seen many bloggers get troubled by editing and adding new fields to Contact form. You’ll not be able to receive values/inputs for your fields, also your contact form will not work in static pages well.
Step 5: The most important step in this tutorial. It’s the save your template!
Troubleshooting : Blogger contact form Not working !
Some bloggers like mike complained that blogger contact form not working on their blogs. In some occasions ‘Send’ button does not work correctly and so message would not be sent. I have resolved the problem with embedded-Contact form on blogger post pages and stand alone pages. Please check out our demo page so that understanding blogger contact form works perfectly yet in blogger 🙂
Now let’s look at how to troubleshoot this problem easily without confusing your mind.
- Go to Template page and back up your template.
- After doing that, click on ‘Edit HTML’ button and find contact form widget code.You can do this easily by clicking on ‘Jump to Widget’ drop down button and choosing on ContactForm1 id. Now you will see a block of HTML code similar to below.
<input class=’contact-form-name’ expr:id=’data:widget.instanceId + "_contact-form-name"’ name=’name’ size=’30’ type=’text’ value=”/>
<data:contactFormEmailMsg/> <span style=’font-weight: bolder;’>*</span>
<input class=’contact-form-email’ expr:id=’data:widget.instanceId + "_contact-form-email"’ name=’email’ size=’30’ type=’text’ value=”/>
<data:contactFormMessageMsg/> <span style=’font-weight: bolder;’>*</span>
<textarea class=’contact-form-email-message’ cols=’25’ expr:id=’data:widget.instanceId + "_contact-form-email-message"’ name=’email-message’ rows=’5’/>
<input class=’contact-form-button contact-form-button-submit’ expr:id=’data:widget.instanceId + "_contact-form-submit"’ expr:value=’data:contactFormSendMsg’ type=’button’/>
<div style=’text-align: center; max-width: 222px; width: 100%’>
<p class=’contact-form-error-message’ expr:id=’data:widget.instanceId + "_contact-form-error-message"’/>
<p class=’contact-form-success-message’ expr:id=’data:widget.instanceId + "_contact-form-success-message"’/>
- Remove above code and Save your template.
- You’re done!
FAQ – Frequently Asked Questions: Contact Us Form for Blogger
I have been asked a lot of questions about Blogger contact form and so i thought it is good to list a few frequently asked questions about contact form Blogger. If you have any further question regarding Blogspot contact form, please use below comment form to share your questions and so I can answer them as fast as I can.
Question #1: Can I add custom fields to Blogger contact form page ?
Answer: No, you can’t add custom fields such as phone number, mailing address and file upload methods to the contact form in blogger. BlogSpot uses special codes known as data tags to transfer data. So you can’t handle those tags as you want.
Question #2: How do I change the permalink of Blogger contact page ?
Answer: If you have already added contact form to static page, you can’t change the Blogger contact page URL.
The best way to add a custom permalink such as myblog.blogspot.com/p/contact-me.html is that creating a new static page and install Blogger contact form html code. Before publishing the page, add a page title like contact me, contact us or contact to make it as the permalink. ex: If you added the name as contact me, your blog contact me page address would be, yourblog.blogspot.com/p/contact-me.html or www.yourblog.com/p/contact-me.html.
Question #3: Can I add Blogger contact form to a post page, instead of stationary page ?
Answer: Yes, of course. You can add contact form to blogger post page. There are no differences, despite blog post pages index fast, list in Archives section and have a published date.
Question #4: Why should I add a contact form to Blogger ?
Answer: Adding a blog contact page to your website will give a professional look and also make it easier people to contact you direct on your website.
Question #5: How do i include Blogger contact page in Google site links?
Answer: You can’t specify what pages should be listed on Google site links. But, you can demote existing site-links through Google webmaster tools account.
The best way to include your blog contact page in Google site links is that adding a horizontal menu bar to Blogger.
Question #6: What’s the SEO effect of Blogger contact form page ? Does it decrease my search traffic?
Answer: There’s nothing SEO effect of using a contact page in Blogger. You increase your credibility, professionalism and get more people to treat your site as a BRAND.
If you want to increase website traffic for free, make sure you read my ultimate guide to Blogger SEO – The Best On-Page SEO Tips for BlogSpot Blogs. That tutorial includes valuable SEO tips and tricks you must follow, if you want to stand out from other thousands of crappy BlogSpot blogs out there.
Need Help… ?
I have discussed about Blogger contact form in my previous posts. This is another Blogger trick to add a contact form widget in separate pages. If you encountered any problem, leave here a comment to know us. Also, if you want some helpful resources to increase your BlogSpot blog exposure and traffic, read below articles.
- Custom Domain Name For Blogger – Become a ProBlogger
- Do you make this HUGE Mistake? – Not Capturing Your Readers?
- Search Engine Submission Tutorial for Blogger – Drive Target Traffic From Search Engines
Would you like this tutorial? So make sure you spread your love from sharing this tutorial among your friends and relatives on social networks. They would be happy to learn how to add Blogger contact Form to specific pages just like YOU.