ID's

Forms

Use ANTSAND Style's custom form styles in your web application. Capture User information in an elegant manner

Examples

Form Default

<div  class="form-default form">
   <div>
      <div class="row cf form-row">
         <div class="form-elements position-relative span-1-of-2-tablet" style="padding: 0px;">
            <div>
               <div class="label" style="min-height: 20px; line-height: 1.2;">First Name</div>
               <div class="font-12" style="color: rgba(15, 15, 15, 0.7); line-height: 1.2; min-height: 15px;">Enter your first name</div>
            </div>
            <div>
               <input type="text" data-input="input" data-name="First name" placeholder="First name" class="input"> 
            </div>
         </div>
         <div class="form-elements position-relative span-1-of-2-last-tablet" style="padding: 0px;">
            <div>
               <div class="label" style="min-height: 20px; line-height: 1.2;">Last Name</div>
               <div class="font-12" style="color: rgba(15, 15, 15, 0.7); line-height: 1.2; min-height: 15px;">Enter your surname</div>
            </div>
            <div>
               <input type="text" data-input="input" data-name="Last name" placeholder="Last name" class="input"> <!----> <!---->
            </div>
         </div>
      </div>
      <div class="row cf form-row">
         <div class="form-elements position-relative" style="padding: 0px;">
            <div>
               <div class="label" style="min-height: 20px; line-height: 1.2;">Email</div>
               <div class="font-12" style="color: rgba(15, 15, 15, 0.7); line-height: 1.2; min-height: 15px;">Enter a valid email id</div>
            </div>
            <div>
               <input type="text" data-input="input" data-name="Email" placeholder="Email" class="input"> 
            </div>
         </div>
      </div>
      <div class="row cf form-row">
         <div class="form-elements position-relative width-50-tablet" style="padding: 0px;">
            <div>
               <div class="label" style="min-height: 20px; line-height: 1.2;">Phone Number</div>
               <div class="font-12" style="color: rgba(15, 15, 15, 0.7); line-height: 1.2; min-height: 15px;">Enter your phone number</div>
            </div>
            <div>
               <input type="text" data-input="input" data-name="Phone Number" placeholder="Phone Number" class="input"> <!----> <!---->
            </div>
         </div>
      </div>
      <div class="row cf form-row">
         <div class="form-elements position-relative" style="padding: 0px;">
            <div>
               <div class="label" style="min-height: 20px; line-height: 1.2;">Comments</div>
               <div class="font-12" style="color: rgba(15, 15, 15, 0.7); line-height: 1.2; min-height: 15px;">Please enter your comments</div>
            </div>
            <div>
               <textarea data-name="Textarea" type="" data-input="input" placeholder="Comments" class="input textarea"></textarea>
            </div>
         </div>
      </div>
      <button type="button" onclick="submit()" class="default-btn btn">Submit </button>
   </div>
</div>