Royal Free Charity | Formie form embed

Formie form embed

How to use a Formie form and its basic settings, plus useful links.

How to embed a Formie form

A Formie form can be embedded on a page by using a Form” content block.

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. 

More info

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.