How to Add custom Css Clases to PyroCMS contact form elements


Tags: php,html,css,pyrocms

Problem :

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


Solution :

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!


    CSS Howto..

    CSS check box, how to make an item unchecked only if another one is checked

    How to remove and override CSS attribute from parent class?

    How do I minify CSS and Javascript? [duplicate]

    How to get started creating CSS for given (dynamically generated) HTML?

    howto create the iPhone Contacts header scroll Effect for html?

    How can I split code-blocks into a list?

    multiple CSS classes, how they work and WHY do it this way? [duplicate]

    How to override default Polymer CSS

    How to resize parent div while keeping dynamic child divs 100% height

    How to style nested panel controls in ASP.NET

    How to make DIVs flow to the left in a x-scrollable pane with CSS?

    How to Protect an HTML element from it's respective assigned CSS

    Border-bottom showing on top

    How to set a background-color to element which has the same id with anchor of url?

    Telling LESS CSS how to behave with .active li

    Wordpress Menus are not showing up correctly?

    How can a transformed Image transition back to it's original shape when hovered?

    How to change the color of the text next to an input field in an HTML form?

    jQuery & CSS: how to convert this drawer menu from left to right?

    How to float menu list elements

    How do I make a element a regular tab stop within a form?

    How to add numbered list style in div tag

    How to apply CSS only to numbers in paragraph? (without )

    How to add non-literal into a variable like jQuery?

    how to center text and control user zoom in CSS

    How does google do the barrel roll?

    How can I create inline CSS in a WordPress PHP file without referencing to an external CSS file?

    Getting an error message to show up inline of input

    How can you keep the “theme” of your website and add new dynamic pages? [closed]

    How can I change the color of the last letter in an element?