How to add a Contact Form to Blogger

How to embed an email signup widget in blogger Its really easy, and I can explain it in 5 steps: Its really easy, and I can explain it in 5 steps:

1. Create an account in ContactUs.com (Free) 
2. In the admin panel go to form settings and in there press create form. 
3. Customize the form to your liking. ( Delivery options, design, contact information, about us section). When you are done, click save and publish.
4. Click on form settings again and you will see the form you created, press: Get Code, and copy the code. 
5. Paste it in a html/javascript widget where ever you want in the website. *if you want to skip the tab, change "contactus.js" to "inline.js" in the code.

And you are done, if you need help on this check this article out:

• Getting the Website code for a form: 
• Pasting your website code

Or just drop a comment :)

Also added some detailed instructions on How To Install And Customize A Contact Form In Blogger

Adding a contact form to your blogsite is one of the most important elements for its
growth. With a contact form, readers will be able to send you feedback, as well any
other concerns which will be vital for further development of your blog.
For anyone using Blogger as their blog host, adding a contact form has never been
easier. Just follow these very simple steps, and you’ll be having your very own,
customized contact form for anyone to see.

NOTE: Although Blogger already has the feature to create your own contact forms, 
creating a contact form this way allows you to have more customization features 
that are lacking in Blogger’s own contact form, and it’s also much easier this way.

Generating A Contact Form Via ContactUs.com

NOTE: Creating an account on ContactUs.com automatically allows you to generate
a form without much tweaks. But if you instead selected a “Newsletter” form by 
default, then the following steps will help you add an additional contact form to your
blog.

1. First, log on to your ContactUs.com account to go to your dashboard, then select “Form Settings” tab, located on the left side of the page.         
2. Once you select the “Form Settings” tab, you can see that, by default, the form option is set to “Newsletter”. From here, go to the upper-right corner of the page and hover over the “Add Form” button. From there, a drop-down menu will appear, and you can choose from several different types of forms available. For this purpose, you need to select “Add Contact Us Form”. 
3. After you select a form, it will take you directly to the "Configure Form" page. In here, you can customize all aspects of your contact form however you please, from the color of the form, to how it behaves. You can even customize the aspects of your contact form so that it’s highly optimized for mobile devices, should you want a responsive, “mobile-first” blog site. Once you’re satisfied with the settings, don’t forget to save and publish your form. 
4. After you’ve saved your form, you’ll be taken to the next page.Simply click on “Get Code” (marked by an arrow on the image), to generate the code of your form. If you need to make any more last-minute changes to your customized contact form, simply click on “Configure Form” again. Once you’ve done that, you’ll be taken to this page.  
5. Just simply copy the code generated on the first line, then page it on your Blogger template, and you’re done! If you wanted to test your blogsite to see if your contact form’s installed and implemented correctly, simply paste the URL of your blogsite where you implemented the code (shown in the image above), and the click “Check Code Implementation”. You might also want to click on and read about the quick primer on HTML, especially if you’re not experienced with HTML.

Adding Your Contact Form To Your Blogger.

Blogger’s unique “Gadgets” feature allows you to add any third-party code to your blog in the easiet way possible. This is the easiest way to add your generated contact form.

1. Log in to your Blogger account, which will automatically take you to your dashboard.
2. On the dashboard, select “Layout”, then choose “Add a Gadget”, then select “HTML-Javascript”.
3. Copy the contact form code that’s generated by your ContactUs.com account,then paste the code into the “Contents” field.
4. If you wanted a title for your Blogger gadget, you may put in in the same field.
5. After you’re done, click on “Save”.
6. Drag-and-drop your newly-created gadget to where you wanted it to be on your blog. It could be on one of your posts, or in could be on your header, footer, etc.
7. Once you’re satisfied with the result, “Save” the layout, and you’re done.For more advanced users, you can also put the contact form code directly into a post, or directly into your template, by simply going to the HTML editor and pasting the code directly into the source, just before the <body> tag. However, this should only be reserved for advanced users, as editing the template directly might break off some functionality in your blog.

 It’s best that you know the full responsibilities of directly editing your blog template, should you choose to go over this method. Also, always make a complete backup of your template’s source code by copy-pasting the entire source and saving it in Notepad.