Everything you can do with Beauter


Beauter adds responsiveness and effects while also preserving the basic functioning of forms by modifying the tags directly. All the standard HTML form elements are valid.

Contact information:

Wrap checkbox and radio inputs in a label with <span class="-label-body">.

    <legend>Contact information:</legend>
  <div class="row">
    <div class="col m6">
      <label for="Email">Enter email</label>
      <input class="_full-width" type="email" placeholder="" id="Email">
    <div class="col m6">
      <label for="Input">Reason for contact</label>
      <select class="_width100" id="Input">
        <option value="Option 1">Help</option>
        <option value="Option 2">Thanks</option>
        <option value="Option 3">Support</option>
  <label for="Message">Message</label>
  <div class="col m12">
  <textarea class="_width100" placeholder="Your message.." id="Message"></textarea>
  <label for="Send">
    <input type="checkbox" id="Send">
    <span class="-label-body">Send a copy to yourself</span>
  <input class=" _primary button" type="submit" value="Submit">
  <input class="button" type="reset" value="Reset">


  • New 'Examples' section coming with wonderful tutorials!
  • Adding animations and transitions effects soon.
  • 0.3 development started. Join us here.

Get Involved

Your contribution can make beauter more beautiful. Visit Github to collaborate.

Star Fork

Sitemap Designed with by Shubham Ramdeo
Follow @ramdeoshubham
outboxcraft logoOutboxcraft
© 2017