Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Email Optin
<div class="optin-container">
<div class="cta">Sign Up for my Newsletter</div>
<form class="form hidden">
<input type="email" id="email" name="email" placeholder="johndoe@gmail.com" />
<input type="submit" value="Submit" />
</form>
</div><!--end .container-->
$( document ).ready(function() {
$(".cta").click(function() {
$("form").slideDown(250);
// if form is visible
if ($("form").is(":visible")) {
// change .cta cursor to default
$(".cta").css('cursor', 'default');
}
$("#email").focus();
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,300)
// Colors
$gray: #EEEEEE
$orange: #FF9966
$red: #E52B50
$darkred: #9C2542
$text: #212121
*
box-sizing: border-box
body
background: $gray
color: $text
font:
family: 'Source Sans Pro'
size: 16px
padding: 4rem 2rem 2rem
display: flex
justify-content: center
flex-flow: row wrap
.optin-container
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
width: 30rem
.cta
background: $red
color: white
cursor: pointer
display: block
font-size: 2rem
line-height: 1
padding: 1.75rem 1rem
text-align: center
text-decoration: none
width: 100%
@media screen and (max-width: 600px)
line-height: 1.4
padding: 1.25rem 1rem
form
background: $darkred
display: flex
flex-flow: row nowrap
padding: 1rem
maring: 0
input
padding: .75rem
margin: 0
&[type="email"]
border: none
font-size: 1rem
flex: 1
outline: $red
&:focus
outline: .25rem solid $red
&[type="submit"]
background: linear-gradient(lighten($red, 5%), lighten($red, 0%))
cursor: pointer
color: white
border: none
font-size: 1rem
margin: 0 0 0 1rem
padding: 0 3rem
transition: all .25s ease-in-out
&:hover
background: linear-gradient(lighten($red, 6%), lighten($red, 1%))
@media screen and (max-width: 600px)
flex-flow: row wrap
input
padding: 1rem !important
margin: 0 !important
flex: 100%
&[type="submit"]
margin-top: 1rem !important
.hidden
display: none
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment