A Pen by Pronay Sarkar on CodePen.
Last active
April 16, 2021 14:47
-
-
Save itsmepronay/854f9f5ccc3557cf0c84d72316d055e7 to your computer and use it in GitHub Desktop.
Mailchimp Integration with Custom HTML Form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form action="https://prowebtips.us4.list-manage.com/subscribe/post" method="POST" id='newsletter-subscribe-form'> | |
<input type="hidden" name="u" value="96c2276720a0e7a22c189cf19"> | |
<input type="hidden" name="id" value="140fa1c17b"> | |
<div class='newsletter-form'> | |
<div class="newsletter-form__text"> | |
<h3 class="newsletter-form__text-headline">Subscribe Our Newsletter</h3> | |
<p class="newsletter-form__text-subline">Weekly Awesome emails or nothing.</p> | |
</div> | |
<div class='newsletter-form__signup'> | |
<div class='newsletter-form-input-wrapper'> | |
<!-- name input start --> | |
<label for="MERGE1"> | |
</label> | |
<div class="field-group"> | |
<input class="newsletter-form-input" type='text' name='MERGE1' size="25" value="" placeholder="Name"> | |
</div> | |
</div> | |
<!-- name input end --> | |
<div class='newsletter-form-input-wrapper'> | |
<!-- email input start --> | |
<label for="MERGE0"> | |
</label> | |
<div class="field-group"> | |
<input class="newsletter-form-input" type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" placeholder="E-Mail"> | |
</div> | |
</div> | |
<!-- email input end --> | |
<div class='newsletter-form-input-wrapper'> | |
<div class="submit_container clear"> | |
<button class="newsletter-form-button"type="submit" name="submit" value="Subscribe">Subscribe</button> | |
</div> | |
<input type="hidden" name="ht" value="fdb348a0bb808d00606dd9c2560ecdf2cb05bada:MTYxODU3MDc0MS42ODM0"> | |
<input type="hidden" name="mc_signupsource" value="hosted"> | |
</div> | |
</div> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*------------------------------------*\ | |
#BASE | |
\*------------------------------------*/ | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
max-width: 1400px; | |
margin: 0 auto; | |
padding: 50px 0; | |
} | |
/*------------------------------------*\ | |
#FORM - COPY FROM HERE | |
\*------------------------------------*/ | |
#newsletter-subscribe-form { | |
width: 100%; | |
padding: 20px; | |
background: #00B551; | |
color: #fff; | |
} | |
.newsletter-form { | |
display: table; | |
table-layout: fixed; | |
width: 100%; | |
} | |
.newsletter-form__text, | |
.newsletter-form__signup { | |
display: table-cell; | |
vertical-align: middle; | |
} | |
.newsletter-form__text { | |
width: 50%; | |
} | |
.newsletter-form__text-headline { | |
margin: 0; | |
font-size: 16px; | |
} | |
.newsletter-form__text-subline { | |
margin: 0.5rem 0 0 0; | |
} | |
.newsletter-form__signup { | |
width: 50%; | |
&:after { | |
content: ''; | |
display: block; | |
height: 0; | |
visibility: 0; | |
clear: both; | |
} | |
} | |
.newsletter-form-input-wrapper { | |
float: left; | |
width: 33.33%; | |
padding: 0 10px; | |
} | |
.newsletter-form-input, | |
.newsletter-form-button { | |
display: block; | |
width: 100%; | |
padding: 10px; | |
height: 40px; | |
border: 0; | |
border-radius: 3px; | |
} | |
.newsletter-form-input { | |
color: #606060; | |
&:focus, &:active { | |
box-shadow: 0 0 0 rgba(#000,0); | |
} | |
} | |
.newsletter-form-button { | |
background: #4b4c4d; | |
} | |
/*------------------------------------*\ | |
#MEDIA-QUERIES | |
\*------------------------------------*/ | |
@media all and (max-width: 1024px) { | |
.newsletter-form { | |
display: block; | |
width: 100%; | |
} | |
.newsletter-form__text, | |
.newsletter-form__signup { | |
display: block; | |
width: 100%; | |
} | |
.newsletter-form__signup { | |
margin-top: 20px; | |
} | |
.newsletter-form-input-wrapper { | |
&:first-child { | |
padding-left: 0; | |
} | |
&:last-child { | |
padding-right: 0; | |
} | |
} | |
} | |
@media all and (max-width: 650px) { | |
.newsletter-form-input-wrapper { | |
width: 100%; | |
padding: 10px 0 0 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment