"contact"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <body ng-app> <section> <img src="https://res.cloudinary.com/lenadi07/image/upload/v1466697668/3_wtc6if.png" /> <form novalidate class="angularform" name="form"> <h1>Contact</h1> <label for="field firstname"><input type="text" name="firstname" placeholder="Name" required ng-model="user.name"> <span ng-show="form.firstname.$dirty && form.firstname.$error.required">*</span></label> <label for="field email"><input type="email" name="email" placeholder="Email" required ng-model="user.email"> <span ng-show="form.email.$dirty && form.email.$error">*</span></label> <label for="field message"><textarea name="message" rows="1" cols="58">Message</textarea></label> <div class="submit"> <input type="submit" name="name" value="send" ng-disabled="form.$invalid"> </div> </form> </section> <script src="https://code.angularjs.org/1.2.6/angular.js"></script> </body>
section { max-width: 1500px; background: #EFEFEF; } img { width: 33%; float: left; } h1 { text-align: center; flex-basis: 500px; margin-left: 40%; font-size: 3.5em; font-family: serif; font-style: italic; font-weight: lighter; } .angularform { display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; max-width: 700px; } .field { margin: 20px 10px; padding: 10px; } input { margin: 10px 20px; padding: 15px; box-sizing: border-box; border: none; border-bottom: 2px solid #3E3E3E; font-style: italic; font-family: serif; background-color: #EFEFEF; outline-style: none; } /*placeholder settings*/ ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #3E3E3E; } ::-moz-placeholder { /* Firefox 19+ */ color: #3E3E3E; opacity: 1; } :-ms-input-placeholder { /* IE 10+ */ color: #000000; } :-moz-placeholder { /* Firefox 18- */ color: #3E3E3E; opacity: 1; } input:focus::-webkit-input-placeholder {color: transparent} :focus::-moz-placeholder {color: transparent} :focus:-moz-placeholder {color: transparent} :focus:-ms-input-placeholder {color: transparent} /*end placeholder*/ textarea { margin: 15px 20px 30px; padding: 10px; box-sizing: border-box; border: none; border-bottom: 2px solid #3E3E3E; font-family: serif; font-style: italic; background-color: #EFEFEF; } .submit { box-sizing: border-box; margin: 30px; width: 48%; text-align: center; } .submit input { box-sizing: border-box; text-transform: uppercase; font-family: sans-serif; font-style: normal; border: 1px solid; } input.ng-invalid.ng-dirty { border: 1px solid #C63337; } span { color: #C63337; }

Related: See More

Rotating CSS Card
Contact Form
Bootstrap Contact Form
Bootstrap Contact Form

Questions / Comments: