Friendly Form

Friendly Form.markdown

Friendly Form ('-' * 13) Friendly way to have someone fill out a form. Sort of like mad libs... or something.

A Pen by Ryan Trimble on CodePen.

License.

index.html

<div>
  <h2>Greetings!</h2>
  <form>
    <p>My name is
      <input type="text" placeholder="John Doe" autofocus/> and I am interested in a
      <select>
        <option selected="selected"></option>
        <option>Website for my business</option>
        <option>Website Redesign</option>
        <option>Web Store</option>
        <option>Blog</option>
      </select>. My email address is
      <input type="email" placeholder="john@doe.com" /> and my phone number is
      <input type="phone" placeholder="(555) 867-5309" />. Please get back to me as soon as you can!</p>
    <input type="submit" value="Send" />
  </form>
</div>

style.css

div{
  width:900px;
  font-size:2.5em;
  color: #333;
  display:block;
  margin: 0 auto;
  line-height:1.7;
  font-family: 'Bree Serif', serif;
  h2{
    padding-bottom:0;
    line-height:0;
  }
  p{
    padding-top:0;
  }
  form{
    input{
      border:0;
      border-bottom:1px solid #333;
      outline-width: 0;
      text-align:center;
    }
    select{ 
      border:none;
      border-bottom:1px solid #333;
      outline-width: 0;
      
    }
    input[type^="submit"]{
      background:white;
      border:none;
      border:1px solid black;
      padding:5px 15px;
      border-radius:10px;
      &:active{
        background:#333;
        color:#FFF;
      }
    }
  }
}