The Contact Form component allows administrators to embed contact forms on a page via shortcode, using their preferred contact form provider. We recommend using Forminator for best results.
This component provides several configuration options, divided into the following categories:
| Settings |
This section contains general settings that apply across all components in the system:
- Hide on Mobile/Tablet/Desktop: Pick whether to hide, or show this component independently on mobile, tablet, and desktop resolutions via a set of three checkboxes.
- Desktop/Mobile Padding:Â Adjust the top and bottom padding for both desktop and mobile views.
- Section Background Colour: Choose a background colour from a pre-configured list of brand colours.
|
| Animation |
Administrators can choose from seven entrance animation options for the contact form:
- None
- Slide in from the top
- Slide in from the bottom
- Slide in from the left
- Slide in from the right
- Fade in
- Grow in
|
| Form Styling and Configuration |
This section allows administrators to customise the form’s appearance and behaviour:
- Wrap in Pod: Enable this option to create a pod around the form, featuring a drop shadow to distinguish it from the rest of the component’s background. When this option is enabled, you can also set a Background Colour for the pod, which can differ from the overall component’s background.
- Background Colour: Choose the background colour for the contact form pod from a pre-configured list of brand colours.
- Form Shortcode: Paste the shortcode of the form you want to display within the component. Shortcodes are provided by contact form plugins such as Forminator or Contact Form 7. Simply copy the form’s shortcode and paste it into this text field to render the form.
|
| Content |
This section controls the content displayed alongside the contact form:
- Title Colour: Select the title text colour from a pre-configured list of brand colours.
- Title Style: Choose the heading size for the title, ranging from from Heading 1 to Small Paragraph.
- Text Colour: Set the colour for the content paragraph text using the pre-configured brand colours.
- Quicklink Background Colour: Set the default background colour for optional quicklink pods, using the brand colours.
- Quicklink Background Colour (Hover): Choose the background colour for quicklink pods when hovered over.
- Quicklink Text Colour: Set the default text colour for quicklink pods. Option values are based on a pre-configured list of brand colours.
- Quicklink Text Colour (Hover): Choose the text colour for quicklink pods when hovered over. Option values are based on a pre-configured list of brand colours.
- Title: Enter the title text for the component.
- Content: Add content for the component, with support for rich formatting options like bold, italics, inline links, bullet points, and numbered lists.
- Quicklinks: This repeater field allows administrators to configure multiple quicklink pods. For each pod, administrators can upload an image, set the quicklink label and URL, and decide whether the link should open in a new tab or the same tab.
|
You can view sample contact forms built with Forminator using this component here.
