User Tools

Site Tools


Sidebar

magento_2:custom_form

For more details see the Custom Form for Magento 2 extension page.

Custom Form for Magento 2

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.

  • Multiple input types
  • Drag-and-drop constructor
  • Possibility to add forms to any CMS page
  • Redirect customers to any page after form submission
  • Collect customer data

Custom Form Creation

To create a new custom form please go to ContentCustom FormsForms

On the Custom Forms grid, you'll find all previously created forms and we'll be able to create a new form by clicking the “Add New Form” button.


General Information

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 frontend.

You can use the <a href=“example.com”>Your Title</a> tag to use title fields as URLs.

Code - Use a form code for your admin purposes. Leave the field empty to redirect customers to the home page or use “/” to enable redirect to the previous page.

Success URL - Specify the page URL to which customers will be redirected after the form submitting.

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 - It's possible to enable/disable each particular form.

Send Notification to Email - Activate this option to notify store admins about new form submissions.

Recipients email - Input recipient e-mail for the customers' form data.

Email Template - Select email template variant.


Form Content

Submit Button - Specify any custom text for the form submission button.

Success Message - Specify 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.


Form Constructor

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.

1. Input type

After all necessary fields are chosen and added to the

The Input tab contains the following input types:

  • Text Input (for short texts. e.g. Name);
  • Text Area (will be useful for customer messages or reviews);
  • Hidden (The field becomes visible on a mouse hover);
  • Number Input;
  • Google Map.

2. Select type

In the Select tab you can choose:

  • Date field
  • Time field
  • File attachment field
The File Attachment field supports the following file formats: doc, docx, xls, xlsx, ppt, pptx, gif, bmp ,png, jpg, jpeg ,pdf, txt.

3. Options type

The Options tab offers a range of fields with predefined answers.

  • Dropdown
  • List Box
  • 2 Check Box types
  • 2 Radio Buttons input types

4. Advanced Elements

It's possible to add even more elements to your custom forms. In the Other tab you will find different title types to effectively structure your web forms.

Edit Address and Rating fields:

Edit Input fields

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 fields 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 wil appear.

Name - This is a custom form code that will be used in the backend for your admin purposes.

Label - This is a custom form name. Use it while filtering submitted data.

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.

Help Text - 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.

Below you'll see the way tooltip looks like.

Toggle - If the Toggle option is activated, the checkbox will look like this:

Specify fields' dependency

To make a particular field occur, depending on the selected options in the previous field:

  • Go to Admin Panel → Content → Custom forms → Forms → Select a form and click Edit → Navigate to Form Creator tab.
  • Add a new field;
  • When editing a new field, you can see the Dependency section;
  • In Dependency, specify any existing field and its particular option, which will trigger the occurrence of a dependent field you create.
You can only make a field dependent from already existing field. Which means firstly you have to Save a form with all the needed fields and options but without dependencies. Afterwards you can edit and add dependency.

Specify layout

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.

2 columns' layout: two fields are placed one after another in one line.

Embed Custom forms

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.

To select the page to which the form should be added please go to ContentElementsPages. Here you can select the necessary page and paste the copied code into the Content field.

Layout Embedding Code - To add a custom form to any place of your web store, insert this code into layout.

Track Submitted Data

To keep track of the submitted customer data please go to ContentCustom FormsSubmitted Data.

Grid

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.

Filtering

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.

Details Click on the necessary submission to view the details.

Admin Response from Submitted Data

Admin can response right from the customers' submitted data.

Submitted form status

Go to Admin Panel → Content → Custom Forms → Submitted Data to see the Results column with the forms' statuses and their number.

Email Notification Settings

To configure email notification settings please go to StoresConfrgurationCustom Forms.

Reply Form Configuration

To configure the reply, go to Admin Panel → Stores → Configuration → Custom Forms → Reply Form Configuration

Specify Email Sender, Email Template, Send Blind Copy to.

Autoresponder

To configure the auto response, go to Admin Panel → Stores → Configuration → Custom Forms → Autoresponder

API Support

1. Go to your http://domain/swagger 2. To get the access:

  • go to the section integrationAdminTokenServiceV1
  • input password and login in $body field
  • press Try it out!
  • copy Reponse Body and paste to api_key field at the top of the page
  • press Apply

3. New sections will appear:

  • amastyCustomformAnswerRepositoryV1
  • amastyCustomformFormRepositoryV1

4. Extend these sections to create, edit, delete, or browse the forms and answers.

Enabling Google Invisible reCaptcha

To enable and configure the Google Invisible reCaptcha for Magento 2 extension please take a look at the user guide for this module.

Frontend Examples

Take a look at the Custom Form example displayed on the frontend. You can enable/disable any field types for each specific form and make necessary fields required.

Find out how to install the Custom Form extension for Magento 2 via Composer.

Rate the user guide
 stars  from 4 votes (Details)
magento_2/custom_form.txt · Last modified: 2018/11/09 15:28 by panamarenka