A client of ours has an eCommerce website built on asp.net. He wanted a MailChimp email newsletter sign-up form on his site. He copied and pasted the MailChimp-generated code, and seeing as that the MailChimp code contained <form></form> tags, it didn’t work. (And... it also "broke" the search functionality in IE and wreaked other havoc, but that's another post).

I Googled for solutions and MailChimp’s info wasn’t very helpful (or, maybe I should say, was sort of helpful but not the answer I wanted), so I went more general about adding forms onto a page that already contains the form tags inherent to asp.net pages.

I had remembered seeing a similar solution on Mitchel Seller’s website about the "adding forms to DNN" conundrum and used that as a starting point.

Here’s what I ended up doing … NOTE: This generated code from MailChimp is the version with Javascript disabled, but it looked like the code between the form tags was the same, so just sticking with the basics.

Old MailChimp Form code (with my changes in Green)

Also note: In the interest of time, I just did a quick copy/paste of these code examples, so they are NOT formatted to copy/paste for you.

<!-- Begin MailChimp Signup Form -->
<!--[if IE]>
<style type="text/css" media="screen">
    #mc_embed_signup fieldset {position: relative;}
    #mc_embed_signup legend {position: absolute; top: -1em; left: .2em;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css" media="screen">
    .mc-field-group {overflow:visible;}
</style>
<![endif]-->

<div id="mc_embed_signup">
<form action="http://yoururlhere.us1.list-manage.com/subscribe/post?u=xxxxxxxxxxxxxxxx&amp;id=xxxxxxxxxxx" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial, sans-serif;font-size: 10px;">
    <fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #000000;padding-top: 1.5em;margin: .5em 0;background-color: #FFFFFF;color: #000;text-align: left;">
    <legend style="white-space: normal;text-transform: capitalize;font-weight: bold;color: #666666;background: #CCCCCC;padding: .5em 1em;border: 1px solid #000000;-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;font-size: 1.2em;"><span>join our mailing list</span></legend>
<div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
<label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Address </label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 90%;float: left;z-index: 999;">
</div>
        <div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;">
            <div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: FBE3E4;color: #D12F19;"></div>
            <div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #E3FBE4;color: #529214;"></div>
        </div>
        <div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="clear: both;width: auto;display: block;margin: 1em 0 1em 5%;"></div>
    </fieldset>   
    <a href="#" id="mc_embed_close" class="mc_embed_close" style="display: none;">Close</a>
</form>
</div>

<!--End mc_embed_signup—>

New MailChimp form code that WORKS in ASP.NET!

<!-- Begin MailChimp Signup Form -->
<!--[if IE]>
<style type="text/css" media="screen">
    #mc_embed_signup fieldset {position: relative;}
    #mc_embed_signup legend {position: absolute; top: -1em; left: .2em;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css" media="screen">
    .mc-field-group {overflow:visible;}
</style>
<![endif]-->

<div id="mc_embed_signup"><!-- I totally removed the Initial form tag and everything in it -->

<fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #000000;padding-top: 1.5em;margin: .5em 0;background-color: #FFFFFF;color: #000;text-align: left;">
    <legend style="white-space: normal;text-transform: capitalize;font-weight: bold;color: #666666;background: #CCCCCC;padding: .5em 1em;border: 1px solid #000000;-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;font-size: 1.2em;"><span>join our mailing list</span></legend>
<div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
<label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Address </label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 90%;float: left;z-index: 999;">
</div>
        <div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;">
            <div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: FBE3E4;color: #D12F19;"></div>
            <div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #E3FBE4;color: #529214;"></div>
        </div>
        <div><!-- Then added the onClick line in input section --><input type="submit" onClick=this.form.action='http://yoururlhere.us1.list-manage.com/subscribe/post?u=xxxxxxxxxxxxxxxx&amp;id=xxxxxxxxxxx';this.form.submit(); value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="clear: both;width: auto;display: block;margin: 1em 0 1em 5%;"></div>
    </fieldset>   
    <a href="#" id="mc_embed_close" class="mc_embed_close" style="display: none;">Close</a>

</div>

<!--End mc_embed_signup-->