如何添加自定義Css Clases到PyroCMS聯繫表單元素

Question

在PyroCMS（2.2.3版本）中有一個聯繫人插件。

如何給文本輸入添加一個類？

To contact us please fill out the form below. 

{{ contact:form name="text|required" email="text|required|valid_email" subject="dropdown|Support|Sales|Feedback|Other" message="textarea" }} 
    Name:{{ name }} 
    Email:{{ email }} 
    Subject:{{ subject }} 
    Message:{{ message }} 
{{ /contact:form }} 

採用類似這樣的

To contact us please fill out the form below. 

{{ contact:form name="text|required" email="text|required|valid_email" subject="dropdown|Support|Sales|Feedback|Other" message="textarea" }} 
    Name:{{ name }} 
    Email:{{ email }} 
    Subject:{{ subject }} 
    Message:{{ message: class='css_message' }} 
{{ /contact:form }} 

Answer 1

我也有這個問題。當表單get被打印到頁面上時，每個字段都有一個以contact_爲前綴的ID和一個與字段名稱匹配的類名稱。表單本身有一個默認的「contact-form」類。這裏是我的：

這種設置...

{{contact:form 
name="text|required" 
phone="text|required" 
email="text|required|valid_email" 
message="textarea|required" 
attachment="file|doc|pdf|zip|docx" max-size="10000" 
template="recruitment" 
button="Enquire Now"}} 

<div><label for="name">Full Name:</label>{{name}}</div> 
<div><label for="phone">Phone:</label>{{phone}}</div> 
<div><label for="email">E-mail Address:</label>{{email}}</div> 
<div><label for="message">Message:</label>{{message}}</div> 
<div><label for="attachment">Attach your CV (Formats accepted: PDF, DOC, DOCX, ZIP):  </label>{{attachment}}</div> 

{{/contact:form}} 

會產生這種形式的...

<form action="http://www.companysite.dev/recruitment" class="contact-form" enctype="multipart/form-data" method="post" accept-charset="utf-8"> 
<input type="text" name="d0ntf1llth1s1n" value=" " class="default-form" style="display:none" /> 
<div> 
    <label for="name">Full Name:</label><input type="text" name="name" value="" id="contact_name" class="name" /> 
</div> 
<div> 
    <label for="phone">Phone:</label><input type="text" name="phone" value="" id="contact_phone" class="phone" /> 
</div> 
<div> 
    <label for="email">E-mail Address:</label><input type="text" name="email" value="" id="contact_email" class="email" /> 
</div> 
<div> 
    <label for="message">Message:</label><textarea name="message" cols="40" rows="10" id="contact_message" class="message"></textarea> 
</div> 
<div> 
    <label for="attachment">Attach your CV (Formats accepted: PDF, DOC, DOCX, ZIP):</label><input type="file" name="attachment" value=""  id="contact_attachment" class="attachment" /> 
</div> 
</form> 

你可以使用任何的下列方法CSS

.contact-form .message { 
    // Styles go here 
} 

.message { 
    // Styles go here 
} 

.contact-form #contact_message { 
    // Styles go here 
} 

#contact_message { 
    // Styles go here 
} 

然後風格你的消息字段

希望有幫助！