OctoberCMS plugin for creating custom front-end forms. With this plugin you can create a form of any complexity and customize it to your liking.
Features
- Easy build and manage your forms in OctoberCMS backend
- Tracking the results of filling out forms
- Easy customization of form templates
- Reorder fields
- Files uploader
- Using standard OctoberCMS mail templates
- Google reCaptcha support
- Export, import and copy of form configuration
- Export submissions (csv)
- Any number of recipients
- Events support
Usage
After installation, the plugin will add the Forms item to the main menu. Inside this section, you can manage your forms and submissions.
Plugin will register its component to use it on any of your pages. After adding this component to the page, you should check it (by clicking on it) and select the form. Plugin uses Ajax Framework to process form.
Available field types
Forms Plugin uses a predefined set of fields that can be easily configured in the backend.
Field type | Html |
---|---|
Text | <input type="text"> |
<input type="email"> | |
Numeric | <input type="number"> |
Textarea | <textarea></textarea> |
Checkbox and Checkbox list | <input type="checkbox"> |
Dropdown | <select></select> |
Radio | <input type="radio"> |
Upload files | <input type="file"> |
reCAPTCHA | google reCaptcha box for SPAM protection |
Creating forms
For create new form go to Forms in the main menu. Then click on Add form button.
On next page you can create new empty form. Form key must be unique.
After creating new empty form you can add fields on the form. For doing this click on Add field button and choose field type. You can add as many fields as you want.
reCAPTCHA
GromIT.Forms has Google reCAPTCHA support.
For use reCAPTCHA on your forms you must go to Settings -> Forms plugin settings -> reCAPTCHA and enter your site key and secret key. You can obtain keys in reCAPTCHA control panel.
Rendering Forms
For render form on page go to CMS -> Pages -> Your page and drop Form component from the sidebar to the page. Then in component settings choose form for render. All forms renders without styling so all CSS is up to you.
Another option is render form by yourself. You can do this like on the sample below.
title = "Form" url = "/" [gromitForms] == {% set form = gromitForms.getForm('test-form-key') %} <div id="my-form"> <form data-request="gromitForms::onSubmit" data-request-update="success: '#my-form'" data-request-validate data-request-files data-request-flash> <input type="hidden" name="form_key" value="{{ form.key }}"> <div> <label> Your name <input type="text" name="your_name" required> </label> </div> <button type="submit">Submit</button> </form> </div> <script src="{{ ['@jquery', '@framework', '@framework.extras'] | theme }}"></script>
Do not forget to add October AJAX framework with extras and field form_key with form key.
Export and import forms
After creating the form you can export this for importing later. This is very useful for testing form on your development machine and import on production later.
For export for go to form editing page and click on Export button at the bottom of the page.
For import form go to Forms page and click upload button. Then choose file and click Upload. If form with key from uploaded file already exists key will be suffixed with random string.
Export submissions
For export submissions
- go to Forms -> Submissions
- click on Export button in the toolbar
- choose form
- click Export
Events
There are some events provided by the plugin. You can catch them and do something with this.
Event::listen( 'gromit.forms::form.submitting', function (Form $form, array $data, ?array $requestData, ?array $userData) { // } ); Event::listen( 'gromit.forms::form.submitted', function (Form $form, Submission $submission) { // } );
Tutorial
We made a short video tutorial for you about creating forms with this plugin.
-
Duplik
Found the plugin useful on 6 Oct, 2021
very flexible and user-friendly plugin!
-
1.0.5 |
Fix compatibility with October v3.6 Mar 04, 2024 |
---|---|
1.0.4 |
Fix compatibility with October v3 Jul 31, 2023 |
1.0.3 |
Translations fix Apr 21, 2021 |
1.0.2 |
Events, buttons config Nov 25, 2020 |
1.0.1 |
First version of Forms Nov 19, 2020 |