お問い合わせフォーム7テキストフィールドを編集できません

Question

連絡先フォーム7を使用してカスタムスタイルのフォームを作成しようとしています。私はWP Jointsのテーマを基盤としています。

最初の4つのフィールドはchromeまたはfirefoxでは編集できませんが、コメントフィールドはです。すべてのフィールドはIEで動作します（不思議なほど）。私はこれを引き起こしているのですか？スタイリングはクライアントのためにはこのようにする必要がありますが、最終製品を変更している特定のCSSを使用している可能性があります。 HERE

Link to the site

はCSS

#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; 
    } 

、問題は私の基礎行とテーブルにそれらを入れていたフォーム

<div id="cf7-left" class="large-6 small-6 columns"> 
      [text* firstname placeholder id:first_margin akismet:author "First Name"] 
      [text lastname placeholder "Last Name"] 
     </div> 

     <div id="cf7-right" class="large-6 small-6 columns"> 
      [email email placeholder "Email"] 
      [text company placeholder "Company"] 
     </div> 


<div class="large-12 pad-top"> 
     [textarea* comments placeholder id:comments_margin "Comments"] 
     [submit id:submit-button "Submit"] 
    </div> 

Answer 1

です。基礎のフィールドは編集可能でした。私の解決策はdisplay：tableを使ってdivを作成し、フィールドを50％幅の表のセルを左に浮動させることでした。これまでのところ、すべてのブラウザで機能しています。