Forms

forms.markdown

Forms

A Pen by wazcraft on CodePen.

License.

index.html

<!-- Uses Line Awesome, https://icons8.com/line-awesome -->
<!--
  • Form Validation for required and optional fields
  • data-pattern replaces pattern 
    ("tel", "zip", "email" or custom pattern)
  • Use <input> on forms you want to auto fill
  • Use <textarea> on forms you want to supress autofill
    /!\ If a form uses inputs and textareas, the input 
        fields could allow the browser to populate textarea 
    /!\ Set textarea rows="1" for single line input  
  • Use inputmode and type to indicate mobile 
    keyboard type
  • If you dont need to show a placeholder, set 
    placeholder=" "

    
  
-->
<form oninput='FIELD.Validate(event);'>
  <label><span style='font-size:28pt;'>Form </span><i>(Auto Fill)</i></label>
  <label class='field'>
    <input inputmode='text' type='text' name='first_name' placeholder='First Name' required ></input>
    <span>First Name</span>
  </label>
  <label  class='field'>
    <input inputmode='text' type='text' name='last_name'  placeholder='Last Name' required ></input>
    <span>Last Name</span>
  </label>
  <label class='field'>
    <input inputmode='email' type='email' name='email' placeholder='example@domain.com' data-pattern='email' required ></input>
    <span><i class="las la-envelope"></i> Email</span>
  </label>
  <label class='field'>
    <input inputmode='tel' type='tel' name='phone' placeholder='123 456 7890' data-pattern='tel' required ></input>
    <span><i class="las la-phone"></i> Phone</span>
  </label>
  <label class='field'>
    <input inputmode='numeric' type='text' name='zip' placeholder='12345-6789' data-pattern='zip' required ></input>
    <span><i class="las la-map-marker"></i> Zip</span>
  </label>
  <label class='field'>
    <select name='state' required >
      <option selected disabled value=''>State</option>
      <optgroup label="States">
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <option value="CO">Colorado</option>
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="DC">District Of Columbia</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="ID">Idaho</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Louisiana</option>
          <option value="ME">Maine</option>
          <option value="MD">Maryland</option>
          <option value="MA">Massachusetts</option>
          <option value="MI">Michigan</option>
          <option value="MN">Minnesota</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="MT">Montana</option>
          <option value="NE">Nebraska</option>
          <option value="NV">Nevada</option>
          <option value="NH">New Hampshire</option>
          <option value="NJ">New Jersey</option>
          <option value="NM">New Mexico</option>
          <option value="NY">New York</option>
          <option value="NC">North Carolina</option>
          <option value="ND">North Dakota</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
      </optgroup>
      <optgroup label="Territories">
          <option value="AS">American Samoa</option>
          <option value="GU">Guam</option>
          <option value="MP">Northern Mariana Islands</option>
          <option value="PR">Puerto Rico</option>
          <option value="UM">United States Minor Outlying Islands</option>
          <option value="VI">Virgin Islands</option>
      </optgroup>
      <optgroup label="Armed Forces">
          <option value="AA">Armed Forces Americas</option>
          <option value="AP">Armed Forces Pacific</option>
          <option value="AE">Armed Forces Others</option>
      </optgroup>
    </select>
    <span><i class="las la-map-marker"></i> State</span>
  </label>
  <label class='field'>
    <textarea inputmode="text" type="text" name='notes' placeholder=' ' rows='4' ></textarea>
    <span><i class="las la-edit"></i> Notes</span>
  </label>
  <button type="submit"><i class="las la-paper-plane"></i> Submit</button>
</form>

<form class='dark' oninput='FIELD.Validate(event)'>
  <label><span style='font-size:28pt;'>Form </span><i>(No Auto Fill)</i></label>
  <label class='field'>
    <textarea inputmode='text' type='text' name='first_name' placeholder='First Name' required rows='1' ></textarea>
    <span>First Name</span>
  </label>
  <label class='field'>
    <textarea inputmode='text' type='text' name='last_name'  placeholder='Last Name'  required rows='1' ></textarea>
    <span>Last Name</span>
  </label>
  <label class='field'>
    <textarea inputmode='email'type='email'  name='email' placeholder='example@domain.com' data-pattern='email' required rows='1' ></textarea>
    <span><i class="las la-envelope"></i> Email</span>
  </label>
  <label class='field'>
    <textarea inputmode='tel' type='tel' name='phone' placeholder='123 456 7890' data-pattern='tel' required rows='1' ></textarea>
    <span><i class="las la-phone"></i> Phone</span>
  </label>
  <label class='field'>
    <textarea inputmode="numeric" type="text" name='zip' placeholder='12345-6789' data-pattern='zip' required rows='1' ></textarea>
    <span><i class="las la-map-marker"></i> Zip</span>
  </label>
  <label class='field'>
    <select name='state' required >
      <option selected disabled value=''>State</option>
      <optgroup label="States">
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <option value="CO">Colorado</option>
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="DC">District Of Columbia</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="ID">Idaho</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Louisiana</option>
          <option value="ME">Maine</option>
          <option value="MD">Maryland</option>
          <option value="MA">Massachusetts</option>
          <option value="MI">Michigan</option>
          <option value="MN">Minnesota</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="MT">Montana</option>
          <option value="NE">Nebraska</option>
          <option value="NV">Nevada</option>
          <option value="NH">New Hampshire</option>
          <option value="NJ">New Jersey</option>
          <option value="NM">New Mexico</option>
          <option value="NY">New York</option>
          <option value="NC">North Carolina</option>
          <option value="ND">North Dakota</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
      </optgroup>
      <optgroup label="Territories">
          <option value="AS">American Samoa</option>
          <option value="GU">Guam</option>
          <option value="MP">Northern Mariana Islands</option>
          <option value="PR">Puerto Rico</option>
          <option value="UM">United States Minor Outlying Islands</option>
          <option value="VI">Virgin Islands</option>
      </optgroup>
      <optgroup label="Armed Forces">
          <option value="AA">Armed Forces Americas</option>
          <option value="AP">Armed Forces Pacific</option>
          <option value="AE">Armed Forces Others</option>
      </optgroup>
    </select>
    <span><i class="las la-map-marker"></i> State</span>
  </label>
  <label class='field'>
    <textarea inputmode="text" type="text" name='notes' placeholder=' ' rows='4' ></textarea>
    <span><i class="las la-edit"></i> Notes</span>
  </label>
  <button type="submit"><i class="las la-paper-plane"></i> Submit</button>
</form>

script.js

/*
 * FIELD 
 */
var FIELD = FIELD || {};
( function () {
  FIELD.Validate = function (e) {
    
    let field = e.target
    
    // if <select> indicate if answered
    if(field.tagName == 'SELECT'){
      if( !field.options[field.selectedIndex].getAttribute('disabled') ){
        field.setAttribute('checked', '');
      }else{
        field.removeAttribute('checked');
      }
    }
    
    // if <textarea> prevent line breaks
    if(field.tagName == 'TEXTAREA'){
      if(field.getAttribute('rows') == '1') field.value = field.value.replace(/\n/g,"");
    }
    
    // validate patterns (data-pattern replaced pattern arttribute)
    if( field.dataset.pattern ) {
      let rex, err;
      switch(field.dataset.pattern){
        case 'tel':
          rex = /^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})(?: *x(\d+))?\s*$/;
          err = "Not a valid phone number";
          break;        
        case 'zip':
          rex = /^\d{5}([-]|\s*)?(\d{4})?$/;
          err = "Not a valid zip code";
          break;
        case 'email':
          rex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
          err = "Not a valid email address";
          break;
        default:
          rex =  new RegExp('^' + field.getAttribute('pattern') + '$');
          err = "Please match the format requested.";
          break; 
      }
      
      // test validation
      field.setCustomValidity( ( field.value.match( rex ) ) ? '' : err );
      
    }
  }
} ) (); 

// catch the form submit
window.addEventListener('submit', function(e){e.preventDefault(); alert('Submitted!');});

style.css

