+1-888-365-2779
Try Now
More in this section

Forums / Bugs & Issues / Embedded Email marketing submission form breaks sitefinity

Embedded Email marketing submission form breaks sitefinity

2 posts, 0 answered
  1. Michael Waters
    Michael Waters avatar
    32 posts
    Registered:
    22 Mar 2010
    19 Jan 2011
    Link to this post

    When I try and embed the signup form code in a generic content html, it breaks sitefinity.
    The layout is skewed to the point you cant edit anything in design mode.

    Im assuming it might be something with aspx and the way the form code is written, but I have no idea.

    If I Preview the page, it looks ok, but I dont want to save b/c then I wont be able to edit it in the future, so I just cancelled changes.

    Below is the embedded form code:

    001.<!-- Begin MailChimp Signup Form -->
    002.<!--[if IE]>
    003.<style type="text/css" media="screen">
    004.    #mc_embed_signup fieldset {position: relative;}
    005.    #mc_embed_signup legend {position: absolute; top: -1em; left: .2em;}
    006.</style>
    007.<![endif]--> 
    008.<!--[if IE 7]>
    009.<style type="text/css" media="screen">
    010.    .mc-field-group {overflow:visible;}
    011.</style>
    012.<![endif]-->
    013.<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    014.<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script>
    015.<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script>
    016.  
    017.<div id="mc_embed_signup">
    018.<form action="http://waterstruck.us2.list-manage.com/subscribe/post?u=2841d64b8ee1e4a2bd2ca1a8e&;id=74d808fac7" 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;">
    019.    <fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #ccc;padding-top: 1.5em;margin: .5em 0;background-color: #ffffff;color: #000;text-align: left;">
    020.    <legend style="white-space: normal;text-transform: capitalize;font-weight: bold;color: #000;background: #fff;padding: .5em 1em;border: 1px solid #ccc;-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;font-size: 1.2em;"><span>join WATERS mailing list</span></legend>
    021.<div class="indicate-required" style="text-align: right;font-style: italic;overflow: hidden;color: #000;margin: 0 9% 0 0;">* indicates required</div>
    022.<div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
    023.<label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Address <strong class="note-required">*</strong>
    024.</label>
    025.<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;">
    026.</div>
    027.<div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
    028.<label for="mce-FNAME" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">First Name <strong class="note-required">*</strong>
    029.</label>
    030.<input type="text" value="" name="FNAME" class="required" id="mce-FNAME" style="margin-right: 1.5em;padding: .2em .3em;width: 90%;float: left;z-index: 999;">
    031.</div>
    032.<div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
    033.<label for="mce-LNAME" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Last Name <strong class="note-required">*</strong>
    034.</label>
    035.<input type="text" value="" name="LNAME" class="required" id="mce-LNAME" style="margin-right: 1.5em;padding: .2em .3em;width: 90%;float: left;z-index: 999;">
    036.</div>
    037.<div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
    038.    <label class="input-group-label" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Format </label>
    039.    <div class="input-group" style="padding: .7em .7em .7em 0;font-size: .9em;margin: 0 0 1em 0;">
    040.    <ul style="margin: 0;padding: 0;"><li style="list-style: none;overflow: hidden;padding: .2em 0;clear: left;display: block;margin: 0;"><input type="radio" value="html" name="EMAILTYPE" id="mce-EMAILTYPE-0" style="margin-right: 2%;padding: .2em .3em;width: auto;float: left;z-index: 999;"><label for="mce-EMAILTYPE-0" style="display: block;margin: .4em 0 0 0;line-height: 1em;font-weight: bold;width: auto;float: left;text-align: left !important;">html</label></li>
    041.<li style="list-style: none;overflow: hidden;padding: .2em 0;clear: left;display: block;margin: 0;"><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1" style="margin-right: 2%;padding: .2em .3em;width: auto;float: left;z-index: 999;"><label for="mce-EMAILTYPE-1" style="display: block;margin: .4em 0 0 0;line-height: 1em;font-weight: bold;width: auto;float: left;text-align: left !important;">text</label></li>
    042.<li style="list-style: none;overflow: hidden;padding: .2em 0;clear: left;display: block;margin: 0;"><input type="radio" value="mobile" name="EMAILTYPE" id="mce-EMAILTYPE-2" style="margin-right: 2%;padding: .2em .3em;width: auto;float: left;z-index: 999;"><label for="mce-EMAILTYPE-2" style="display: block;margin: .4em 0 0 0;line-height: 1em;font-weight: bold;width: auto;float: left;text-align: left !important;">mobile</label></li>
    043.</ul>
    044.    </div>
    045.</div>
    046.<p style="font-size: 1.1em;margin-left: 30%;clear: left;"><a href="http://us2.campaign-archive2.com/home/?u=2841d64b8ee1e4a2bd2ca1a8e&id=74d808fac7" title="View previous campaigns" style="color: #CC6600;">View previous campaigns.</a></p>
    047.        <div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;">
    048.            <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>
    049.            <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>
    050.        </div>
    051.        <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>
    052.    </fieldset
    053.    <a href="#" id="mc_embed_close" class="mc_embed_close" style="display: none;">Close</a>
    054.</form>
    055.</div>
    056.<script type="text/javascript">
    057.var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='BUYERTYPE';ftypes[3]='text';var err_style = '';
    058.try{
    059.    err_style = mc_custom_error_style;
    060.} catch(e){
    061.    err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: FFEEEE none repeat scroll 0% 0%; font-weight: bold; float: left; z-index: 1; width: 80%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: FF0000;';
    062.}
    063.var mce_jQuery = jQuery.noConflict();
    064.mce_jQuery(document).ready( function($) {
    065.  var options = { errorClass: 'mce_inline_error', errorElement: 'div', errorStyle: err_style, onkeyup: function(){}, onfocusout:function(){}, onblur:function(){}  };
    066.  var mce_validator = mce_jQuery("#mc-embedded-subscribe-form").validate(options);
    067.  options = { url: 'http://waterstruck.us2.list-manage.com/subscribe/post-json?u=2841d64b8ee1e4a2bd2ca1a8e&id=74d808fac7&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
    068.                beforeSubmit: function(){
    069.                    mce_jQuery('#mce_tmp_error_msg').remove();
    070.                    mce_jQuery('.datefield','#mc_embed_signup').each(
    071.                        function(){
    072.                            var txt = 'filled';
    073.                            var fields = new Array();
    074.                            var i = 0;
    075.                            mce_jQuery(':text', this).each(
    076.                                function(){
    077.                                    fields[i] = this;
    078.                                    i++;
    079.                                });
    080.                            mce_jQuery(':hidden', this).each(
    081.                                function(){
    082.                                    if ( fields[0].value=='MM' && fields[1].value=='DD' && fields[2].value=='YYYY' ){
    083.                                        this.value = '';
    084.                                    } else if ( fields[0].value=='' && fields[1].value=='' && fields[2].value=='' ){
    085.                                        this.value = '';
    086.                                    } else {
    087.                                        this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
    088.                                    }
    089.                                });
    090.                        });
    091.                    return mce_validator.form();
    092.                }, 
    093.                success: mce_success_cb
    094.            };
    095.  mce_jQuery('#mc-embedded-subscribe-form').ajaxForm(options);
    096.  
    097.});
    098.function mce_success_cb(resp){
    099.    mce_jQuery('#mce-success-response').hide();
    100.    mce_jQuery('#mce-error-response').hide();
    101.    if (resp.result=="success"){
    102.        mce_jQuery('#mce-'+resp.result+'-response').show();
    103.        mce_jQuery('#mce-'+resp.result+'-response').html(resp.msg);
    104.        mce_jQuery('#mc-embedded-subscribe-form').each(function(){
    105.            this.reset();
    106.        });
    107.    } else {
    108.        var index = -1;
    109.        var msg;
    110.        try {
    111.            var parts = resp.msg.split(' - ',2);
    112.            if (parts[1]==undefined){
    113.                msg = resp.msg;
    114.            } else {
    115.                i = parseInt(parts[0]);
    116.                if (i.toString() == parts[0]){
    117.                    index = parts[0];
    118.                    msg = parts[1];
    119.                } else {
    120.                    index = -1;
    121.                    msg = resp.msg;
    122.                }
    123.            }
    124.        } catch(e){
    125.            index = -1;
    126.            msg = resp.msg;
    127.        }
    128.        try{
    129.            if (index== -1){
    130.                mce_jQuery('#mce-'+resp.result+'-response').show();
    131.                mce_jQuery('#mce-'+resp.result+'-response').html(msg);            
    132.            } else {
    133.                err_id = 'mce_tmp_error_msg';
    134.                html = '<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>';
    135.                  
    136.                var input_id = '#mc_embed_signup';
    137.                var f = mce_jQuery(input_id);
    138.                if (ftypes[index]=='address'){
    139.                    input_id = '#mce-'+fnames[index]+'-addr1';
    140.                    f = mce_jQuery(input_id).parent().parent().get(0);
    141.                } else if (ftypes[index]=='date'){
    142.                    input_id = '#mce-'+fnames[index]+'-month';
    143.                    f = mce_jQuery(input_id).parent().parent().get(0);
    144.                } else {
    145.                    input_id = '#mce-'+fnames[index];
    146.                    f = mce_jQuery().parent(input_id).get(0);
    147.                }
    148.                if (f){
    149.                    mce_jQuery(f).append(html);
    150.                    mce_jQuery(input_id).focus();
    151.                } else {
    152.                    mce_jQuery('#mce-'+resp.result+'-response').show();
    153.                    mce_jQuery('#mce-'+resp.result+'-response').html(msg);
    154.                }
    155.            }
    156.        } catch(e){
    157.            mce_jQuery('#mce-'+resp.result+'-response').show();
    158.            mce_jQuery('#mce-'+resp.result+'-response').html(msg);
    159.        }
    160.    }
    161.}
    162.</script>
    163.<!--End mc_embed_signup-->

    Attached is a screenshot of what happens...

    Anyone know how to resolve this?

    Thanks!
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    24 Jan 2011
    Link to this post
    Hi Michael Waters,

    Please create a user control (.ascx control) which will hold your form, in this user control. Then in this control add the markup of your form. In the page load event of the control you can check if the control is in design mode as Ivan has suggested in another thread of yours. Then if you are in design mode you should use this.Control.Clear(), so that your form is not rendered in design mode.

    Best wishes,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
2 posts, 0 answered