[Resolved] Display Single Line Optin Form With MailChimp

[David]

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!">

[Amit]

Done David and added the shortcode too…..Now you can see that on front page.

[David]

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.

[Amit]

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;
}
}

[Amit]

Resolved

[David]

Glad to hear that

[Author]

Posts