title: Contact Form 7 Text Fields not editable
body: <p>I am trying to use contact form 7 to create a custom–styled form. I am using WP Joints theme with foundation. </p>
  
  <p>The first 4 fields are not editable in chrome or firefox, but  the comment field is. All fields work in IE (strangely enough). What am I doing that is causing this? The styling needs to be this way for a client but I am probably using certain CSS that is altering the final product.</p>
  
  <p><a href="http://delindesign.com/adlhochgroup/contact/" rel="nofollow">Link to the site</a></p>
  
  <p>HERE IS THE CSS</p>
  
  <pre><code>#contact-bb {
      background-image: url("http://delindesign.com/adlhochgroup/wp-content/uploads/2016/10/contact-bg.jpg");
      background-repeat: no-repeat;
      background-position:0% 30%;
      background-size: 100%;
  }
  
  .contact-header {
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.2;
      color: #8ca408;
      text-align: center;
      padding: 3rem 0 3rem 0;
      }
  
  #first_margin {
  margin-bottom:.5rem !important; 
      }
  
  #comments_margin {
  padding-top:.5rem !important;   
      }
  
  
  .wpcf7-email {
  margin-bottom: .5rem !important;
  }
  
  
  .wpcf7-text {
  background-color: #efefef;
  }
  
  .wpcf7-textarea {
  background-color: #efefef;
  }
  .wpcf7-submit {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
  color: #FFFFFF;
  text-align: center;
  border: none;
  padding: .5rem 4rem .5rem 4rem;
  display: inline-block;
  margin: 0 0 1rem 0;
  background-color: #8ca408; 
  }
  
  
  span.wpcf7-not-valid-tip { display: inline !important;}
  
  #cf7-left {
      padding: 0 .5rem .5rem 0 !important;
  }
  
  #cf7-right {
      padding: 0 0 .5rem 0 !important;
  }
  .wpcf7-text {
      margin-bottom:0;
  }
  
  
  
  #no-pad {
      padding:0 !important;
      }
  
  .pad-left-1c {
      padding-left: 5rem;
          }
  
  .bold-contact {
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 1.125rem;
      font-weight: 700;
      margin-bottom: .5rem;
      line-height: 1.33;
      color: #333333;
      text-align: left;
      }
  
  
  
      #contact-padding{
      padding-top: 1.8rem !important;
      }
  
      .reg-contact {
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 1.125rem;
      font-weight: 400;
      margin: auto;
      line-height: 1.33;
      color: #333333;
      text-align: left;
      }
  </code></pre>
  
  <p>and the form</p>
  
  <pre><code>&lt;div id="cf7-left" class="large-6 small-6 columns"&gt;
              [text* firstname placeholder id:first_margin akismet:author "First Name"]
              [text lastname placeholder "Last Name"]
          &lt;/div&gt;
  
          &lt;div id="cf7-right" class="large-6 small-6 columns"&gt;
              [email email placeholder "Email"]
              [text company placeholder "Company"]
          &lt;/div&gt;
  
  
  &lt;div class="large-12 pad-top"&gt;
          [textarea* comments placeholder id:comments_margin "Comments"]
          [submit id:submit-button "Submit"]
      &lt;/div&gt;
  </code></pre>