The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Mail chimp HTML
wvarner
post Jun 15 2011, 07:14 PM
Post #1





Group: Members
Posts: 4
Joined: 15-June 11
Member No.: 14,768



I have copied and pasted in the HTML to put a Mail Chimp email sign up for on a page of my wordpress site. I want to center the form on the page but do not know how to change the code. Here is the code:

<div id="mc_embed_signup" style="width: 250px;"><form id="mc-embedded-subscribe-form" class="validate" style="font: normal 100% Arial, sans-serif; font-size: 10px;" action="http://creditrepairincharlottenc.us2.list-manage.com/subscribe/post?u=f603a3fcb85d2c5cdfef10c22&id=5858118e21" method="post">
<fieldset style="border-radius: 4px; border: 1px solid #ccc; padding-top: 1.5em; margin: .5em 0; background-color: #fff; color: #000; text-align: left;">
<div class="indicate-required" style="text-align: right; font-style: italic; overflow: hidden; color: #000; margin: 0 9% 0 0;">* indicates required</div>
<div class="mc-field-group" style="margin: 1.3em 5%; clear: both; overflow: hidden;"><label style="display: block; margin: .3em 0; line-height: 1em; font-weight: bold;" for="mce-FNAME">First Name <strong class="note-required">*</strong>
</label> 

<input id="mce-FNAME" class="required" style="margin-right: 1.5em; padding: .2em .3em; width: 90%; float: left; z-index: 999;" name="FNAME" type="text" /></div>
<div class="mc-field-group" style="margin: 1.3em 5%; clear: both; overflow: hidden;"><label style="display: block; margin: .3em 0; line-height: 1em; font-weight: bold;" for="mce-EMAIL">Email Address <strong class="note-required">*</strong>
</label> 

<input id="mce-EMAIL" class="required email" style="margin-right: 1.5em; padding: .2em .3em; width: 90%; float: left; z-index: 999;" name="EMAIL" type="text" /></div>
<div><input id="mc-embedded-subscribe" class="btn" style="clear: both; width: auto; display: block; margin: 1em 0 1em 5%;" name="subscribe" type="submit" value="Send the free video now" /></div></fieldset>
<a id="mc_embed_close" class="mc_embed_close" style="display: none;" href="#">Close</a>

</form></div>
<script type="text/javascript">// <![CDATA[
var fnames = new Array();var ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email'; try { var jqueryLoaded=jQuery; jqueryLoaded=true; } catch(err) { var jqueryLoaded=false; } var head= document.getElementsByTagName('head')[0]; if (!jqueryLoaded) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'; head.appendChild(script); if (script.readyState && script.onload!==null){ script.onreadystatechange= function () { if (this.readyState == 'complete') mce_preload_check(); } } } var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'http://downloads.mailchimp.com/js/jquery.form-n-validate.js'; head.appendChild(script); var err_style = ''; try{ err_style = mc_custom_error_style; } catch(e){ err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: ERROR_BGCOLOR 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: ERROR_COLOR;'; } var head= document.getElementsByTagName('head')[0]; var style= document.createElement('style'); style.type= 'text/css'; if (style.styleSheet) { style.styleSheet.cssText = '.mce_inline_error {' + err_style + '}'; } else { style.appendChild(document.createTextNode('.mce_inline_error {' + err_style + '}')); } head.appendChild(style); setTimeout('mce_preload_check();', 250); var mce_preload_checks = 0; function mce_preload_check(){ if (mce_preload_checks>40) return;
mce_preload_checks++;
try {
var jqueryLoaded=jQuery;
} catch(err) {
setTimeout('mce_preload_check();', 250);
return;
}
try {
var validatorLoaded=jQuery("#fake-form").validate({});
} catch(err) {
setTimeout('mce_preload_check();', 250);
return;
}
mce_init_form();
}
function mce_init_form(){
jQuery(document).ready( function($) {
var options = { errorClass: 'mce_inline_error', errorElement: 'div', onkeyup: function(){}, onfocusout:function(){}, onblur:function(){} };
var mce_validator = $("#mc-embedded-subscribe-form").validate(options);
$("#mc-embedded-subscribe-form").unbind('submit');//remove the validator so we can get into beforeSubmit on the ajaxform, which then calls the validator
options = { url: 'http://creditrepairincharlottenc.us2.list-manage1.com/subscribe/post-json?u=f603a3fcb85d2c5cdfef10c22&id=5858118e21&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
beforeSubmit: function(){
$('#mce_tmp_error_msg').remove();
$('.datefield','#mc_embed_signup').each(
function(){
var txt = 'filled';
var fields = new Array();
var i = 0;
$(':text', this).each(
function(){
fields[i] = this;
i++;
});
$(':hidden', this).each(
function(){
if (fields.length == 2) fields[2] = {'value':1970};//trick birthdays into having years
if ( fields[0].value=='MM' && fields[1].value=='DD' && fields[2].value=='YYYY' ){
this.value = '';
} else if ( fields[0].value=='' && fields[1].value=='' && fields[2].value=='' ){
this.value = '';
} else {
this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
}
});
});
return mce_validator.form();
},
success: mce_success_cb
};
$('#mc-embedded-subscribe-form').ajaxForm(options);

});
}
function mce_success_cb(resp){
$('#mce-success-response').hide();
$('#mce-error-response').hide();
if (resp.result=="success"){
$('#mce-'+resp.result+'-response').show();
$('#mce-'+resp.result+'-response').html(resp.msg);
$('#mc-embedded-subscribe-form').each(function(){
this.reset();
});
} else {
var index = -1;
var msg;
try {
var parts = resp.msg.split(' - ',2);
if (parts[1]==undefined){
msg = resp.msg;
} else {
i = parseInt(parts[0]);
if (i.toString() == parts[0]){
index = parts[0];
msg = parts[1];
} else {
index = -1;
msg = resp.msg;
}
}
} catch(e){
index = -1;
msg = resp.msg;
}
try{
if (index== -1){
$('#mce-'+resp.result+'-response').show();
$('#mce-'+resp.result+'-response').html(msg);
} else {
err_id = 'mce_tmp_error_msg';
html = '

<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>

';

var input_id = '#mc_embed_signup';
var f = $(input_id);
if (ftypes[index]=='address'){
input_id = '#mce-'+fnames[index]+'-addr1';
f = $(input_id).parent().parent().get(0);
} else if (ftypes[index]=='date'){
input_id = '#mce-'+fnames[index]+'-month';
f = $(input_id).parent().parent().get(0);
} else {
input_id = '#mce-'+fnames[index];
f = $().parent(input_id).get(0);
}
if (f){
$(f).append(html);
$(input_id).focus();
} else {
$('#mce-'+resp.result+'-response').show();
$('#mce-'+resp.result+'-response').html(msg);
}
}
} catch(e){
$('#mce-'+resp.result+'-response').show();
$('#mce-'+resp.result+'-response').html(msg);
}
}
}
// ]]></script>
<!--End mc_embed_signup-->
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 16 2011, 06:13 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



