"Untitled"
Bootstrap 3.3.0 Snippet by calvez9

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="screen-reader-response" role="alert" aria-live="polite"></div> <form action="/h4m/?preview_id=2223&preview_nonce=7cb8f51f56&_thumbnail_id=-1&preview=true#wpcf7-f608-p2223-o1" method="post" class="wpcf7-form init" novalidate="novalidate"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="608"> <input type="hidden" name="_wpcf7_version" value="5.2.2"> <input type="hidden" name="_wpcf7_locale" value="en_US"> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f608-p2223-o1"> <input type="hidden" name="_wpcf7_container_post" value="2223"> <input type="hidden" name="_wpcf7_posted_data_hash" value=""> </div> <div class="formBox"> <div class="row"> <div class="col-md-6" style="margin-bottom:20px;"><label>N</label><span class="wpcf7-form-control-wrap name1"><input type="text" name="name1" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=");"></span></div> <div class="col-md-6" style="margin-bottom:20px;"><label>Titel</label><span class="wpcf7-form-control-wrap titel"><input type="text" name="titel" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"></span></div> </div> <div class="row"> <div class="col-md-6" style="margin-bottom:20px;"><label>Name</label><span class="wpcf7-form-control-wrap name1"><input type="text" name="name1" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span></div> <div class="col-md-6" style="margin-bottom:20px;"><label>Nachname</label><span class="wpcf7-form-control-wrap nachname"><input type="text" name="nachname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span></div> </div> </div> <div class="row"> <div class="col-md-6" style="margin-bottom:20px;"><label>Your Email</label><span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span></div> <div class="col-md-6" style="margin-bottom:20px;"><label>Telefonnummer</label><span class="wpcf7-form-control-wrap tel-767"><input type="tel" name="tel-767" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false"></span></div> </div> <div class="row"> <div class="col-md-12"> <p>Ihre Anliegen in Sachen Gesundheit (Vorerkrankungen, aktuelle Beschwerden, Priorität...</p> </div> </div> <div class="row"> <div class="col-md-12"> <div class="btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary active"><br> <input type="checkbox" autocomplete="off"> Basis-Paket<br> </label><br> <label class="btn btn-secondary"><br> <input type="checkbox" autocomplete="off"> Executive-Paket<br> </label><br> <label class="btn btn-secondary"><br> <input type="checkbox" autocomplete="off"> Executive-De-Luxe-Paket<br> </label><br> <label class="btn btn-secondary"><br> <input type="checkbox" autocomplete="off"> Pimp your Performance<br> </label> </div> </div> </div> <div class="row"> <div class="col-md-12"> <span class="wpcf7-form-control-wrap acceptance-720"><span class="wpcf7-form-control wpcf7-acceptance optional"><span class="wpcf7-list-item"><label><input type="checkbox" name="acceptance-720" value="1" aria-invalid="false"><span class="wpcf7-list-item-label">Ich habe den Hinweis zum Datenschutz gelesen und akzeptiert</span></label></span></span></span><br> <span class="wpcf7-form-control-wrap acceptance-721"><span class="wpcf7-form-control wpcf7-acceptance optional"><span class="wpcf7-list-item"><label><input type="checkbox" name="acceptance-721" value="1" aria-invalid="false"><span class="wpcf7-list-item-label">Ich möchte einen Newsletter erhalten.</span></label></span></span></span> </div> </div> <p><input type="submit" value="SENDEN" class="wpcf7-form-control wpcf7-submit btn-color-primary"><span class="ajax-loader"></span></p> </form> </div> </div>
.formBox{ margin-top: 90px; padding: 50px; } .formBox h1{ margin: 0; padding: 0; text-align: center; margin-bottom: 50px; text-transform: uppercase; font-size: 48px; } .wpcf7-form-control-wrap{ position: relative; box-sizing: border-box; margin-bottom: 50px; } .wpcf7-form-control-wrap .wpcf7-text{ position: absolute; font-size: 24px; line-height: 50px; transition: .5s; opacity: .5; } .wpcf7-form-control-wrap .input{ position: relative; width: 100%; height: 50px; background: transparent; border: none; outline: none; font-size: 24px; border-bottom: 1px solid rgba(0,0,0,.5); } .focus .wpcf7-text{ transform: translateY(-30px); font-size: 18px; opacity: 1; color: #00bcd4; } textarea{ height: 100px !important; }

Related: See More


Questions / Comments: