Natural Language Form

index.html

<form action="http://www.yelp.com/search" method="get" target="_blank">
  I'm looking for a
  
  <span id="atmosphere" class="input-container">
    <span class="placeholder">fancy</span>
    <span class="input selectbox">
      <select class="fancy-select hidden" name="find_desc">
        <option value="fancy">fancy</option>
        <option value="hip">hip</option>
        <option value="romantic">romantic</option>
        <option value="casual">casual</option>
      </select>
    </span>
  </span> 
  <span id="cuisine" class="input-container">
    <span class="placeholder">chinese</span>
    <span class="input selectbox">
      <select name="cflt" class="fancy-select hidden">
        <option value="chinese">chinese</option>
        <option value="italian">italian</option>
        <option value="french">french</option>
        <option value="german">german</option>
      </select>
    </span>
  </span> 
  restaurant in 
  <span id="location" class="input-container no-overflow">
    <span class="input text">
      <input type="text" id="location-input" name="find_loc" value="New York"/>
    </span>
    <span class="placeholder">New York</span>.
  </span>
  <button type="submit">Find a Restaurant</button>
</form>

Natural Language Form.markdown

Natural Language Form

Why use stupid boxed form elements when we can ask our users to simply complete a sentence in natural language? Inspired by this Medium article: https://medium.com/@saijogeorge/creative-form-input-field-design-examples-bfe5dd50808a

A Pen by Jesse Couch on CodePen.

License.

script.js

// show and hide styled inputs, update natural language statement
$('.input-container').click(function() {
  var target = $(this);
  var targetInput = $(this).find('input');
  var targetSelect = $(this).find('select');
  var styledSelect = $(this).find('.newSelect');
  target.addClass('active');
  targetInput.focus();
  targetInput.change(function() {
    var inputValue = $(this).val();
    var placeholder = target.find('.placeholder')
    target.removeClass('active');
    placeholder.html(inputValue);
  });
  targetSelect.change(function() {
    var inputValue = $(this).val();
    var placeholder = target.find('.placeholder')
    target.removeClass('active');
    placeholder.html(inputValue);
  });
  styledSelect.click(function() {
    var target = $(this);
    setTimeout(function() {
      target.parent().parent().removeClass('active');
    }, 10);
  });
});

// style selects

// Create the new select
var select = $('.fancy-select');
select.wrap('<div class="newSelect"></div>');
$('.newSelect').prepend('<div class="newOptions"></div>');

//populate the new select
select.each(function() {
  var selectOption = $(this).find('option');
  var target = $(this).parent().find('.newOptions');
  selectOption.each(function() {
    var optionContents = $(this).html();
    var optionValue = $(this).attr('value');
    target.append('<div class="newOption" data-value="' + optionValue + '">' + optionContents + '</div>')
  });
});
// new select functionality
var newSelect = $('.newSelect');
var newOption = $('.newOption');
// update based on selection 
newOption.on('mouseup', function() {
  var OptionInUse = $(this);
  var siblingOptions = $(this).parent().find('.newOption');
  var newValue = $(this).attr('data-value');
  var selectOption = $(this).parent().parent().find('select option');
  // style selected option
  siblingOptions.removeClass('selected');
  OptionInUse.addClass('selected');
  // update the actual input
  selectOption.each(function() {
    var optionValue = $(this).attr('value');
    if (newValue == optionValue) {
      $(this).prop('selected', true);
    } else {
      $(this).prop('selected', false);
    }
  })
});
newSelect.click(function() {
  var target = $(this);
  target.parent().find('select').change();
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

*,*:before,*:after {
  box-sizing:border-box;
  transition:.25s ease-in-out;
}

*::selection {
  background:#ff202f;
  color:white;
}
body {
  background-color:#04b8ad;
}

form {
  max-width:500px;
  margin:100px auto 0 auto;
  font-family:roboto;
  font-weight:200;
  font-size:40px;
  line-height:60px;
  color:white;
  .input-container {
    border-bottom:1px dashed #007a73;
    color:#007a73;
    padding:6px;
    margin-left:-6px;
    margin-right:-6px;
    display:inline-block;
    position:relative;
    &.no-overflow {
      max-width:100%;
      .input {
        max-width:100%;
        input {
          max-width:100%;
        }
      }
    }
    &:hover {
      border-bottom:1px dashed #004f4a;
      color:#004f4a;
      cursor:pointer;
    }
    &.active {
      z-index:5000;
      border-bottom:1px dashed #004f4a;
      color:#004f4a;
      cursor:default;
      &:before {
        content:'';
        display:block;
        background-color:rgba(0,0,0,.3);
        position:fixed;
        z-index:0;
        width:100%;
        height:100%;
        left:0;
        top:0;
      }
      .input {
        visibility:visible;
        opacity:1;
      }
    }
    .newOption {
      padding:6px 46px 6px 6px;
      background:white;
      position:relative;
      &:hover {
        background:#ff202f;
        color:white;
        &:after {
          color:white !important;
        }
      }
      &.selected {
        &:after {
          content:'\f00c';
          font-family:FontAwesome;
          color:#ff202f;
          display:block;
          top:0;
          right:0;
          height:72px;
          width:46px;
          font-size:20px;
          text-align:center;
          line-height:72px;
          position:absolute;
        }
      }
    }
    .placeholder {
      position:relative;
      z-index:1;
    }
    .input {
      display:block;
      visibility:hidden;
      position:absolute;
      z-index:2;
      top:0;
      left:0;
      opacity:0;
    }
  }
  input,select {
    &[type="text"]{
      border:none;
      outline:none;
      margin:0;
      padding:6px;
      font-weight:200;
      font-size:40px;
      line-height:60px;
      display:block;
    }
    &.hidden {
      position:absolute;
      left:-5000px;
    }
  }
  button {
    display:block;
    background:white;
    border:none;
    padding:10px 55px 10px 20px;
    font-size:30px;
    font-weight:200;
    margin:30px 0 0 0;
    box-shadow:inset 0px 0px 0px #ff202f;
    position:relative;
    i {
      transition:0s 0s ease-in-out;
    }
    &:after {
      content:'\f105';
      display:block;
      position:absolute;
      top:0;
      right:0;
      height:55px;
      width:55px;
      font-family:FontAwesome;
      line-height:55px;
      text-align:center;
      color:#ff202f;
    }
    &:hover {
      box-shadow:inset 350px 0 0 #ff202f;
      color:white;
      cursor:pointer;
      &:after {
        color:white;
      }
    }
  }
}

styles

<link href="http://fonts.googleapis.com/css?family=Roboto:300,500,900" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />