Archived topic
Display Single Line Optin Form With MailChimp
20 replies · Started by Amit on May 19, 2020
Go to the Plugin and update the form HTML to:
<input type="text" name="FNAME" placeholder="Name" required="">
<input type="email" name="EMAIL" placeholder="Email" required="">
<input type="submit" value="Sign Up!">
Done David and added the shortcode too.....Now you can see that on front page.
If you follow the steps here for adding the form in the hook:
https://generatepress.com/forums/topic/display-single-line-optin-form-with-mailchimp/#post-1292399
Note: i updated the CSS in that reply so it should be fully responsive.
That css is not working, the 'flex' not at all looking good. Now using this code.
`/* Mail Chimp Form Custom CSS */
.mailchimp-container {
background-color: #333; /* Add background color here */
padding: 15px 30px;
display: block;
color:white;
margin:10px;
}
.mailchimp-container input[type=text] {
border-radius: 5px;
padding: 5px;
width: 35%!important;
border: 0px;
margin-right: 10px;
}
.mailchimp-container input[type=email] {
border-radius: 5px;
padding: 5px;
width: 35%!important;
border: 0px;
margin-right: 10px;
}
.mailchimp-container input[type=submit] {
border-radius: 5px;
padding: 5px;
width: 25%!important;
}
/*----------Mailchimp SignUp Tablet Settings----------*/
@media only screen and (max-width: 980px) {
.mailchimp-container input[type=text] {
width: 48%!important;
margin-right: 5px;
}
.mailchimp-container input[type=email] {
width: 48%!important;
margin-right: 0px;
}
.mailchimp-container input[type=submit] {
width: 99.5%!important;
margin-top: 10px;
}
}
/*----------Mailchimp SignUp Mobile Settings----------*/
@media only screen and (max-width: 623px) {
.mailchimp-container input[type=text] {
display: none;
}
.mailchimp-container input[type=email] {
width: 100%!important;
margin-right: 0px;
}
.mailchimp-container input[type=submit] {
width: 100%!important;
margin-right: 0px;
margin-top: 10px;
}
}
Resolved
Glad to hear that