See http://www.w3.org/Style/Examples/007/center.html .
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
wvarner
post Jun 16 2011, 07:02 AM
Post #3





Group: Members
Posts: 4
Joined: 15-June 11
Member No.: 14,768



QUOTE(pandy @ Jun 16 2011, 07:13 AM) *



I tried but I just can't figure it out. sad.gif I'm not stupid, I just don't know much about code.


Attached File(s)
Attached File  Doc3.doc ( 114.5k ) Number of downloads: 586
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 16 2011, 09:00 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



From the look of it, without testing, I'd say adding auto left and right margins to #mc_embed_signup would do the trick. It looks like it's a wrapper for the form and it has a width, so auto horizontal margins would center it.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
wvarner
post Jun 20 2011, 06:20 PM
Post #5





Group: Members
Posts: 4
Joined: 15-June 11
Member No.: 14,768



There are two places where the code states "#mc_embed_signup". Which place to I add margin-left: auto; and margin-right: auto; ?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 20 2011, 09:39 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



In your style sheet.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
wvarner
post Jul 1 2011, 01:30 PM
Post #7





Group: Members
Posts: 4
Joined: 15-June 11
Member No.: 14,768



<div id="mc_embed_signup" style="margin-left: auto; margin-right: auto; width: 250px;"><form id="mc-embedded-subscribe-form" class="validate" style="font: normal 100% Arial, sans-serif; font-size: 10px;" action="http://creditrepairincharlottenc.us2.list-manage.com/subscribe/post?u=f603a3fcb85d2c5cdfef10c22&amp;id=5858118e21" method="post">
<fieldset style="border-radius: 4px; border: 1px solid #ccc; padding-top: 1.5em; margin: .5em 0; background-color: #fff; color: #000; text-align: left;">
<div class="indicate-required" style="text-align: right; font-style: italic; overflow: hidden; color: #000; margin: 0 9% 0 0;">* indicates required</div>
<div class="mc-field-group" style="margin: 1.3em 5%; clear: both; overflow: hidden;"><label style="display: block; margin: .3em 0; line-height: 1em; font-weight: bold;" for="mce-FNAME">First Name <strong class="note-required">*</strong>
</label>&nbsp;

<input id="mce-FNAME" class="required" style="margin-right: 1.5em; padding: .2em .3em; width: 90%; float: left; z-index: 999;" name="FNAME" type="text" />

</div>
<div class="mc-field-group" style="margin: 1.3em 5%; clear: both; overflow: hidden;"><label style="display: block; margin: .3em 0; line-height: 1em; font-weight: bold;" for="mce-EMAIL">Email Address <strong class="note-required">*</strong>
</label>&nbsp;

<input id="mce-EMAIL" class="required email" style="margin-right: 1.5em; padding: .2em .3em; width: 90%; float: left; z-index: 999;" name="EMAIL" type="text" />

