Multiple feedburner email subscriptions in one form

Some blogs or web sites can have more than one feed sources mainly for allow visitors to stay informed only in specific arguments. Feedburner service is the best way for accomplish this goal since is easy to configure and offer some additional features very useful to have in the site. One of the most used feature is the email subscription service. This feature must be manually activated in the feedburner control panel and allow to create a sort of newsletter sent to all subscribers when a new feed is created.

Screenshot of Feedburner settings panel

Once you created a feedburner links to your feed sources you can easily put them in your site and inform the visitors regarding the possibility to use them in their preferred feed reader application (like Google Reader for example). A little bit more complicated, always talking about a situation with more than one feed source available, is the management of the mail subscription service. Feedburner settings panel give you a ready to use HTML code to insert in your page. This code show a form where a visitor can subscribe the e-mail address and proceed with the next step of the subscription process (a pop up windows asking user to insert a security code). If you have only one feed there is no problem. You can put this code in your page without any kind of modify, it's ready made and work very well. The problem can occur when you have more than one feed. In this case, show two or more subscription form for allow visitor to choose which feed channel subscribe could be not a very elegant solution. My solution was to modify the HTML code for create a new drop down list control allow to choose the feed channel to subscribe in. The "RSS News" form showed in this blog is based to this solution, so you can have an idea regarding the final result of the modify.

The standard form HTML code provided by feedburner is the following:

<form style="border:1px solid #ccc;
  padding:3px;text-align:center;" 
  action="http://feedburner.google.com/fb/a/mailverify" 
  method="post" 
  target="popupwindow" 
  onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=yourfeed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
   <p>Enter your email address:</p>
   <p><input type="text" style="width:140px" name="email"/></p>
   <input type="hidden" value="yourfeed" name="uri"/>
   <input type="hidden" name="loc" value="en_US"/>
   <input type="submit" value="Subscribe" />
</form>

Where yourfeed is the feed name you chosen when you created the feed in Feedburner. This code generate a form like this:

The code is very simple. Basically if we want to make this form a little more "dynamic" we need to give possibility to users to choose the "yourfeed" name they want to subscribe. Checking the code we can see this param is specified in the form item named "uri". In the original code this param is fixed, we need to switch then into a selectable field. Let's suppose to have three feed channels available for subscription and we call them feed1, feed2 and feed3. The modify we need is to substitute the fixed param "uri" with a drop down list having the same name but with different selectable options:

<form style="border:1px solid #ccc;
  padding:3px;text-align:center;" 
  action="http://feedburner.google.com/fb/a/mailverify" 
  method="post" 
  target="popupwindow" 
  onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=yourfeed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
   <p>Enter your email address:</p>
   <p><input type="text" style="width:140px" name="email"/></p>
   <select name="uri">
     <option value="feed1">This select feed 1</option>
     <option value="feed2">This select feed 2</option>
     <option value="feed3">This select feed 3</option>
   </select> 
   <input type="hidden" name="loc" value="en_US"/>
   <input type="submit" value="Subscribe" />
</form>

After this change the form should appear like this:

Now the visitors can select the feed channel they are interested in. However, if you check again the code, you'll note there is another point where the "uri" value is requested. The following part of code

  onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=yourfeed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

is a javascript code opening a pop up window when the button "Subscribe" is pressed. This new window allow to insert a security code and proceed with the subscription process. The content of the window come from an URL passed by the code that need to contain also the name of the feed channel. For have the URL containing the feed name just selected from the drop down list control we can use an additional javascript instruction modifying the code as follow:

<form style="border:1px solid #ccc;
  padding:3px;text-align:center;" 
  action="http://feedburner.google.com/fb/a/mailverify" 
  method="post" 
  target="popupwindow" 
  onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri='+this.uri.value, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
   <p>Enter your email address:</p>
   <p><input type="text" style="width:140px" name="email"/></p>
   <select name="uri">
     <option value="feed1">This select feed 1</option>
     <option value="feed2">This select feed 2</option>
     <option value="feed3">This select feed 3</option>
   </select>
   <input type="hidden" name="loc" value="en_US"/>
   <input type="submit" value="Subscribe" />
</form>

This new change get the current value of "uri" control and pass it as part of the window URL. This allow to have it working based to the current selection of the feed channel.

As usual hope that these solution will can help you.