Styling your form

This page details all the information you need to style your form

This feature is for our Umbraco 15 version of Equate Forms, styling is currently not available in versions 13 and below.

Create your first stylesheet

Lets start by creating a stylesheet for your form, this can be done by locating the "Stylesheets" folder in the Settings section of the umbraco backoffice. See image below for reference.

To create a new stylesheet:

1. Click the "+" icon next to the folder.

2. Select "New Stylesheet."

3. Name your stylesheet.

4. Enter your styles and click "Save."

Refer to the styling classes below to enhance your form design.

Generic form structure

<div class="equateForm-Holder">
    <form class="equateForm">
        <div class="form-holder">
            <div class="form-inputs">
                <div class="row">
                    <div class="col-6">
                        <fieldset>
                            <!-- Form fields - If the form contains one column
                                 target this column for styles, this is expanded -->
                        </fieldset>
                    </div>
                    <div class="col-6">
                        <fieldset>
                            <!-- Form fields -->
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

Generic field structure

<div class="form-field">
    <div class="form-info">
        <label class="form-label"> <!-- Label Text --> </label>
        <small class="form-help"> <!-- Help Text --> </small>
    </div>
    <div class="form-input">
        <!-- Input type - Refer to the styles specified below for all input types.-->
        <div class="validation">
            <p class="validation-message"> <!-- Message --> </p>
        </div>
    </div>
</div>

Textbox

Multi-textbox enabled:

<div class="form-input custom-textbox-wrapper">
    <div class="add-holder">
        <input class="form-control"/>
        <button type="button" class="multi-textbox-add">+</button>
    </div>
    <!-- When you add a textbox, they will be rendered below -->
    <input class="form-control"/>
</div>

Multi-textbox disabled:

<div class="form-input custom-textbox-wrapper">
    <input class="form-control"/>
</div>

Textarea

<div class="form-field">
    <div class="form-input">
        <textarea class="form-control"></textarea>
    </div>
</div>

Selectbox

<div class="form-input">
    <div class="custom-select-wrapper">
        <select class="form-select">
            <option class="form-option"></option>
        </select>
    </div>
</div>

Radio

<div class="form-input">
    <!-- Depending on how many columns are set, these classes can differ 
         1 Column: .option-column-1
         2 Columns: .option-column-2
         3 Columns: .option-column-3
     -->
    <div class="option-column-1 form-radio-group">
        <!-- For each radio added, it is rendered in as below -->
        <div class="flex form-radio">
            <input class="form-radio-input"/>
            <label class="form-radio-label"><!-- Radio label --></label>
        </div>
    </div>
</div>

Checkbox

<div class="form-input">
    <!-- Depending on how many columns are set, these classes can differ 
         1 Column: .option-column-1
         2 Columns: .option-column-2
         3 Columns: .option-column-3
     -->
    <div class="option-column-1 form-check-group">
        <!-- For each checkbox added, it is rendered in as below -->
        <div class="flex form-check">
            <input class="form-check-input"/>
            <label class="form-check-label"><!-- Checkbox label --></label>
        </div>
    </div>
</div>

Hidden

<div class="form-input">
    <input type="hidden"/>
</div>

Title & Description

<!-- NOTE: Title & Description does not use form-input but uses 
     form-info instead. -->
<div class="form-info">
    <h2><b><!-- Title --></b></h2>
    <p><!-- Description --></p>
</div>

Password

<div class="form-input">
    <input type="password" class="form-control"/>
</div>

Date & Time

<div class="form-input">
    <input type="date" class="form-control"/>
</div>

Upload

<div class="form-input" id="upload">
    <div class="form-upload" id="drop-area">
        <p>Drag & Drop your files here or <span id="file-browse">browse</span></p>
        <input type="file" id="upload" class="form-control"/>
        <div id="preview"></div>
    </div>
</div>

Multi-Upload

<div class="form-input" id="upload">
    <div class="form-upload" id="drop-area">
        <p>Drag & Drop your files here or <span id="file-browse">browse</span></p>
        <input type="file" id="upload" class="form-control" multiple/>
        <div id="preview"></div>
    </div>
</div>

Terms & Conditions

<div class="form-input" id="equateTerms">
    <div class="form-check-group">
        <div class="flex form-check">
            <input class="form-check-input">
            <label><!-- T&C info goes here --></label>
        </div>
    </div>
</div>

Using a custom stylesheet

To apply your custom stylesheet to an Equate form:

1. Navigate to the desired form.

2. Click on the Settings tab in the top-right corner.

3. In the StyleSheets section, select your custom stylesheet from the dropdown menu.

4. Click Save.

Your form will now reflect the new styles.