Adsense

Announcements Blogger News Blogger SEO

Blogger Templates Blogger Widgets Blogging Tips

facebook

Image Effects Other Tricks

Template Hacks

Twitter

Create Separate Contact Page in Blogger

5/17/2013 02:58:00 AM Friday, May 17, 2013Template Hacks SHARE & COMMENT 31 Blogger launched its official version of the Contact Form Widget but, it works only on the Blogger Sidebar. If you dont want to add the contact form to your Blogs sidebar but want it to appear on a specific page, then this tutorial will help you out. I didnt want the contact form to appear every where on my blog. So I have moved it to a separate Contact Me Page

How to move the Blogger Contact Form to a separate Page

Follow the below steps to move the Contact Form to a separate page. If you would like to see a demo, you can check out my Contact page. 1. First, add the Blogger Contact Form Widget to your sidebar. (We will hide the contact form later in this tutorial, but you have to add it) . My previous tutorial on adding a blogger contact form widget will help you out. 2. Now create a new page in your blog

Copy the below contact form code block <form name='contact-form'> <div>Your Name : </div> <input class='contact-form-name' id='ContactForm1_contactform-name' name='name' size='30' type='text' value=''/> <div>Your Email: <em>(required)</em></div> <input class='contact-form-email' id='ContactForm1_contactform-email' name='email' size='30' type='text' value=''/> <div>Your Message: <em>(required)</em></div> <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='emailmessage' rows='5'></textarea> <p></p>

<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/> <div style='text-align: center; max-width: 450px; 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> While creating the Page, you have to switch to the HTML mode as shown in the image below. Then paste the above code into the post editor, disable the comments and publish your page.

3. Now go to Template > Edit HTML

and Jump to the ContactForm Code and expand with widget code

and then expand the main b:includable

Now delete the code highlighted below

so that it ends up like

Now we have prevented the Contact Form Widget from appearing anywhere on the sidebar but have kept the widget registered.Make sure that you don't remove the widget from the Layout Page. 4. Save the Template and its done.You now have a separate contact page on your Blogger blog :-)

Happy Blogging!

31 comments : 1. Anish PanickerMay 17, 2013 at 12:02 PM Superb I definitely try this....... Reply 2. DhanmejayaMay 17, 2013 at 12:48 PM Great post. After searching 5 hours now I have got the real trick to applying Blogger official widget to Blogger pages. Reply 3. Mack SeeMay 17, 2013 at 3:47 PM Thank I will also try it in my blog. Reply 4. Claudya RizhmanMay 17, 2013 at 8:03 PM Ty! Reply 5. sreekanth boddireddyMay 17, 2013 at 11:53 PM Thanks a lot man .....I have added it on my blog. With this my blog has completely turned into a professional blog Reply 6. Char MesanMay 19, 2013 at 10:58 AM you for this. stuff....., man

