"Simple Subscribe form"
Bootstrap 3.2.0 Snippet by maridlcrmn

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

Related: See More


Questions / Comments:

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?

Robert M. Münch () - 9 years ago - Reply 0


@maridlcrmn:disqus that would be correct for some browsers like Safari, removing btn btn-lg should help.

maxsurguy () - 9 years ago - Reply 0


Thanks. Now I can enter something but don't see what I enter. Even I set the .color: to black... very strange.

Robert M. Münch () - 9 years ago - Reply 0


does this actually save the email address anywhere? do you have one that does that?

lee () - 9 years ago - Reply 0


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?

Kayla () - 9 years ago - Reply 0


the input doesnt work in safari?!

Lina Stoumpou () - 9 years ago - Reply 0


Would be more awesome if removing chrome's input focus blue border :-)

Sam Su () - 10 years ago - Reply 0


Ok. That's done!

Maria del Carmen () - 10 years ago - Reply 0


I really do love your designs. I keep finding myself forking them.

mouse0270 () - 10 years ago - Reply 0


Thank you Robert... :)

Maria del Carmen () - 10 years ago - Reply 0


"We won't never send spam"? ;)

Juukie14 () - 10 years ago - Reply 0


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..

Maria del Carmen () - 10 years ago - Reply 0


I would replace it with: "We won't send spam".

Juukie14 () - 10 years ago - Reply 0


ok, thanks.

Maria del Carmen () - 10 years ago - Reply 0


Please be nice :) Maria is not a native English speaker but her designs are amazing!

maxsurguy () - 10 years ago - Reply 0


Oh.. it's true.. thank you very much for sticking.. :)

Maria del Carmen () - 10 years ago - Reply 0


I totally agree the snippet looks great, but I had only a lough because of the sententence.

Juukie14 () - 10 years ago - Reply 0


i like so much ur designs..

maideen () - 10 years ago - Reply 0