Can I Add an Additional Field From my MailChimp SignUp Form on LaunchTime Template?
- Posted by Scott Potteiger (9) Offline
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.
- Posted by andy (759) Offline
Hi, You can try to add your mailchimp code on the file :
[root]/templates/launchtime/themes/theme-name/index.php
Find this code :
Then insert your code in between code <!-- MAILCHIMP --> and <!--END MAILCHIMP -->
11 years 7 months ago #2
by andy
[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 -->
Please Log in or Create an account to join the conversation.
- Posted by Scott Potteiger (9) Offline
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
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-->
Please Log in or Create an account to join the conversation.
- Posted by andy (759) Offline
Hi, try to add this css on the template css
11 years 7 months ago #4
by andy
#mc-embedded-subscribe {float:right;}
Please Log in or Create an account to join the conversation.
- Posted by Scott Potteiger (9) Offline
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
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;
}
Please Log in or Create an account to join the conversation.