2016-10-12 53 views
0

我正在嘗試使用聯繫表單7創建一個自定義樣式的表單。我正在使用WP Joints主題和基礎。聯繫表單7文本字段不可編輯

前4個字段在chrome或firefox中不可編輯,但註釋字段是。所有的字段在IE中工作(奇怪的是)。我在做什麼導致了這個?樣式需要爲客戶端這樣,但我可能使用某些CSS來改變最終產品。

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> 
+0

訪問您的鏈接我可以編輯所有輸入。我在Windows 10上使用Chrome 53. –

+0

我的錯誤 - 我修復了它,但沒有更新。問題是我把它們放在基礎行和表中。我的解決方案只是使用display:table和製作50%寬度表格單元格的div。謝謝回覆。 –

回答

0

這個問題是我把他們的基礎行和表。基金會的領域是可編輯的。我的解決方案只是使用display:table來創建div,並使字段50%寬度表格單元向左浮動。迄今爲止,它在所有瀏覽器中都有效。

相關問題