聯系表格7-更改樣式

Question

嗨，大家好，我需要聯系表格7的幫助，現在所有輸入區域都垂直放在一列中，是否可以在右側添加一個輸入區域，我已將鏈接附加到屏幕截圖了嗎？ 我如何在Wordpress中做到這一點？

現在的樣子： https ： //ibb.co/MMKnf6L

外觀（右側輸入區域）： https : //ibb.co/vJxJ7kk

WP碼

 <label> Your Name (required) [text* your-name] </label> <label> Your Email (required) [email* your-email] </label> <label> Subject [text your-subject] </label> <label> Your Message [textarea your-message] </label> [submit "Send"] 

Answer 1

是! 使用一些CSS魔術，您可以獲得所需的任何布局。 因此，即使使用某些代碼也可以實現此布局。 我使用了一些flexbox代碼來制作結構。

有關flexbox的更多信息，請參見： https : //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

演示

我將短代碼替換為HTML，以使演示更加可見。 請用您自己的CF7短代碼替換輸入。

 .prefix-form-container { display: flex; } .prefix-column { display: flex; flex-direction: column; padding: 10px; } .prefix-label { display: block; } /* demo code */ input, textarea { width: 100%; } 

 <div class="prefix-form-container"> <div class="prefix-column"> <label class="prefix-label"> Your Name (required) <input type="text"> </label> <label class="prefix-label"> Your Email (required) <input type="text"> </label> <label class="prefix-label"> Subject <input type="text"> </label> </div> <div class="prefix-column"> <label class="prefix-label"> Your Message <textarea></textarea> </label> </div> </div> <div> <button type="submit">Send form</button> </div>