Can I Add an Additional Field From my MailChimp SignUp Form on LaunchTime Template?

Right now the LaunchTime template only has the option to display the EMAIL box linked to my MailChimp SignUp form. Since I have the custom HTML code to embed EMAIL and FIRST NAME boxes (see below), can I somehow add this to the LaunchTime template through one of the CSS files?
11 years 7 months ago #1 by Scott Potteiger

Please Log in or Create an account to join the conversation.

Hi, You can try to add your mailchimp code on the file :
[root]/templates/launchtime/themes/theme-name/index.php

Find this code :
<?php if ($showmailchimp) { ?>
			<!-- MAILCHIMP -->
			<div id="mailchimp">
			<form action="<?php echo $formurl; ?>" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
				<label for="mce-EMAIL"><?php echo $signuppretext; ?></label>
				<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
				<input type="submit" value="Go" name="subscribe" id="mc-embedded-subscribe" class="button">
			</form>
			</div>
			<!--END MAILCHIMP -->
			<?php } ?>

Then insert your code in between code <!-- MAILCHIMP --> and <!--END MAILCHIMP -->
11 years 7 months ago #2 by andy

Please Log in or Create an account to join the conversation.

Thanks so much I'm now 95% of the way there! If you check out the page www.gen-connect.com, do you know how I could move the "Subscribe" button beside the First Name box?

Here's the code I entered:

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="gen-connect.us4.list-manage.com/subscrib...41&id=8893e5def1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<h2>Subscribe to our mailing list</h2>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name <span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
11 years 7 months ago #3 by Scott Potteiger

Please Log in or Create an account to join the conversation.

Hi, try to add this css on the template css
#mc-embedded-subscribe {float:right;}
11 years 7 months ago #4 by andy

Please Log in or Create an account to join the conversation.

Thanks again I am now 98% there. Do you know how to make the height of my First Name input box the same as Email input box?

I edited the style.css file within the LaunchTime Template Theme of "3boxes":

/* CSS FOR 3BOXES */
/* GENERAL */
body {
font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;
}
/* CONTAINER */
#box-left {
float:left;
width: 700px;
padding:40px;
margin-left:0;
margin-right:auto;
position:relative;
z-index:30;
background-color:#181818;
-webkit-box-shadow: 0px 0px 10px #111; -moz-box-shadow: 0px 0px 10px #111; box-shadow: 0px 0px 10px #111;
}
#box-right {
float:right;
width: 700px;
padding:40px;
margin-left:auto;
margin-right:0;
position:relative;
z-index:30;
background-color:#181818;
-webkit-box-shadow: 0px 0px 10px #111; -moz-box-shadow: 0px 0px 10px #111; box-shadow: 0px 0px 10px #111;
}
#box-center {
padding:40px;
width: 700px;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:30;
background-color:#181818;
-webkit-box-shadow: 0px 0px 10px #111; -moz-box-shadow: 0px 0px 10px #111; box-shadow: 0px 0px 10px #111;
}
.logo {
margin-bottom: 10px;
}

/* COLUMNS */
#box1 {
width: 700px;
padding-bottom: 30px;
border-bottom: 1px solid #333;
margin-bottom: 30px;
}
#box2 {
width: 350px;
float: left;
margin-top: 50px;
}
#box3 {
width: 350px;
float: left;
}
ul#socialshare {
margin:30px 0 0 0;
overflow:hidden;
}

ul#socialshare li {
float:right;
margin:0 0 0 10px;
font-size:0.8em;
padding-top:0px;
}

ul#socialshare li.socialshare_icon {
float:left;
margin:0 10px 0 0;
padding:0;
}
ul#socialshare li.socialshare_icon a {
display:block;
width:24px;
height:24px;
text-indent:-9999px;
}
ul#socialshare li.socialshare_icon.facebook a {
background: url('../../images/social.png') no-repeat -26px 0px;
}
ul#socialshare li.socialshare_icon.facebook a:hover {
background-position: 0px 0px;
}
ul#socialshare li.socialshare_icon.twitter a {
background: url('../../images/social.png') no-repeat -52px -26px;
}
ul#socialshare li.socialshare_icon.twitter a:hover {
background-position: -52px 0px;
}
ul#socialshare li.socialshare_icon.googleplus a {
background:url('../../images/social.png') no-repeat -26px -26px;
}
ul#socialshare li.socialshare_icon.googleplus a:hover {
background-position: 0px -26px;
}
/* FORM */

input.inputbox, #mailchimp #mc-embedded-subscribe-form input.email {
background:white;
border:1px solid #aaa;
padding:10px 15px;
width:220px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
height:20px;
overflow:hidden;
font-size:1.2em;
line-height:1.2em;
float:left;
margin:0 10px 0 0;
}

