How to Add custom Css Clases to PyroCMS contact form elements - php

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!