How to embed an email signup widget in blogger

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.

Below you can find detailed instructions.

When the content of your blog is worthwhile, readers will surely be eager to get the latest updates from it. Not anyone has the time for opening up your blog everytime they wanted to get an update. That’s where the newsletter comes in. Especially when your blog gets a lot of inbound web traffic, setting up an e-mail signup form, or a newsletter, is essential because this allows your readers to instantly receive the latest updates to your blog, via their e-mail, without them having to check up on your blog each and everytime (and get disappointed when no updates are available). Using ContactUs.com, you’ll be able to set up your very own e-mail newsletter form with no hassle whatsoever. All you need to do is to follow these simple steps to add the signup form manually.

Using ContactUs.com To Create An E-mail Signup Form 

NOTE: ContactUs.com automatically generates a form of your choosing when you first signup and associate your site with it, including e-mail signup forms. If you choose a different type of form for this purpose, these steps will allow you to add it manually.

 1. Access your ContactUs.com dashboard by logging in to it, then select “Form Settings”, which is located at the lefthand part of the page.

2. Clicking the “Form Settings” tab will direct you to a page, where you can choose from several different kinds of forms available for your blog. By default, it’s set to “Add Newsletter Form”. For this purpose, you want to leave it as it is.

3. Click the “Configure Form” button located just below. This will then take you to a page wherein you can customize all aspects of your signup form, including its looks, its behavior, and most importantly, it's integration to your preferred e-mail marketing service. Once you’re satisfied with the conditions, don’t forget to save and publish your customized form.

4. Upon saving your form, you’ll be immediately taken to this page.

 You can then click on “Get Code” to retrieve the code which will produce your signup form, or you can click “Configure Form” once again, which will take you back to the customization menu, allowing you to adjust any last-minute changes to your form.

5. Upon clicking “Get Code”, you’ll be immediately taken to this page.

 The code generated for your form will appear on the first line. Simply copy the generated code, and paste it on the appropriate source code for your blog, and you’re done. If you want to check and see if the signup form’s installed correctly, you can enter the URL of your blogsite, and click “Check Code Implementation”. If you’re not familiar with HTML, you can click the link underneath, for you to know some of the basics of HTML.

Adding The Signup Form To Your Blog Different blog hosts have implemented different ways of adding third-party code to your blogs. So you can choose which ones that suit you.

1. Some blogs, like Blogger for example, allow inserting of third-party code directly via the dashboard menu, using a widget-based system. You can simply select the appropriate widget, which allows insertion of third-party code, then you can simply paste the generated code directly to it. The advantages of this is that it’s very simple, error-free, and allows you to move the widget to any place that you want in your blog. The disadvantages of this is that it lacks deeper customization options for advanced users, though this is often minor as ContactUs.com allows anyone to customize their forms however they see fit anyway.

2. You can also opt to paste the code directly into the source of either a single post on your even, or even the entire template. This allows for a much deeper integration of the code generated, as well as allowing users to further customize the dsignup form with more options. However, this method is best reserved for advanced users, as making direct changes to the source code can cause some errors on the page and may even break some functionality if done incorrectly, especially if working with the blog’s template. For safety reasons, before making any changes to the template, it’s best that you keep a backup copy of the original source code, by copy-pasting the entirety of it, and saving in onto Notepad.