Skip to main content

CMS Editor Block Library: Contact

Add a contact form that allows visitors to get in touch with you.

Contact

  1. Drag the Contact Us block into the desired position on the page.

  2. In the Page Settings panel, add a title and description.

    Contact Us

  3. Enter the email address that should receive form submissions.

    Send to Email

  4. To customise the contact form, press the + Add Fields button in the Settings Panel.

    Form Fields

  5. In the Configure Form Fields window, you can add preconfigured fields using the Quick Add fields.

    Quick Add

  6. Create custom form fields by specifying:

    • Field Type - Text, Email, Phone, Text Area or Number

    • Field Label - the field name, such as Name or Phone Number

    • Placeholder - helper text that indicates the expected input

    • Required field - enable to make the field mandatory

    Add Custom Field

  7. Press the + Add Field button to add the field to the form.

    Add Field

  8. Repeat for each additional field.

  9. Remove items using the Remove button.

    Remove

  10. Press the Close button when finished.

    Close

  11. You can also edit, remove, or reorder fields from the Settings Panel.

    Edit Form Fields


  12. Select how the contact block is displayed:

    • Simple


    • With address


    • Background Image


  13. When using the Simple layout, enter an image URL or upload an image.

    Image

  14. When using the With address layout, enter:

    • Contact Email

    • Phone Number

    • Opening Hours

    • Street Address

    • Shareable directions link (for example, a Google Maps link) and enable the 'Show 'Visit our offices' section'

    Address

  15. Enter a title and message that are displayed after the contact form is successfully submitted.

    Success Title & Message

  16. Toggle 'Content Background' on to add a background colour or image.

  17. Toggle 'Card style' on to display the background within a rounded card instead of a full-width section.

    Content Background

  18. Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.

    Spacing

Did this answer your question?