Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

Styling the Forms

edited May 2012 in Apps

Hi,

I was wondering if it is possible to style the Forms of the form builder app?

Comments

  • Sure! In addition to styling inputs themselves (e.g., input[type=text] { /* styles here */ }, here are some custom classes you can use to style your forms:

    div.form-field-label { /* style the label of a field */ }
    div.form-field-label label { /* style the label text */ }
    span.form-notice { /* style a validation error notice */ }
    div.form-field-input { /* style the form field */ }
    div.form-field-text { /* style text input fields separately */ }
    div.form-field-select { /* style select fields separately */ }
    div.form-field-radio { /* style radio fields separately */ }
    div.form-field-checkbox { /* style checkbox fields separately */ }
    div.form-field-textarea { /* style textarea input fields separately */ }
    div.form-field-submit { /* style the submit button separately */ }
    

    These style the <div> tags surrounding each field, which gives a bit more control to also style the input tags as well. And here are the default styles it applies to the forms for you:

    <style>
    .form-notice {
        display: none;
        color: red;
    }
    .form-field {
        padding-bottom: 18px;
    }
    .form-field label {
        font-weight: bold;
    }
    </style>
    

    Hope that helps!

  • Yes that helped. Thanks alot!

Sign In or Register to comment.