Simple Subscribe form
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<hgroup>
<h2>
Subscribe for
<select class="frecuency">
<option value="0">daily</option>
<option value="1" selected>weekly</option>
<option value="2">monthly</option>
</select>
newsletter
</h2>
<h1 class="free">For Free</h1>
</hgroup>
<div class="well">
<form action="#">
<div class="input-group">
<input class="btn btn-lg" name="email" id="email" type="email" placeholder="Your Email" required>
<button class="btn btn-info btn-lg" type="submit">Submit</button>
</div>
</form>
</div>
<small class="promise"><em>We won't send spam.</em></small>
</div>
</div>
</div>
</section>
section {
padding: 100px 0;
text-align: center;
}
select.frecuency {
border: none;
font-style: italic;
background-color: transparent;
cursor: pointer;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform .35s ease-in;
transition: -webkit-transform .35s ease-in;
border-bottom: none;
}
select.frecuency:focus {
outline: none;
border-bottom: 5px solid #39b3d7;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
-webkit-transition: -webkit-transform .35s ease-in;
transition: -webkit-transform .35s ease-in;
}
.free {
text-transform: uppercase;
}
.input-group {
margin: 20px auto;
width: 100%;
}
input.btn.btn-lg,
input.btn.btn-lg:focus {
outline: none;
width: 60%;
height: 60px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
button.btn {
width: 40%;
height: 60px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.promise {
color: #999;
}
Just came over this. One question regarding the <input…>: It uses a “btn btn-lg” class, wich renders in Safari as a button, so I can’t enter any text. In Chrome it works as input field. Shouldn’t it be “input input-lg” instead?,@maridlcrmn:disqus that would be correct for some browsers like Safari, removing btn btn-lg should help.,Thanks. Now I can enter something but don’t see what I enter. Even I set the .color: to black… very strange.,does this actually save the email address anywhere? do you have one that does that?,I was wondering the same thing? All of these type of input designs are great, but as a beginner, I need someone to spell it out to me. Where does the input get stored/saved?,the input doesnt work in safari?!,Would be more awesome if removing chrome’s input focus blue border :-),Ok. That’s done!,I really do love your designs. I keep finding myself forking them.,Thank you Robert… :),”We won’t never send spam”? ;),ok.. it is an example.. just enjoy it.. thanks for your comment Juukie14.. I really appreciate you put your attention on me.. or maybe you can suggest one sentence more original please..,I would replace it with: “We won’t send spam”.,ok, thanks.,Please be nice 🙂 Maria is not a native English speaker but her designs are amazing!,Oh.. it’s true.. thank you very much for sticking.. :),I totally agree the snippet looks great, but I had only a lough because of the sententence.,i like so much ur designs..,The author is maridlcrmn
Loading...
