Anyone know how to get FeedBurner email subscribe to validate?

[deronsizemore]

The FeedBurner email subscribe input form does not validate strict and I'm wondering if anyone has figured what to fix so that it validates, if it's even possible?

I read one solution that suggested a bunch of javascript but I'm not really a big fan of that.

[BPartch]

Looking at the code for it, you will have to remove all the target attributes, the onsubmit (i think) and add a fieldset and a legend maybe even a summary to the form tag (maybe even more).

I would just paste it in there and forget that it does not validate, cause it might not work after changing all that. :)

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=00000', '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="http://feeds.feedburner.com/~e?ffid=00000" name="url"/>

<input type="hidden" value="000000" name="title"/><input type="hidden" name="loc" value="en_US"/>

<input type="submit" value="Subscribe" />

<p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p>

</form>

[SarahG]

It's only the target attributes in both the form and link that will actually cause the validation errors. onsubmit is a valid attribute. However I'd personally add in a fieldset, legend, label around the label and id into the text box to make it all a bit more accessible. Plus strip out the paragraph tags and use CSS to deal with the form layout.

I don't know if removing target="popup" will stop it from working. I never thought a form could have a target attribute so I wouldn't have thought it would work. That's the only potential issue but easiest thing to do is to remove it and see if it still works.

[deronsizemore]

Yeah, the target attribute is the only thing that seems to keep it from validating, but without the target attribute I don't believe that it works at all. I'll have to try again. I haven't tested that for a a while. I actually thought of this question a while back and forgot to ask.

Plus strip out the paragraph tags and use CSS to deal with the form layout.


That's the hard part for me. I really haven't used forms a whole lot, and when I do, I simply wrap each text field input in a <p> or <div> and roll with it. I don't know why, but I never seem to have much luck styling these darn things.

[SarahG]

For feedburner email subscription I just use their link and leave it on their site. I did copy the form down once and strip out the rubbish but never set it live so couldn't say for sure if the target attribute would break it or not. I can't see how but I'd need to look at it more closely.

As for forms, I tend to use one of 2 methods. I either just have the labels and input/select/textarea then use display block on both. Or if I want labels floating left wrap each label and it's form element in a div and float the label left then clear both on each div. My other half wrote about creating and styling a semantically laid out form which may be of use to you - http://www.ap4a.co.uk/archives/2006/stylephreaks-standard-form-layout-revisited/ (when our server's database decides to start running again)

[SarahG]

Deron, I just grabbed my sub form and stripped out both the target and onsubmit. I moved the link in the onsubmit link into the action and this works fine. To explain the two attributes

form target prevents the current window from going to the feedburner captcha page. It's obviously moving the target to the popup window.
onsubmit opens the window with the feedburner captcha in it.

So if you remove target then the new window still opens, but the same window (with a different captcha) opens in the main window. If you remove both and put the correct URL into the form action, then the same window loads the feedburner captcha page, making the user leave your site.

My form tag now looks like

<form action="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=496440" method="post">

This works as I just tested it.

[deronsizemore]

For feedburner email subscription I just use their link and leave it on their site. I did copy the form down once and strip out the rubbish but never set it live so couldn't say for sure if the target attribute would break it or not. I can't see how but I'd need to look at it more closely.

As for forms, I tend to use one of 2 methods. I either just have the labels and input/select/textarea then use display block on both. Or if I want labels floating left wrap each label and it's form element in a div and float the label left then clear both on each div. My other half wrote about creating and styling a semantically laid out form which may be of use to you - http://www.ap4a.co.uk/archives/2006/stylephreaks-standard-form-layout-revisited/ (when our server's database decides to start running again)

Thanks Sara for the tutorial link. Looks like a good way to do it! I've bookmarked it.

Here is my normal form setup:


<fieldset>
<div class="formField">
<label for="name"><span class="requiredAst">*</span> Your Name:</label><br />
<input type="text" class="inputField" name="name" />
</div>

<div class="formField">
<label for="email"><span class="requiredAst">*</span> Your E-mail Address:</label><br />
<input type="text" class="inputField" name="email" />
</div>

<div class="formField" class="clearfix">
<label for="imageName" class="labelName"><span class="requiredAst">*</span> Image Name:</label> <span class="submitExample">Example: "Valhalla Golf Club"</span><br />
<input type="text" class="inputField" name="imageName" maxlength="27" />
</div>

<div class="formField" class="clearfix">
<label for="imageDescription" class="labelName"><span class="requiredAst">*</span> Image Description:</label> <span class="submitExample">Example: "Hole 1"</span><br />
<input type="text" class="inputField" name="imageDescription" maxlength="27" />
</div>

<div class="formField">
<label for="subject"><span class="requiredAst">*</span> Upload Your Image:</label><br />
<input class="attachField" type="file" name="file1" />
</div>

<div class="formField">
<input type="submit" name="Submit" value="Submit" class="submit" />
</div>
</fieldset>


It works, but I know it's not the best way to do it.

By the way, posting this code reminds me, you wouldn't know of an *easy* way to style the file input field would you? Everything I've looked at requires a tone of hoop jumping just to be able to style it like the rest of your form fields.

[deronsizemore]

Deron, I just grabbed my sub form and stripped out both the target and onsubmit. I moved the link in the onsubmit link into the action and this works fine. To explain the two attributes

form target prevents the current window from going to the feedburner captcha page. It's obviously moving the target to the popup window.
onsubmit opens the window with the feedburner captcha in it.

So if you remove target then the new window still opens, but the same window (with a different captcha) opens in the main window. If you remove both and put the correct URL into the form action, then the same window loads the feedburner captcha page, making the user leave your site.

My form tag now looks like

<form action="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=496440" method="post">

This works as I just tested it.


Ah awesome! Must have been why it didn't work last time I tried to simply remove the target attribute.

I'm going to use this definitely. thanks

[SarahG]

By the way, posting this code reminds me, you wouldn't know of an *easy* way to style the file input field would you? Everything I've looked at requires a tone of hoop jumping just to be able to style it like the rest of your form fields.

There's no easy way without using the DOM really. Quirksmode has a good article on it - CSS2/DOM - Styling an input type="file" (http://quirksmode.org/dom/inputfile.html)

[deronsizemore]

There's no easy way without using the DOM really.

I really just don't get that... it's like someone said, let make everything else easy to style, but lets throw this one element in there that will really rain on the designers parade when they try to style it. :bigsmile:

I think that's the article that I quickly glanced at originally...I'll have to reread it.