Magento 2 Custom Form

• On a handy grid you can easily track forms Results, Edit, Duplicate them in the action column. Also, you can Export Submitted Data to CSV or PDF files. Perform mass actions via Actions dropdown menu (Delete/Disable/Enable) if needed.
• To use PDF functionality, please install the library dompdf/dompdf. To do this, run the command “composer require dompdf/dompdf” in the main site folder.

• Click here to create Google api key.

Form Information

• To create a new custom form, start by configuring the general settings..

• Form Status – Enable or disable individual forms as needed
• Schedule Display – Define the start and end dates for when the form should be visible (e.g., during specific campaigns).
• Form Title – Enter a title to identify the form in the custom forms grid.
• Form Code – Use a unique code to reference the form for internal or administrative purposes.
• Success URL – Enter “/” to submit the form via AJAX (no page reload). Leave blank to redirect users to the homepage. Note: file uploads always require a page reload.
• Store View Assignment – Choose which store views the form should appear on.
• Success URL – Enter “/” to submit the form via AJAX (no page reload). Leave blank to redirect users to the homepage. Note: file uploads always require a page reload.Store View Assignment – Choose which store views the form should appear on.
• Target Customer Groups – Specify which customer groups can access and submit the form.
• Track Submission Source – Enable to record the referring page URL for each submission.
• Survey Mode – Enable to limit users to a single form submission. Disable to allow multiple submissions by the same user.

Email Notifications

• You can configure admin notifications individually for each form. These settings will override the defaults set in the General Settings.
•  
• Send Notification to Email – Enable this option to notify store admins whenever a new form is submitted.
•  
• Hide Email Address Field – Set to “Yes” to hide the email input field for logged-in customers. The system will use the email address from the customer’s account automatically.

• Auto Response Toggle – Turn the autoresponder on or off, or inherit the value from the system configuration.
•  
• Email Template Selection – Choose from default templates, use the system default, or create a custom template to appear in this dropdown.

Form Content

• Form Design – Choose from three design options: Default (automatically selected unless changed), Linear Theme, or Circle Theme.
• Submit Button Label – Enter custom text to be displayed on the form’s submission button.
• Success Message – Define the confirmation message users will see after submitting the form successfully.
• Display on Button Click – Enable this setting to show the form in a popup triggered by a button click.

Form Constructor

• Within the Form Creator tab, you’ll have access to a wide variety of input fields and form components. Simply drag and drop your desired elements into the form builder area. If your form requires multiple steps or sections, you can add additional pages using the +Add Page option.
•  

1. Input Type

• In the Input tab, you’ll find various field options including:
• Text Input – Ideal for short – entries like names
• Text Area – Best suited for longer messages or customer feedback
• Number Input – For numeric values only
• Google Map – Allows users to pinpoint a location using an interactive map

2. Select Type

• The Select tab provides options to include:
• Date Picker – For selecting specific dates
• Time Picker – For choosing a time value
• File Upload Field – Allows users to attach files with their submission

3. Options Type

• The Options tab includes a variety of fields that present users with predefined choices, such as:
• Dropdown Menu – A collapsible list of selectable options
• List Box – Displays multiple options in a box format
• Two Checkbox Variants – For single or multiple selections
• Two Radio Button Styles – For selecting one option from a group

4. Advanced Elements

• You can enhance your custom forms further using the Advanced tab, which includes various heading styles and layout elements to help organize and structure your forms more effectively.

To modify a field:

• Hover over the element and click the Edit icon.
• This opens a configuration panel where you can set specific properties.

Available Field Settings:

• Code – Assign an internal identifier for admin-side reference.
• Field Title – Set the visible name of the field. This title is also useful for filtering submissions.
• Class – Indicates the input type (e.g., text, dropdown, etc.).
• Custom Style – Apply custom CSS styles to individual fields (e.g., font, color, spacing).
• Required – Toggle this on to make the field mandatory before submission.
• Tooltip – Add explanatory text that will appear as a tooltip on the frontend.
• Options – Define values for radio buttons, checkboxes, and dropdowns.
• Toggle – Enable this to visually switch the checkbox into a toggle-style field.
• Validation Rules – Set rules to ensure input follows a required format. Regular expressions are supported.
• Default Value – Pre-fill the field with a suggested or common entry.
• Max Length – Limit the number of characters allowed in a text-based field.
• Dependency Settings – Make a field appear only when a specific option is selected in another field.
• Layout Configuration – Choose from 1, 2, or 3-column layouts. In multi-column layouts, fields are positioned side-by-side within the same row.

Embedding

• You can embed any custom form into a CMS page by copying the form’s code and pasting it into the desired CMS content area.

Embedding Custom Forms into Your Store Layout

• To display a custom form anywhere on your storefront, you can insert its Layout Embedding Code directly into the layout file.
• Alternatively, you can integrate the form into any CMS page using Magento widgets:
• Navigate to Content → Widgets → Add Widget, then select the form and specify its Form ID during setup.Within the widget settings, you can also define how the form appears — either as a standard inline block or as a popup. This allows you to showcase the same form in various formats across different pages to suit your design needs.

Track Submitted Data

• To monitor and manage customer submissions, navigate to: Content → Custom Forms → Submitted Data..

Exporting and Filtering Submissions

• To Export A Specific Submission, Select Its Checkbox In The Grid, Go To The Export Tab, And Click The Export Button. You Can Choose Between Csv Or Pdf Formats.
• Use The Available Filters To Quickly Locate Submitted Data For A Particular Form – All Custom Forms Are Automatically Included In The Filter Options.
• You Can Also Filter Results By Response Status, Customer Email, Or Survey Type (For Survey-based Forms).
• Click On Any Submission To View Its Complete Details.

• Admin is able to answer straight from the customers’ submitted data.