next
Helplogger
Home
Blog DesignWidgets SEO Menus Po ...
New Blogger Widget: Contact form - Change Style & Install in a Static Page
58 comments
Just a few days ago, Blogger introduced a new widget. It is about a contact form that you can add to your blog easily. It is very basic, because - at least for now, does not permit incorporating files or send anything other than plain text.
The contact form for Blogger has the following features:
Field for the user name
Field for email
Field for the message (textarea)
Submit Button
Screenshot
The design is simple and the text colors inherit the section where you add it. At the moment, this widget has no configuration options and is not available for dynamic views.
How to Add Contact Form to BloggerTo add it to your blog, just select the Layout tab, then click on Add a gadget in the section you want to show, for example, in the sidebar. Then, select theMore gadgetstab and add theContact Formgadget.
Styling Contact Form
As the background is transparent, the form will integrate well, aesthetically speaking, but nevertheless it is easy to modify using Style Sheets (CSS) to the appropriate selectors. Here's an example:
/* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}
This is how it will look like after applying the style:
To add this style, go toTemplate>Edit HTML, click on the sideways arrow next to ... and paste the code just above]]>(press CTRL + F to find it):
How To Add Contact Form In A Static Page
First step is to add the Contact Form gadget (Layout) and second, to edit the template (Template > Edit HTML) to remove most of the gadget. You have to search for the id "ContactForm", expand the widget by clicking on the black arrow on the left (same with the includable) and then delete the part that I have colored in red (see below):
Part to be removed:
Messages will be sent to the same email that you have registered in Blogger.
Here's a demo pagewhere you can test it (it is an account that I don't use, so don't expect reply).
That's it! If you have any questions or comments please post below.
Like
14
Random Posts
Numbered comments on threaded comments for Blogger/Blogspot02/06/2012 - 56 Comments
Related Posts Widget with Thumbnails and Summary for Blogger31/03/2013 - 79 Comments
Create A Rollover Image Effect (change image on mouseover)31/05/2012 - 55 Comments
Related Posts:
Add floating social media sharing b...
Add A CSS Animated Share Button on ...
Orbit - jQuery Image Slider Plugin ...
New Blogger Widget: Contact form - ...
How to Add Different Backgrounds In...
58 comments:
GhOsT^ 5/24/2013
Soo nyc Tut Dear Thanks for share :) Reply
Pawan Paudel 5/26/2013
Now days Google is improving a lot in blogging platform. This is one of the last improvements in bloggers. Many bloggers are expecting something lacking in the blog. i.e none other than the contact form. Now no need to depend on the 3rd party codes.
STILL MISSING SOMETHING Reply
Replies
Satya P. Joshi 3/12/2014
yup #PAWAN you are right... Now no need to depend on the 3rd party codes. but some time...........
Naomi Ahern 5/27/2013
This worked perfectly. Thank you for the coding and tips. Reply
Rouble Rust 6/03/2013
Thank you, it works :) Reply
Dan zugravul 6/10/2013
Thank you! Reply
NAFEES ALAM 6/19/2013
great...... it worked, thanks mate :) Reply
Polski Geek 6/19/2013
Thanks! Reply
afiev dewanta 6/26/2013
work perfectly, thank you Reply
Hassan Al Mehdi 6/26/2013
brother, in my blog Contact Form widget "send button" is not working, i mean there no action after pressing "send button", please help me..
i think the issue is with the template of my blog..
Please have a look http://www.idiotsfree download.com , m sure you can fix the problem.
Thanks..... Reply
Replies
Değmesin Yağlı Boya 9/06/2013
I have the same problem to SEND button doesnt work ı'm about to remove thıs :(
Đặng Việt Hoàng 10/06/2013
Same problem, nothing action when i press send button :(
Pearlzin Ashez 6/29/2013
Not working on mine...any help? The button appeared but no action is taken when clicked on. Thanks Reply
Replies
shivansh verma 10/17/2013
ya you have problem to your template change your template to another once. :)
Infoseye 7/05/2013
Thank you it worked! Reply
Umar Rashid 7/14/2013
Thanks for sharing nice tips, worked well for me. Reply
Adeel Amjad 7/14/2013
Hello when i added the styling Contact Forum code above the ]]> then it makes my sider adsense to stop apearning at the HOME page ? :( can you please tell me how to Fix it ? Reply
John J. Villa 8/23/2013
I m doing exacltly as you said but the form doesnt show up, what I m I doin wrong? Reply
John J. Villa 8/23/2013
After I remove the part In Red as described and after adding the page with the code you show, the contact form is not visible :'( Reply
Anonymous 8/31/2013
OMG, thank you so much this helped me SO, SO, SO MUCH! :) I can't stop thanking you! Reply
Photography 8/31/2013
It works perfectly for me! Thanks so much for your effort! Reply
Miriam 9/07/2013
thank you very very much! it really helped me out! Reply
Raj Mehta 9/08/2013
Hey there, instead of taking all this trouble to hide the sidebar widget, we can simply add a CSS code that will hide the widget completely for us...
#ContactForm1{display: none !important;}
It'd be great for your visitors if you update the post ;) Here is a complete tutorial on how to EASILY separate the contact widget. Reply
simranjit singh 9/09/2013
how to add this widget to only one page of our blog. Reply
Stephen Mayall 9/16/2013
Its not working with mine either send button does not work nothing gets sent I"ve followed these step impeccably as well as trying others from other posts and it still does not work. Reply
Umair Wasim 9/18/2013
thanks for the tutorial but what if I want to send the contacted person's reply not on the same email associated with blogger but on a different email address, say a hotmail or yahoo id which is my primary email id.
Any help is appreciated, thanks Reply
Urcia Ursh 9/23/2013
How can I adjust the width of the fields, the contact form is too wide for my widget area. I have tried everything but it wont change. please help. Reply
Ghost Rider 10/01/2013
Great contact form widget for blogger. I really like it. i will definately add it on my blog. Thanks for sharing with us and keep sharing Reply
Khalid Temuri 10/06/2013
From where I can check these messages, and how can I reply to those who tried to contact me? Reply
Ikhwanudin 10/15/2013
Dear helplogger, I made this and was working fine until I changed my email address. Please advise how to modify destination email address of this form? Reply
Greenman 10/21/2013
I want to change email receive mail from contact form, don't you? Reply
Giulia Mauri 11/02/2013
Please help me! i did everything just as described however i am not receiving any messages. what am i doing wrong? this is my site: http://11onlyloveisreal.b logspot.co.uk/p/blog- page_2.html thank you so much for your help! Reply
Lady G 11/04/2013
I have this widget but it does not work. Do you have any idea why? If so could you please give me detailed directions on what to do. Thank you :) Reply
Ethical hacking 11/07/2013
where to put CSS Code? Reply
Vertigo 11/15/2013
I added the CSS part directly into "Template > Customise > Advanced > Add CSS" and it is working like a charm ;) Thank you for the coding and tips. Reply
Sheikh Basit 11/17/2013
This is great! Thanks. Reply
Pavan Teja 11/18/2013
excellent and good one dear. i use it here www.psychtronics.co m/contact.html Reply
Miriam Mozrui 11/24/2013
Hi. Would you please have a look why the submit button on my blog at findingsynonyms.blog spot.com/ is not functioning. Thank you. Miriam Mozrui Reply
Miriam Mozrui 11/26/2013
Hi. I found a way around the problem i was having with the "submit" button. Thank you for the post.
Miriam Mozrui Reply
Code Nirvana 11/26/2013
That's great!
I will try thins @ Code Nirvana Reply
Krystle Lewallen 11/26/2013
Thank you, that was very helpful! Reply
Jasmine Harrison 12/20/2013
when someone completes a contact form, where does it send to? that pages email? or? Reply
Replies
vaibhav satwe 1/08/2014
Yes i have completed all tha process. and tested it with sample message..
you get message from user with his email id on your mail. its very easy method to interact.
check out my blog ==>> emobiledownloads
Haseeb Attari 12/23/2013
Good Blog Reply
Hamza Ourrach 1/04/2014
thanks
#goo.gl/cXESKK Reply
Sharon Lopez 1/12/2014
Thank you for this article. It helped me set up my contact page and it's working. However, the size remains the same. I am new in blogging so I am trying to learn through reading articles that could help set up a good one.
Here is my blog. http://successfulonlin edeals.blogspot.com/ Reply
Jasa Bikin Blog 1/13/2014
Wow, this article veri useful, well thank's for share. i can make it for my blog. Reply
Stefano Bruno 1/14/2014
Hi, work it. But when i try to "Submit" the message not work, i have disable all extension of Google Chrome, i have try with another Browser but no change Reply
DreamHome Designs and Services LTD 1/15/2014
submit button is not working for me Reply
Sony Hossain 2/04/2014
Dear Thanks for your post.. this is awesome! But you've not mentioned how to remove the blogger's default comment box on the contact page? This is important. I'm asking what you've done on your blog's contact section.
http://pchelp786.blog spot.com Reply
Ahsa Ishaq 2/15/2014
Jazak Allah (these words say muslims)
(May Allah Give reward you with goodness)
Thank you
Reply
Monalisaschatzli 3/11/2014
Hi my send button is not working it is saying sending but it is not sending. Can anyone help? Reply
Monalisaschatzli 3/11/2014
Got the widget contact form when send it is saying sending, but it is not sending how can I fix this? Reply
Anonymous 3/11/2014
Thank you so much for this!! I was really helpfull :) Reply
Kenneth Clutario Agudo 3/12/2014
The last step seems to be wrong since we will be pasting the html code on new blank page?? Not on edit html? need to find another tutorial Reply
Cristina Negrón 3/12/2014
Added the widget. Send button appears to be working (Displays "your message is sent"). But I message has not appeared in my inbox. test message. Any idea what's going on? Thanks so much for your reply. Reply
Sean Kimbrough 3/12/2014
Thanks for the code. Decided to keep the Contact Form in the sidebar. I want to keep reminding visitors to send a message/contact me throughout the entire site. check it out htp://equ ipmentmarketing.blogspot .com Reply
Usman Kurniawan 4/12/2014
not work in my template :( Reply next
No comments:
Post a Comment