A Formie form can be embedded on a page by using a “Form” content block.
Formie form embed
How to use a Formie form and its basic settings, plus useful links.
How to embed a Formie form
Formie form settings (tabs in a form build page)
Fields
Fields can be added to a form by drag-and-drop from the right column, and can be edited by clicking on each field.
More info
Appearance
Listed below are set up as default for all forms.
- Form templates – “Royal Free Template” selected to display the form in correct styles.
- Default label position – “Above input” selected
- Default instructions position – “Above input” selected
Required fields will not show the asterisk. Instead add “(optional)” to non-required fields.
More info
Behaviour
- Submission Method – we recommend to use the “Ajax (Client-side) option.
- Action on Submit – options for what to show or where to redirect users after a successful submission.
Email Notifications
Email notification settings for admins and users (form submitters).
More info
Please note: forms that use their own templates (e.g. donation form, job applicaiton form) could have pre defined (templated) behaviours (e.g. Action on Submit). In this case, the form settings cannot override the templated settings.
Useful legend and label style classes
Legend (html) tags and label (html) tags are the titles of input fields. Legend tags are titles for a group of input fields, such as radio groups, checkbox groups, and names (first name and last name). A label tag is a title for a single input field, such as text, number input fields.
We’ve set up a set of style classes for legend and labels tags for various font sizes.
Styles classes for legend
Legend tags’ default size is 19px (mobile) and 25px (desktop). Below classes are available for different font sizes.
- legend-sm: 17px (mobile) and 21px (desktop)
- legend-lg: 24px (mobile) and 30px (desktop)
Styles classes for label
Label tags’ default size is 17px (mobile) and 21px (desktop). Below classes are available for different font sizes.
- label-md: 19px (mobile) and 25px (desktop)
- label-lg: 24px (mobile) and 30px (desktop)
How to apply
In the form build page, click on the field to apply. From the pop-up window, go to the “Advanced” tab. Enter a desired class into the “CSS Classes” field. Multiple classes can be entered separated by space.