Canvas Docs

Fields

Form Fields

Canvas forms use Bootstrap 5 form controls inside grid columns. Each field sits in a .form-group column so fields line up on a responsive grid. This guide lists the field types and the Canvas classes that drive validation and styling. Markup is drawn from contact.html, block-contact-1.html, and form-elements.html.

The Field Pattern

Every field follows the same pattern: a grid column with .form-group, a <label>, and a control with .form-control. Add .required (and .email for emails) to enable validation.

<div class="col-md-4 form-group">
    <label for="template-contactform-name">Name <small>*</small></label>
    <input type="text" id="template-contactform-name" name="template-contactform-name" value="" class="form-control required">
</div>

Text and Email Inputs

<div class="col-md-4 form-group">
    <label for="template-contactform-email">Email <small>*</small></label>
    <input type="email" id="template-contactform-email" name="template-contactform-email" value="" class="required email form-control">
</div>

<div class="col-md-4 form-group">
    <label for="template-contactform-phone">Phone</label>
    <input type="text" id="template-contactform-phone" name="template-contactform-phone" value="" class="form-control">
</div>

The .required class marks a field mandatory; the .email class enforces a valid email format.

Textarea

<div class="col-12 form-group">
    <label for="template-contactform-message">Message <small>*</small></label>
    <textarea class="required form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"></textarea>
</div>

Select Dropdown

Use .form-select for native selects. Add an empty first option as a placeholder.

<div class="col-md-4 form-group">
    <label for="template-contactform-service">Services</label>
    <select id="template-contactform-service" name="template-contactform-service" class="form-select">
        <option value="">-- Select One --</option>
        <option value="Wordpress">Wordpress</option>
        <option value="PHP / MySQL">PHP / MySQL</option>
        <option value="HTML5 / CSS3">HTML5 / CSS3</option>
        <option value="Graphic Design">Graphic Design</option>
    </select>
</div>

A multiple select is also supported:

<select multiple class="form-select" id="exampleFormControlSelect2">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Radio Buttons

Canvas uses the custom-control radio markup for inline radios. All radios in a group share the same name.

<div class="col-12 form-group mb-5">
    <label class="mb-3 h6">Subject:</label><br>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="template-contactform-subject-wordpress" name="template-contactform-subject" class="custom-control-input" value="Wordpress">
        <label class="custom-control-label" for="template-contactform-subject-wordpress">Wordpress</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="template-contactform-subject-php" name="template-contactform-subject" class="custom-control-input" value="PHP / MySQL">
        <label class="custom-control-label" for="template-contactform-subject-php">PHP / MySQL</label>
    </div>
</div>

Checkbox

<div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>

File Upload

Set enctype="multipart/form-data" on the form and use a file input. The PHP processor attaches uploaded files to the email.

<input type="file" id="template-contactform-file" name="template-contactform-file" class="required form-control">

Grid Layout Helpers

Fields are laid out with Bootstrap column classes on the .form-group. To force a line break between rows of fields, insert an empty .w-100:

<div class="col-md-8 form-group"> ... </div>
<div class="col-md-4 form-group"> ... </div>

<div class="w-100"></div>

<div class="col-12 form-group"> ... </div>

Options

  • Validation classes: .required (mandatory), .email (valid email format). Combine with .form-control.
  • Control classes: .form-control (text/email/textarea/file), .form-select (dropdowns), .form-check-input (checkboxes), .custom-control-input (custom radios/checks).
  • Dark forms: on a dark section, the .sm-form-control variant is styled to stay legible; add .not-dark to opt a control back out of dark styling.
  • Column widths: any Bootstrap col-* class works on .form-group (e.g. col-md-4, col-md-6, col-12).

Tips

  • Mark required fields visually with a <small>*</small> inside the label; the actual enforcement comes from the .required class.
  • Give every input a unique id and point the label's for at it for accessibility and click-to-focus.
  • Field name attributes that carry the form prefix show up in the email body; reserved names like subject are handled as configuration.
  • For a file upload form, the <form> must include enctype="multipart/form-data".

Usage

<div class="col-12 form-group">
	<label for="template-contactform-name">Name <small>*</small></label>
	<input type="text" id="template-contactform-name" name="template-contactform-name" value="" class="form-control required" />
</div>

The Form Input's name is really important so that the Input Field can be processed successfully! Additionally, for the sake uniformity, always use prefixed names. Ex: template-contactform-name. This will be sent as Name in the Form Response Email. If you use template-contactform-first-name, it will sent as First Name to you. Simple as that!

Note: Disabled Fields are not sent in the Email.

Extras

Multiple Value Fields

Multiple Value Fields

Use Bootstrap 5 input groups to place several related inputs on one row, or repeat a field so a visitor can submit multiple values. Canvas forms use the .input-group / .input-group-text pattern.

Grouped values on a single control:

<div class="input-group mx-auto">
    <span class="input-group-text">$</span>
    <input type="number" class="form-control" name="amount-min" placeholder="Min">
    <span class="input-group-text">to</span>
    <input type="number" class="form-control" name="amount-max" placeholder="Max">
</div>

Repeatable named values (submit an array to your handler):

<div class="col-12 mb-3">
    <label class="form-label">Guest Names</label>
    <input type="text" class="form-control mb-2" name="guest[]">
    <input type="text" class="form-control mb-2" name="guest[]">
    <input type="text" class="form-control" name="guest[]">
</div>

Notes:

  • The name="guest[]" bracket syntax makes the backend receive a list of values rather than one.
  • Wrap inputs in .input-group when you want them visually joined (shared border radius, attached add-ons like $, units or buttons).
  • Add .input-group-lg or .input-group-sm on the .input-group to size the whole cluster.

File Type Fields

Add a file upload control to a Canvas form using a standard Bootstrap file input. Keep the .form-control class so it inherits the theme styling.

<div class="form-group mb-3">
    <label for="attachment" class="form-label">Attach a file</label>
    <input type="file" id="attachment" name="attachment" class="form-control">
</div>

For validation in an ajax .form-widget, mark it required:

<input type="file" id="resume" name="resume" class="form-control required" required>

Notes:

  • Use the same .form-control class file inputs get in Bootstrap 5 so height and spacing match other fields.
  • When the form is an ajax .form-widget, remember to send it as multipart/form-data on the server side.
Was this page helpful?