How to Add custom Css Clases to PyroCMS contact form elements

Question

In PyroCMS (Version 2.2.3) there is a Contact plugin.

How is one supposed to add a class to one of the text inputs ?

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 Something like this

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

I had this problem too. When the form get's printed out onto your page, each field is given an ID prefixed with contact_ and a class name that matches the field name. The form itself has a default class of "contact-form". Here's mine:

This setup...

{{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}}

Will generate this 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>

You can then style your message field using any of following CSS methods

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

.message {
  // Styles go here
}

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

#contact_message {
  // Styles go here
}

Hope that helps!