Adding a Custom Feed Burner Form to your Website

Here at CIDD Web Design, we receive all kind of request for features needed in websites. One of the most common feature is the one to provide visitors with a form from where they can subscribe to receive updates. Even…

Here at CIDD Web Design, we receive all kind of request for features needed in websites. One of the most common feature is the one to provide visitors with a form from where they can subscribe to receive updates. Even sometimes this feature is requested only to capture emails and build a data base of visitors that later can be part of an email marketing campaign, a newsletter or any other type of promotion.

Google and its infinite tools is always a good place to start for a solution ready to use, and completely free.

Let’s to explain how to create a custom form where you can add to your website the feature to capture emails, and at the same timeĀ  to provide visitors with a daily update from your post. For our example we are going to use a website built on Wordpress.

1. First step is to create a simple form, so in your text editor you can use for example the following:

2. We need to create a Google Feed Burner account to be able to get some of the code that will make the magic in our form. So go to Google Feed Burner, and get your account.

3. Once you have created, and login in your account you need to make the following:

  • Add your feed address. It is something like http://www.mywebsite.com/feed/rss
  • Once you have made the previous step you will have 5 tabs, please choose “Publicize” to start making the changes necessaries for setup email subscriptions.
  • Click on “Email Subscriptions” and later “Activate” and you will be offered with the standard code from Feed Burner (copy this for further use).
  • Click “Save” at bottom.

4. From the code that you got from Feed Burner you need to copy the following lines:

..action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=your-account/latin', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">


Pay attention where it say:”your-account”, it should have the name of your account here (I just overwrite mine for this example).
5. Now we are going to integrate to our current and better looking form, and put everything together:

6. We need to add some CSS to provide format and style to our form

#form1 {
    float: right;
    height: auto;
    margin-top: 10px;
    position: relative;
    text-align: left;
    width: 375px;
}
.input_login {
    background-color: #D8D8D8;
    border: medium none;
    color: #666666;
    float: right;
    font-size: 11px;
    height: 22px;
    margin-right: 10px;
    padding-left: 10px;
    width: 250px;
}
.button_subscribe{
    border: 0 none;
    cursor: pointer;
    float: right;
    height: 22px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 84px;
}

Now you will have a customized Feed Burner Form for your users where they can subscribe to get daily updates.

Custom Feed Burner Form

NOTE: Later you can go to your Google Feed Burner account, and click on “Analyze” to download a CSV file with all your subscribers emails to be able to use in any email campaign you wish to implement.

Get in touch today

Get a FREE CONSULTATION to talk about how to increase your sales

More like this