For more details see how the Custom Form for Magento 2 extension works.
The Custom Form Extension for Magento 2 lets you create web forms of various types to collect customer info. Use a special drag-and-drop constructor to generate multiple forms in seconds and customize them according to your requirements.
To configure email notification settings, please go to Stores → Configuration → Amasty Extensions → Custom Forms.
Enable Notification to Email - set to Yes to enable automatic notifications.
Send Emails To - specify email address that will receive notifications.
Email Sender - select the contact that will be used as a sender.
Email Template - choose a template according to which email content will be created.
In the Reply Form Configuration tab select Email Sender, Email Template and where to Send Blind Copy.
With the extension, you can also configure auto response.
Enable Auto Response - set 'Yes' to automatically answer the submitted form via e-mail. It delivers an e-mail to an address given in the form or an address specified in the customer account. The setting may be configured on a per-form level.
Specify email sender and choose an email template (Amasty Custom Form Autoresponder is set by default).
Consent Text - adjust the message. Use HTML to customize the information.
Google Api Key - fill in the key that will be used for Google Map Field. Click here to get API key.
Date Format - select the format according to which a date needs to be filled in and displayed.
To see and manage all created forms in one place, go to Content → Custom Forms → Forms.
On a handy grid you can easily track forms Results, Edit and Duplicate them in action column or perform mass actions via Actions dropdown menu.
Also, you can quickly export all form responses as a .csv file. To do that, click Actions → Export Submitted Data.
To create a new form, click the Add New Form button.
To generate a new Custom form you need to configure a number of general settings.
Title - specify the form title that will be displayed on the custom forms grid.
Code - use a form code for your admin purposes.
Success URL - set “/” to use AJAX without page reload. Form with file upload requires a page reload anyway. Leave empty for redirect to the homepage.
Store View - determine the store views on which the form will be displayed.
Customer Groups - select customer groups for which the custom form will be available.
Status - enable/disable each particular form.
Use as Survey - set to Yes to restrict form submission, so that user can submit the form only once. If set to No, a form can be completed by the same user unlimited times.
Save Referer Url - set to Yes if you want to track the origin source of the form submission.
You can configure admin notification on the level of a particular form. This will override the settings that are specified in General Settings.
Send Notification to Email - activate this option to notify store admins about new form submissions.
Recipients email - input recipient email for the customers' form data.
Email Template - select email template variant.
Email Address Field - choose a field to be used as email address for manual and auto response reply to the customer.
Hide Email Address Field - set 'Yes' to automatically hide Email Address Field in the form for logged in customer and use email address specified in the customer account.
Enable Auto Response - enable/disable autoresponder or use the system config value.
Email Template - pick up one of the default templates, use system config value, or create your own custom one so it can be chosen from this dropdown as well.
In this tab you can adjust page content.
Submit Button - specify any custom text for the form submission button.
Success Message - fill in the text that will be shown to store visitors after the successful form submission.
Show on Button Click - enable this option to display a custom form in a popup window that appears on the button click.
Button Text - specify the button title.
In the Form Creator tab you'll find a rich set of input types and form elements that can be used for each custom form you create. Just select the necessary field type and drag it to the form creation area. You can also create additional pages via +Add Page tab if needed.
Choose Design - select one of three available designs from the dropdown: Default (will be automatically chosen if no changes applied manually), Linear Theme or Circle Theme.
The Input tab contains the following input types:
In the Select tab you can choose:
Here specify comma-separated extensions you'd like to allow. Don't forget to provide the default ones as well.
The Options tab offers a range of fields with predefined answers.
It's possible to add even more elements to your custom forms. In the Advanced tab you will find different title types to structure your web forms effectively.
Once all necessary fields are chosen and added to the form creation area, it's time to customize them by specifying field titles and other necessary info. Actually, you can edit each specific field right after dragging it to the form creation area.
To start editing the field, please hover the mouse over the corresponding field and click on the Edit icon.
After hitting the “Edit” icon, the field editing form will appear.
Code - fill in a custom form code that will be used in the backend for your admin purposes.
Field Title - specify a custom form name. Use it while filtering submitted data.
Class - here the type of the form is specified.
Custom Style - due to this option, you can customize the display of each particular field (font, color etc).
Required - enable this option if you want to make this particular field required. It means that visitors won't be able to submit the form with this field blank.
Tooltip - here you can specify an additional text that will be displayed in the tooltip on the frontend.
Options - add as many new options for check boxes, radio buttons and dropdowns as you need.
Toggle - if the Toggle option is activated, the checkbox will look like this:
For particular forms you may also set Validation, Default Value and Max Length.
In Dependency, specify any existing field and its particular option, which will trigger the occurrence of a dependent field you create.
Layout - set the layout with 1 up to 3 columns. If you choose 2 or 3 columns, the additional fields will be added to the row, in which the editable field is placed.
You may also use Regular Expressions in Validation field.
Also, you may include particular form values into notification emails. To do this, apply a unique code in the corresponding field.
Proceed to email template management. Navigate to Marketing → Email Templates and edit any Amasty Custom Form template.
To include a custom value, fill in the followng variable:
Instead of the Code specify the provided earlier value.
Save the changes. Thus, the value that a customer will specify in this field of a custom form will be included in the notification as well.
Each custom form you create can be added to any CMS page. Simply copy the code and paste it into the CMS page you need.
Layout Embedding Code - to add a custom form to any place of your web store, insert this code into layout.
To keep track of the submitted customer data, please go to Content → Custom Forms → Submitted Data.
Export - to export a particular submitted entry, check its box on the grid, navigate to Export tab, and press Export button. A CSV file will be downloaded automatically.
You can instantly find all submitted data for each specific form by using the corresponding filter. All custom forms you create are automatically included in the filter.
Click on the necessary submission to view the details.
Admin can respond right from the customers' submitted data.
Take a look at the Custom Form examples displayed on the frontend. You can enable/disable any field types for each specific form and make necessary fields required.
The extension also works smoothly on mobile devices if combined with a ready-made PWA solution, due to which store admin can significantly improve the user shopping experience on smartphones.
If the add-on is installed, Venia theme will be displayed for this extension in the following way:
Single-page form on mobile devices:
Multi-page form on mobile devices:
Single-page form with the integrated Google Map on tablets:
Find out how to install the Custom Form extension for Magento 2 via Composer.