This is a very simple but highly configurable plugin to add one or more contact forms to your site.
The plugin can be installed to your site from the CrafterCMS Marketplace
After the plugin has been installed you can add a contact form to any page or component of your site using the
Contact Form
content-type with the id /component/plugins/org/craftercms/plugin/contactform/contact-form
.
Every contact form can be configured with the following properties:
- Form Id: Used to identify the form in the page (required)
- Title: The title displayed in the form (optional)
- URL: The URL used to submit the form (required, defaults to a Groovy controller provided by this plugin)
- Fields: The list of fields to capture from the user (optional)
- Field Label: The label displayed for this field in the form (required)
- Field Name: The name used for this field when submitting the form (required)
- Message Label: The label displayed for the main field of the form (required)
- Submit Label: The label displayed for the submit button (required)
There are two strategies to capture the form submissions using this plugin:
Set the URL to an external endpoint, for example an AWS Lambda
The default Groovy controller included in this plugin will lookup a bean from the application context using the name
<formId>FormHandler
. So it is possible to execute any custom code following these steps:
- Create your custom handler by adding a class under
/scripts/classes
that implementsplugins.org.craftercms.plugin.contactform.FormHandler
. - Add your custom handler to the application context in the file
/config/engine/application-context.xml
The styles of the Contact Form plugin are based on Bootstrap 5 forms components, using Bootstrap's build tools:
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";
@import "forms";
To override styles you can use bootstrap form themes, or apply your own styles matching the classes used by Bootstrap.
Class Name | Description |
---|---|
.contact-form | Styles applied to the form element. |
.form-title | Styles applied to the component's title. |
.submit-btn | Styles applied to the submit button. |
.form-section | Styles applied to each form section. |
Form validation is performed using HTML5 form validation, following Bootstrap's mechanisms, for more information, check here.