input:focus {
background:#f9f9f9;
outline:0;
}

span#submit-button-border {
border:1px solid #000;
float:left};
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background:#333;
}

input#submit-button {

background:transparent;
border:none;
width:50px;
height:43px;
font-size:0.8em;
margin:0;
color:#fff;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;

}

input#submit-button:hover {
background:#d34a45;
}
input,
textarea,
input#submit-button {
-webkit-appearance: none !important;
}
/* SOCIAL */

.social-container {
width:302px;
padding:5px 0 13px 18px;
margin:10px 0 30px 0;
position:relative;
background:url('im/social-bg.png') repeat;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

#fblikeblock, #fblikeblock-return,
#tweetblock, #tweetblock-return,
#plusoneblock, #plusoneblock-return,
#tumblrblock, #tumblrblock-return,
#linkinblock, #linkinblock-return {
float:left !important;
margin:10px 18px 0 0 !important;
height:23px !important;
}

#fblikeblock, #fblikeblock-return {
width:108px !important;
}

#inner-container .disable {
display:none !important;
}
/* Template colors/style */

h1 {color:#eee; font-size:3.2em;font-weight:normal;text-shadow:0 2px 1px #333;}
h1 a {color:#eee; text-decoration:none;} h1 a:hover{color:#fff; text-decoration:none;}
h2 {color:#F5F5F5; font-size:1.2em;font-weight:normal;}
p, span.privacy-policy, div {color:#f5f5f5;}
span.privacy-policy {display:block;font-size:0.6em;margin:5px 0 0;width:320px;}
p a, ul#socialshare li a, span.privacy-policy a {color:#D34A45 !important;}
p, ul#socialshare li a {font-size:0.8em;}
p a, ul#socialshare li a:hover, span.privacy-policy a:hover {color:#fff; text-decoration:none;}

/*
MailChimp
*/
#mailchimp{clear:left; }
#mailchimp form#mc-embedded-subscribe-form {padding:0;}
#mailchimp #mc-embedded-subscribe-form input.button {display:inline;}
#mailchimp label {
font-weight: 700;
}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

/* Acymailing override */
.acymailing_module_form { padding:0 !important;font:0.6em Helvetica, Arial;}
.acymailing_introtext {display:block; margin:0 0 10px; color:#333; font-size:0.8em;}
#field_email_formAcymailing1, p.acysubbuttons{}
.acymailing_introtext {}
#field_email_formAcymailing1 {}
.acyfield_email .inputbox{ font-style:normal;}
.acymailing_form input.subbutton {
background-color:#111;
border:none;
width:50px; min-width:50px;
height:43px;
font-size:15px;
margin:0; padding:12px 15px;
color:#fff;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;

}
#mailchimp #mc-embedded-subscribe-form input.button {
background-color:#00C651;
color:#fff;
height:43px; width:50px;
min-width:50px;
text-transform:uppercase;
border: none;
border-radius: 4px;
cursor: pointer;

}
.acymailing_form input.subbutton:hover,
#mailchimp #mc-embedded-subscribe-form input.button:hover {background: #4594D5;}
#mc-embedded-subscribe {float:right;}

/* countdown timer */
.countdown_title {
display: block;
margin: 0 auto 20px auto;
font-size: 20px;
line-height:17px;
color: #999;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;

}
#countdown_dashboard {
width:510px;
text-align: center;
padding:4px 0;margin: 0 auto;

}

.dash {
width: 80px;
height: 85px;
background: transparent;
float: left;
text-align: center;
display: block;
margin: 0 10px;
}

.dash .digit {
font-size:80px;
float: left;
width: 40px;
text-align: center;
color: #555;
font-family: 'Squada One', 'Lucida Grande', Arial;
margin: 0 auto;
}

.dash_title {
display: block;
bottom: 0px;
font-size: 14px;
color: #555;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
width: 80px;
}


/* Backend style */
/* DESCRIPTION SECTION */
.tpfb-desc-wrp {
background: url(../images/bgdescbackend.png) top repeat-x #1BA8D6;
width:auto;
padding:10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.tpfb-desc-wrp-inner {
width: auto;
color: #fff;
padding: 0 10px 10px 10px;
}
.tpfb-img-desc {
margin-left: 10px;
border: 1px solid #333;
float: right;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

}
h1.tpfb-desc-title {
font-size: 16px;
color: #fff;
display: block;
background: #15708e;
margin: -20px -20px 20px -20px;
padding: 15px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
border-top-right-radius:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
}
.tpfb-desc-title {
font-size: 11px;
text-transform: uppercase;
}
.tpfb-desc-prolog {
font-size: 11px;
font-weight: 700;
}
11 years 7 months ago #5 by Scott Potteiger

Please Log in or Create an account to join the conversation.

Powered by Kunena Forum