html, body {
  padding: 0; margin: 0;
  width: 100%; height: 100%;
  text-align:center;
  background-image: url( 'https://www.wazcraft.com/cpa/img/felt.png' );
  background-position: center center;
  font-family: Helvetica, Arial, Sans-Serif;
	font-weight: lighter;
  overflow:scroll;
}



/*
 *  Color Scheme
 */
:root{
  --color-1:#000; /* black */
  --color-2:#999; /* grey */
  --color-3:#fff; /* white */
  --color-4:#9b0; /* green */
  --color-5:#e90; /* orange */
}



/*
 *  Form Styles
 */
form {
  display:inline-block;
  position:relative;
  box-sizing: border-box;
  width:max(200pt,min(45vw, 400pt ));
  height:auto;
  text-align:left;
  box-shadow:0pt 4pt 8pt rgba(0,0,0,0.25);
  padding:10pt;
  margin:10pt;
  background: var(--color-3);
  background-image:url( 'https://www.wazcraft.com/cpa/img/paper.png' );
}

form.dark {
  color:var(--color-3);
  background: var(--color-1);
  background-image:url( 'https://www.wazcraft.com/cpa/img/paper_drk.png' );
}

button {
  border: none;
  border-radius: 0;
  color:white;
  background:var(--color-4);
  font-size: 14pt;
  margin:4pt 0pt ; padding:4pt 8pt 4pt 8pt;
  box-shadow: 0pt 2pt 4pt rgba(0,0,0,0.33);
  cursor:pointer;
}



/* 
 *  Disable Default Styles
 */
label.fieldinput::-webkit-outer-spin-button,
label.fieldinput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

label.fieldinput[type=number] {
  -moz-appearance: textfield;
}

label.field select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-overflow: '';
  background:transparent;
}

label.field input:focus, 
label.field input:invalid,
label.field textarea:focus, 
label.field textarea:invalid,
label.field select:focus, 
label.field select:invalid{
  outline: none;
  box-shadow:none;
}



/*
 *  New Field Styles
 */
label.field {
  display:block;
  position:relative;
  width:100%; height:auto;
  margin:4pt 0pt; padding: 16pt 0pt 0pt 0pt;
  font-family: Helvetica, Arial, Sans-Serif;
  font-weight: lighter;
  font-size: 14pt;
}

label.field label, 
label.field input, 
label.field span, 
label.field textarea,
label.field select{
  display:block;
  position:relative;
  width:100%; height:auto;
  font-family: Helvetica, Arial, Sans-Serif;
  font-weight: lighter;
  font-size: 14pt;
  border:none;
  border-radius: 0;
  box-sizing: border-box;
  padding: 0pt 4pt; margin: 0;
  resize: none;
  background:transparent;
}

label.field input, 
label.field textarea,
label.field select{
  top:0;
  left:0;
  padding:4pt;
  border:none;
  border-left:solid 2pt var(--color-2);
  border-bottom:solid 1pt var(--color-2);
}

label.field span {
  position: absolute;
  top:16pt; left:2pt;
  display: inline-block;
  transition:transform 0.25s ease-in-out, margin-left 0.25s ease-in-out;
  transform-origin:bottom left ;
  pointer-events:none ;
  margin-right:-100% ;
  padding:4pt;
}

label.field input,
label.field textArea,
label.field select[checked],
label.field select[checked]:focus{
  color:inherit;
}


label.field input::placeholder,
label.field textarea::placeholder,
label.field select{
  color:transparent; 
  transition:color 0.25s; 
}

label.field input:focus::placeholder,
label.field textarea:focus::placeholder,
label.field select:focus{
  color:var(--color-2); 
}

label.field input:focus + span, 
label.field input:not(:placeholder-shown) + span,
label.field textarea:focus + span, 
label.field textarea:not(:placeholder-shown) + span,
label.field select:focus + span,
label.field select[checked] + span{
  transform:scale(0.7,0.7) translate(-8pt, -34pt);
} 

label.field input:required, 
label.field textarea:required,
label.field select:required {
  border-left-color:var(--color-5);
} 

label.field input:valid:not(:placeholder-shown),
label.field textarea:valid:not(:placeholder-shown),
label.field select[checked] {
  border-left-color:var(--color-4);
}