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.
- Section Width: Set the width of the section to control how the form is displayed.
|
| Animation |
Administrators can select 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 configure the form’s appearance and behaviour through various options:
- 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.
|
You can view sample contact forms built with Forminator using this component here.