</div>
<div><input id="mc-embedded-subscribe" class="btn" style="clear: both; width: auto; display: block; margin: 1em 0 1em 5%;" name="subscribe" type="submit" value="Send the free video now" /></div></fieldset>
<a id="mc_embed_close" class="mc_embed_close" style="display: none;" href="#">Close</a>

</form></div>
<script type="text/javascript">// <![CDATA[
var fnames = new Array();var ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email'; try { var jqueryLoaded=jQuery; jqueryLoaded=true; } catch(err) { var jqueryLoaded=false; } var head= document.getElementsByTagName('head')[0]; if (!jqueryLoaded) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'; head.appendChild(script); if (script.readyState && script.onload!==null){ script.onreadystatechange= function () { if (this.readyState == 'complete') mce_preload_check(); } } } var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'http://downloads.mailchimp.com/js/jquery.form-n-validate.js'; head.appendChild(script); var err_style = ''; try{ err_style = mc_custom_error_style; } catch(e){ err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: ERROR_BGCOLOR 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: ERROR_COLOR;'; } var head= document.getElementsByTagName('head')[0]; var style= document.createElement('style'); style.type= 'text/css'; if (style.styleSheet) { style.styleSheet.cssText = '.mce_inline_error {' + err_style + '}'; } else { style.appendChild(document.createTextNode('.mce_inline_error {' + err_style + '}')); } head.appendChild(style); setTimeout('mce_preload_check();', 250); var mce_preload_checks = 0; function mce_preload_check(){ if (mce_preload_checks>40) return;
mce_preload_checks++;
try {
var jqueryLoaded=jQuery;
} catch(err) {
setTimeout('mce_preload_check();', 250);
return;
}
try {
var validatorLoaded=jQuery("#fake-form").validate({});
} catch(err) {
setTimeout('mce_preload_check();', 250);
return;
}
mce_init_form();
}
function mce_init_form(){
jQuery(document).ready( function($) {
var options = { errorClass: 'mce_inline_error', errorElement: 'div', onkeyup: function(){}, onfocusout:function(){}, onblur:function(){} };
var mce_validator = $("#mc-embedded-subscribe-form").validate(options);
$("#mc-embedded-subscribe-form").unbind('submit');//remove the validator so we can get into beforeSubmit on the ajaxform, which then calls the validator
options = { url: 'http://creditrepairincharlottenc.us2.list-manage1.com/subscribe/post-json?u=f603a3fcb85d2c5cdfef10c22&id=5858118e21&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
beforeSubmit: function(){
$('#mce_tmp_error_msg').remove();
$('.datefield','#mc_embed_signup').each(
function(){
var txt = 'filled';
var fields = new Array();
var i = 0;
$(':text', this).each(
function(){
fields[i] = this;
i++;
});
$(':hidden', this).each(
function(){
if (fields.length == 2) fields[2] = {'value':1970};//trick birthdays into having years
if ( fields[0].value=='MM' && fields[1].value=='DD' && fields[2].value=='YYYY' ){
this.value = '';
} else if ( fields[0].value=='' && fields[1].value=='' && fields[2].value=='' ){
this.value = '';
} else {
this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
}
});
});
return mce_validator.form();
},
success: mce_success_cb
};
$('#mc-embedded-subscribe-form').ajaxForm(options);

});
}
function mce_success_cb(resp){
$('#mce-success-response').hide();
$('#mce-error-response').hide();
if (resp.result=="success"){
$('#mce-'+resp.result+'-response').show();
$('#mce-'+resp.result+'-response').html(resp.msg);
$('#mc-embedded-subscribe-form').each(function(){
this.reset();
});
} else {
var index = -1;
var msg;
try {
var parts = resp.msg.split(' - ',2);
if (parts[1]==undefined){
msg = resp.msg;
} else {
i = parseInt(parts[0]);
if (i.toString() == parts[0]){
index = parts[0];
msg = parts[1];
} else {
index = -1;
msg = resp.msg;
}
}
} catch(e){
index = -1;
msg = resp.msg;
}
try{
if (index== -1){
$('#mce-'+resp.result+'-response').show();
$('#mce-'+resp.result+'-response').html(msg);
} else {
err_id = 'mce_tmp_error_msg';
html = '



<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>


';

var input_id = '#mc_embed_signup' margin-left: auto;
martin-right: auto;
var f = $(input_id);
if (ftypes[index]=='address'){
input_id = '#mce-'+fnames[index]+'-addr1';
f = $(input_id).parent().parent().get(0);
} else if (ftypes[index]=='date'){
input_id = '#mce-'+fnames[index]+'-month';
f = $(input_id).parent().parent().get(0);
} else {
input_id = '#mce-'+fnames[index];
f = $().parent(input_id).get(0);
}
if (f){
$(f).append(html);
$(input_id).focus();
} else {
$('#mce-'+resp.result+'-response').show();
$('#mce-'+resp.result+'-response').html(msg);
}
}
} catch(e){
$('#mce-'+resp.result+'-response').show();
$('#mce-'+resp.result+'-response').html(msg);
}
}
}
// ]]></script>
<!--End mc_embed_signup-->
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 01:19 PM