Reading list Switch to dark mode

    How to create custom forms with validation in Magento 2

    Updated 26 October 2023


    Magento 2 Form Builder or Survey Management Extension allows the admin to create multiple forms for lead capture, and feedback, collect client queries, and analyze the report as per the received response.

    The created form can be added to any page of the website and the admin can insert a checkbox, date field, file upload, number, radio button, select, text field/area options in the form.

    The option to view the response of the customer and created a form list is available in the admin panel to let the admin manage everything from one place.

    Watch the below video tutorial to understand the extension workflow:



    • Admin can add custom fields to the form.
    • Different types of custom fields i.e. checkbox, date field, file upload, number, radio button, select, text field/area options are available for admin to choose from.
    • Admin gets the option to make custom fields mandatory.
    • Admin can create multiple custom forms.
    • Registered customers or visitors both can submit the form.
    • Admin can add the custom form on the website.
    • Admin can choose sections to display the form on the website.
    • Allows admin to show form at the front-end using the widget.
    • Admin gets the option to make custom fields mandatory.
    • Admin can view the created form list available at the admin panel.
    • A form can be submitted securely with Google Recaptcha feature.
    • Admin can see all the responses.
    • Allows admin to create custom forms using drag and drop.
    • Admin can see the response of a particular form.
    • Admin will get the response’s email.
    • The extension is compatible with the Hyva Theme.


    Customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder.

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    You need to transfer this app folder into the Magento2 root directory on the server as shown below.


    After the successful installation, you have to run these commands in the Magento2 root directory:

    First command:

    php bin/magento setup:upgrade

    Second Command:

    php bin/magento setup:di:compile

    Third Command:

    php bin/magento setup:static-content:deploy


    After running the commands, you have to flush the cache and reindex from the Magento 2 admin panel.

    Multi-Lingual Support

    For the multilingual support, the admin will navigate through Store->Configuration->General ->Locale Options and select the locale as German (the language into which admin wants to translate his store content).

    Magento2 Form Builder Language Configuration

    Language Translation

    If the user wants to translate their module from English to German then they need to follow the path

    app/code/Webkul/FormBuilder/i18n in their unzipped FormBuilder folder and will get a CSV file with name “en_US.csv”.

    Now they will rename that csv as “de_DE.csv” and translate all right side content after the comma in the German language. After editing the CSV, save it and then upload it to the

    path app/code/Webkul/FormBuilder/i18n where they have installed Magento2 on their server. The module will get translated in the German Language. It supports both the LTR and RTL languages.

    The user can edit the CSV like the image below:

    Magento2 Form Builder CSV

    Form Builder Configuration

    After installing the module, you will be able to see the configuration panel under Stores-> Configuration-> Webkul-> Form Builder, and admin can configure General Setting and Email Template to get the update on the form submission part.


    General Settings

    The admin has to proceed with below three settings to configure FormBuilder Module:

    1. Enable Form Builder

    The admin can Enable or Disable the form by selecting Yes/No from the drop-down.

    2. Send Mail to Admin

    The admin can enable the form builder email notification for himself by selecting Yes. If selected “Yes” then the three below fields will appear:

    • Admin Name: Enter the Admin name to be used in the formbuilder email.
    • Email From: Enter the admin email to be used in “From” for formbuilder email notification.
    • Email To: Enter the admin email to be used in “To” for formbuilder email notification.

    3. Enable Recaptcha

    The admin can Enable the Recaptcha setting to be clicked while submitting to make the form more secure. The admin has to select “Yes” to enable Google Recaptcha else to select “No

    If select “Yes” then it will ask you Recaptcha site key and Recaptcha Secret Key as shown in the above image.

    • Recaptcha Site Key: Admin needs to enter the Recaptcha Site Key to complete the Recaptcha configuration with the customs form.
    • Recaptcha Secret Key: The admin needs to enter the Recaptcha Secret Key to complete the Recaptcha configuration with the customs form.

    Retrieving the Google Recaptcha Site and Secret Keys

    To gather the Google Recaptcha API Keys the user must follow the following steps:



    • The user must have a Google Account to log in. For that, the user needs to Enter the Gmail username, and password and click on the Next button to proceed further.


    As a result, a page as shown below will open up where the user needs to:

    • Enter a label that will make it easy to identify the site in the future.
    • Choose the type of reCAPTCHA as – reCAPTCHA V2.
    • Enter the Domain name (registration for also registers where the user wishes to use it.
    • Accept the reCAPTCHA Terms of Service by checking the checkbox.
    • Lastly, click the Register button.

    Step 4:

    • Consequently, the user will receive the reCAPTCH Site Key and Secret Key.

    Custom Form Creation Setting

    Once the module has been installed successfully, the admin will get the Webkul Form Builder section into the admin dashboard. And Webkul Form Builder section contains Form List and Form Response option to create the custom form.

    Magento2 Form Builder Form Creation

    Form List

    Form List section allows the admin to view the list of all the created forms and the section to Add New Form for better administration. The form includes the Form Creator and Form Information part.

    • Form Creator – Pick the required field based on the requirement to build the form for an e-commerce store. Drag and drop to manage the sequencing of the fields for better form building.

      Admin can insert checkbox, date field, file upload, number, radio button, select, text field/area options in the form.
    • Form Information – The form Information section allows the admin to fill in the details to reflect on the front-end user after form submission, Save Form to complete the process.

    Form Responses

    The admin can see all the responses of all the forms for better decision making from the Form Responses list available in Webkul Form Builder Panel.


    To get the brief details of the response coming from Form, the admin has to click on the View button as shown below:


    A detail page will appear once click on the View button as shown below. This page will show all the insight information that has filled in the form by the user.


    Form Appearance Setting

    The admin needs to do some setting to make the form visible to the e-commerce store.

    Add New Page or Edit Existing Page in the content section of the respective page, the admin will get insert widget icon


    A page will open where the admin needs to choose Webkul Form Builder from the Widget Type.


    In the Widget Options, put the Title and choose a particular form from the List and click on Insert Widget to save the configuration.

    Front- End Form View

    Magento2 Form Builder - Front End View

    That’s all for the Magento 2 Form Builder extension. If you still have any issues feel free to add a ticket and let us know your views to make the module better at


    Current Product Version - 4.0.5

    Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content