Wow, I did it! Thank you so much. My blog - charmesanwrites.blogspot.com.au - looks so much better for adding the contact form as its own page! Reply 7. Sauhard DobhalMay 20, 2013 at 6:29 PM tnx yr Reply 8. BibleProphecyBlog.comMay 23, 2013 at 4:58 AM How can I change the color of the 'send' button? Reply Replies 1. aneesh josephMay 23, 2013 at 12:52 PM Add the below CSS to Template Designer > Advanced > Add CSS contact-form-button-submit background-color: background-image: -webkit-gradient(linear,left { #4d90fe; top,left

bottom,from(#4d90fe),to(#4787ed)); background-image: background-image: background-image: background-image: background-image: border-color: filter: -webkit-linear-gradient(top,#4d90fe,#4787ed); -moz-linear-gradient(top,#4d90fe,#4787ed); -ms-linear-gradient(top,#4d90fe,#4787ed); -o-linear-gradient(top,#4d90fe,#4787ed); linear-gradient(top,#4d90fe,#4787ed); #3079ed;

progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe', EndColorStr='#4787ed'); } .contact-form-button-submit:hover background-color: background-image: -webkit-gradient(linear,left { #000; top,left

bottom,from(#000),to(#000)); background-image: background-image: background-image: background-image: background-image: border-color: filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe', EndColorStr='#357ae8'); } -webkit-linear-gradient(top,#000,#000); -moz-linear-gradient(top,#4d90fe,#357ae8); -ms-linear-gradient(top,#000,#000); -o-linear-gradient(top,#4d90fe,#357ae8); linear-gradient(top,#4d90fe,#357ae8); #2f5bb7;

The second part is for styling the button when someone hovers the mouse over it.You will have to change the hex color codes to change the color Reply 9. Kier BrookMay 23, 2013 at 5:35 AM works a treat. Thankyou Reply 10.

AnonymousMay 23, 2013 at 5:00 PM does not work, i have problem with permalink page, wont show ! Reply 11. CheetalmMay 29, 2013 at 7:18 PM Wow !! That worked like Charm

See on my Blog. Reply 12. storieriflessioniMay 30, 2013 at 1:41 AM Thank Jan Reply 13. May 31, 2013 at 6:38 PM May I know where is the email sending to? Or did I missed out any configuration step to set up my email address ? Cause I had tried many times but yet didn't received any of them in my mailbox. Reply Replies 1. Troy ValdezJune 2, 2013 at 12:40 AM There's no need any configuration though. Please check it again, all emails are sent from google (not from "as we stated at email field" Reply 14. balaji BossJune 6, 2013 at 5:40 PM It really awesome and simple, not confusing yet i ever seen, you! It seems good... :)

Reply 15. Evolutionary RetreatsJune 8, 2013 at 2:33 AM Hi Great tip, thank you

Can you edit the code so that it emails a different email address? Reply Replies 1. aneesh josephJune 8, 2013 at 1:30 PM You can't amend the email address by editing code. If you want the email to be sent out to another address, add that email as an Admin of your blog. Add a new author from Settings > Basic > Add Authors.Once the author accepts the invitation, mark him as admin. All admins will be copied in the emails sent via the contact form Reply

16. ChristineJune 10, 2013 at 5:31 PM I have followed the instructions and have the contact box now in a "Page", however the widget outline is still showing where I originally placed it, albeit empty. How do I get rid of that box? Reply Replies 1. aneesh josephJune 14, 2013 at 3:02 AM Go add to Template the below > Customize CSS there, > and Advanced > Add to CSS Blog

click Apply

#ContactForm1 {display:none;} Reply

17. ADESANMI ADEDOTUNJune 12, 2013 at 6:01 PM Can't find the contactform1 in my blog Reply 18. Hans WerksmanJune 13, 2013 at 6:53 PM I have the same issue.

http://werksman.blogspot.nl/ It's on the bottom right of the page. Reply Replies 1. aneesh josephJune 14, 2013 at 2:59 AM Go add to Template the below > Customize CSS there, > and Advanced > Add to CSS Blog

click Apply

#ContactForm1 {display:none;} Reply

19. Milena VeenJune 15, 2013 at 9:56 PM This was Thank you! Reply 20. Ayush YadavJune 17, 2013 at 12:15 PM I love you bro. Reply so helpful and easy to follow!

21. NatasjaJune 18, 2013 at 3:03 AM hm, when I try to click "send" nothing happens. Reply Replies 1. aneesh josephJune 22, 2013 at 12:48 AM add it to your blog and let me know so that I can have a look it where it's failing Reply 22. Rey LandrianJune 18, 2013 at 11:24 PM This is great thanks ! Reply 23. Anandha RajaJune 19, 2013 at 2:17 PM its possible to add image verification to prevent from spam, and adding extra field like phone number, select one of the choice from drop down menu? etc.. Reply 24. Around the kitchen tableJune 21, 2013 at 12:36 AM Thank you sooo Any ideas how to Thanks xxx Reply 25. Joan DavisJune 21, 2013 at 3:16 AM much for change the size in sharing of the this whole mate! form? advance!

Fantastic! Thanks so much! Reply Newer PostOlder PostHome Subscribe to: Post Comments ( Atom )

Search this Sit

Advertise Here

JOIN OVER 45,000 BLOGGER USERS

who get fresh updates from Blogger Plugins!
Your email Add Subscribe

Email Facebook Google+ RSS Twitter + More

advertise here

How to add Contact Form Widget to Blogger - Official

5/17/2013 01:17:00 AM Friday, May 17, 2013Blogger Widgets

SHARE & COMMENT 14

The long wait is finally over and blogger has come up with its own contact form. Now you no longer have to rely on 3rd party Contact form solutions. Blogger has added a new Contact Form Widget which will fit into your Blogs sidebar. You can also add the same contact form on a separate page and customize it if you want to. Adding a contact form to Blogger is now really easy. Below steps will guide you in adding the contact form as a sidebar widget.

Why should I add the new Blogger Contact form

Visitors can easily drop a message to you straight from your blog. You dont have to reveal your email address to the web to provide users with an option to contact you.If you like getting suggestions, queries or any other feedback from the users, make sure that you add the contact form to your blog. Its really easy to add the form and doesnt require any 3rd party code to be added to your blog.

How to add the contact form to Blogger

Login to your Blogger Dashboard and Navigate to the Layout Page Click on the Add a Gadget Link and select More from the left Menu. You can add the add the brand new contact form the right side list

You can set an appropriate title for the Gadget and Save it.

Once its done, you should see the slick and clean Contact Form added to your Blogs sidebar.The contact form has the below input fields 1. Name Name of the reader who is sending you a message 2. Email Email address of the reader who is sending you a message 3. Message The message which the reader wants to send to you.

4. Below is the screenshot of the Contact Form Widget added to one of my test blogs.

The Contact form has validations in place and Error messages will be displayed in case the user misses out the email address or message. Thought the form doesnt have any captcha validation,it is less likely to be attacked by spam bots as the send button is triggered by JavaScript. When the reader sends you a message via the contact form, you will receive it straight in your inbox. Copies of this message will be sent to each Admin user of the Blog. Below screenshot will give you an idea of how the message will look

like. You can directly reply back to your reader from you email. If you want to move the Contact Form to a separate page, then checkout the tutorial on creating a separate contact page for blogger.

You can change the look and feel of the contact form by altering the CSS styles. We will try to publish another tutorial which will help you in customizing the contact form. You can see a slightly customized version of the contact form widget on our Contact Page. If you have any further queries on adding the contact form, do let us know and we will be happy to help. You can reach us via comments or the Forum Happy Blogging!

14 comments :
1. Ekene IlochonwuMay 17, 2013 at 3:50 AM How can I add this form to any page or post of my choice?. I mean how can I get the code? Reply Replies

1.
aneesh josephMay 17, 2013 at 3:54 AM please refer to the latest post on this blog -

http://www.bloggerplugins.org/2013/05/create-separate-contact-page-forblogger.html Reply 2. Lily SeymourMay 17, 2013 at 10:31 AM I added it to one of my blogs but I think it's a little large on average. Reply Replies

1.
aneesh josephMay 18, 2013 at 2:27 PM if you think that it's too big for your sidebar, you can move it to a separate page. Tutorial link is there to the end of this post. Reply 3. Nelson GodstimeMay 17, 2013 at 11:27 AM really nicee Reply 4. Rohan ModMay 19, 2013 at 12:53 AM It was most awaited as i was using third party widget in my blog because of unavailability of contact page and third party contact page form always comes with limitations which is not good for me.and finally blogger itself launched it.thanks to google.One quaetion can i add it to a separate page then adding as a gadget. Reply 5. ayman djebaliMay 28, 2013 at 5:56 AM How can I add this form to any page,Rather i would put the widget in http://bbloggertutorials.blogspot.com/p/contact-me.html Reply Replies

1.

aneesh josephMay 28, 2013 at 12:17 PM please read the last part of the post or the previous comments. Reply 6. Matei IulianJune 5, 2013 at 3:58 PM Hi How to force this Contact Form Widget to send to another email....(no email Blogger). Reply Replies

1.
aneesh josephJune 6, 2013 at 2:06 AM Add a new author from Settings > Basic > Add Authors.Once the author accepts the invitation, mark him as admin. All admins will be copied in the emails sent via the contact form. Reply

7. AdmiratorKJune 5, 2013 at 11:49 PM Welcome. Question: I put in my blog >> widget Contact Form. Can I put another adress email ? >> to redirect messages . Where? How? Reply Replies

1.
aneesh josephJune 6, 2013 at 2:06 AM

Add a new author from Settings > Basic > Add Authors.Once the author accepts the invitation, mark him as admin. All admins will be copied in the emails sent via the contact form Reply 8. Victor GiangJune 18, 2013 at 3:03 PM I have put it up on my blog, but when i test it out and click send nothing happens Reply 9. khansconcepts KJune 19, 2013 at 4:06 PM good Reply