JSFiddle - React, Tailwind, and code Playground

by jannis

HTML

<form class="section-left" id="contact-form" method="post" action="#send"  >

<div class='hiddenFields'>
<input type="hidden" name="ACT" value="16" />
<input type="hidden" name="URI" value="contact" />
<input type="hidden" name="XID" value="23d831ba2c23820fb6f241ffbbc3d11836873a88" />
<input type="hidden" name="status" value="open" />

<input type="hidden" name="return" value="" />
<input type="hidden" name="redirect_on_duplicate" value="" />
<input type="hidden" name="RET" value="#referrer_url" />
<input type="hidden" name="form_name" value="contact-form" />
<input type="hidden" name="id" value="freeform" />

<input type="hidden" name="params_id" value="300" />
<input type="hidden" name="site_id" value="1" />
</div>

    <div class="row">
        <label for="name">Name</label>
        <input type="text" id="name" value="" name="name" data-error="Please tell us your name." required />

    </div>
    <div class="row">
        <label for="email">Email</label>
        <input type="email" id="email" value="" name="email" data-error="We need this to email you back." required />
    </div>
    <div class="row">
        <label for="phone">Phone</label>

        <input type="tel" id="phone" value="" name="phone" />

    </div>
    <div class="row">
        <label for="mobile">Mobile</label>
        <input type="tel" id="mobile" value="" name="mobile" />
    </div>
    <div class="row">
        <label for="subject">Subject</label>

        <input type="text" id="subject" value="" name="subject" data-error="This is a required field." required />

    </div>
    <div class="row">
        <label for="message">Message</label>
        <textarea name="message" data-error="I'm sure you've come here for a reason. Please enter it here." required></textarea>
    </div>
      <button type="submit">Send</button>

</form>

CSS

#contact-form {
  width: 425px;
  padding-right: 40px;
  border-right: 1px dashed #b3b3b3;
  float: left; }

.contact-page {
  /* aside on the contact us page */ }
  .contact-page p {
    margin-bottom: 50px;
    line-height: 1.1;
    font-size: 17px;
    font-weight: normal;
    font-family: "museo500", sans-serif; }
  .contact-page aside {
    float: left;
    padding-left: 40px; }
    .contact-page aside .head {
      margin-bottom: 75px; }
      .contact-page aside .head p {
        line-height: 1.1;
        font-size: 17px;
        font-weight: normal;
        font-family: "museo500", sans-serif; }
    .contact-page aside p {
      margin-bottom: 20px; }
    .contact-page aside strong {
      float: left; }
    .contact-page aside ul {
      list-style: none; }
      .contact-page aside ul li {
        width: 100%;
        clear: both;
        padding-bottom: 20px;
        overflow: hidden; }
      .contact-page aside ul strong {
        margin-right: 20px;
        float: left;
        width: 100px;
        line-height: 1;
        font-size: 15px;
        font-weight: normal;
        font-family: "museo300", sans-serif;
        position: relative;
        top: 6px; }
      .contact-page aside ul span {
        /* the details */
        float: left;
        line-height: 1;
        font-size: 24px;
        font-weight: normal;
        font-family: "museo300", sans-serif; }

form .row {
  display: block;
  clear: both;
  margin-bottom: 20px;
  overflow: hidden; }
form input, form textarea {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #222;
  float: left;
  padding: 5px 8px;
  width: 310px;
  line-height: 1.35;
  font-size: 14px;
  font-weight: normal;
  font-family: "museo300", sans-serif; }
form textarea {
  height: 100px;
  min-width: 310px;
  max-width: 310px;
  min-height: 100px;
  max-height: 300px; }
form label {
  width: 80px;
  margin: 7px 10px 0 0;
  float: left;
  line-height: 1;
  font-size: 15px;
  font-weight: normal;
 ...

JavaScript

// the plugin
(function($){
    
    // extend the $.support function to test for native form attribute and type support
    // written by "lonesomeday" at http://stackoverflow.com/users/417562/lonesomeday
    // many thanks!
    if ( $.support.input === undefined ) { // make sure the .support function does not already support testing for this (a feeble attempt at future proofing this script?)
        (function(d){d.extend(d.support,function(){var c=document.createElement("input");return{inputtypes:function(){var a="search number range color tel url email date month week time datetime datetime-local".split(" "),b={};i=0;for(j=a.length;i<j;i++){c.setAttribute("type",a[i]);b[a[i]]=c.type!=="text"}return b}(),input:function(){var a="autocomplete autofocus list placeholder max min multiple pattern required step".split(" "),b={};i=0;for(j=a.length;i<j;i++)b[a[i]]=!!(a[i]in c);return b}()}}())})(jQuery);
    }
    
    // Let's Go!
    $.fn.extend({ 
        
        //pass the options variable to the function
        autoForm5: function(options) {
    
            $.fn.autoForm5.defaults = {
                
                // general plugin settings & defaults
                validateForm: true,                     // enable error checking to eliminate placeholder and false values to be submitted
                requiredFields: '',                     // manually allow for adding required fields here (comma separated)
                interimDataField: 'instructions',         // the attribute name used to store interim text
                
                // the default classes used by the plugin
                classes : {
                    form        : 'af5-activeform',        // added to the form that is the parent of the currenly focussed field
                    fieldset    : 'af5-activefieldset',    // added to the fieldset that is the parent of the currently focussed field
                    error        : 'af5-error',             // added to fields that...