Skip to Content search facebook instagram pinterest twitter youtube

Forms

All form elements output using the Form class are wrapped in a <div> with the .field-element class. For a full example of styling these fields, see global.css in the default skin provided with SproutCMS.

Structure

The structure of a standard field-element is built using these wrappers and classes:

Wrapper

<div class="field-element">...</div>

The outer wrapper of the form field. Modifier classes can be added to this.

Label

<div class="field-label">...</div>

The wrapper of the form field label element. 

Input

<div class="field-input">...</div>

The wrapper of the form input fields.

Example of a text field-element

<div class="field-element field-element--text">
    <div class="field-label">
        <label for="field0">Example text field</label>
    </div>
    <div class="field-input">
        <input id="field0" class="textbox" type="text" name="text" value="" placeholder="Enter some text">
    </div>
</div>

Modifier classes

  • field-element--small - Visually smaller
  • field-element--large - Visually larger
  • field-element--white - White background
  • field-element--disabled - Disabled field, greyed out with no user-control
  • field-element--hidden-label - Visually hides the field label
  • field-element--error - A field error state
  • field-element--lightweight - Removes margin from the field

Field element modifer classes can be output using -wrapper-class, for example:

Outputting a small field

<?php echo Form::text('A small element', ['-wrapper-class' => 'small']); ?>
 
// Would output as below
<div class="field-element field-element--text field-element--small">...</div>

Form field types

For a full list of form fields see the Form field types page.