2.15. Form Builder

MageSuite offers the possibility to build and manage forms using the Plugin Company Contact Forms extension.³³ You can find the full user manual of the extension under following link: https://plugin.company/knowledge-base/docs/magento2-custom-contact-forms/user-manual/form-

In the following you will only find a brief introduction to the extension. We recommend to take a look at the full user manual from the link above to obtain further details.

Open

Figure 90 CMS Page with contact form (storefront)

Before starting to create new contact forms you should take a look on the configuration. Access CONTENT / CONTACT FORMS / CONFIGURATION. In the GENERAL SETTINGS section you can adjust settings for breadcrumbs, URL generation as well as the ReCaptcha keys. In order to configure the customer notification settings, i.e. e-mail sending to customers, open the DEFAULT CUSTOMER NOTIFICATION SETTINGS area. Also you should take a look on the configuration of DEFAULT ADMIN NOTIFICATION SETTINGS and adjust the notifications sent to the admin.

Open

Figure 91 Contact Forms configuration (admin panel)

Now you can start working on new contact forms. Access CONTENT / CONTACT FORMS / MANAGE FORMS. Here you have an overview of existing contact forms. In order to edit a contact form, click EDIT in the ACTION column of the form to be edited. In order to create a new form, click ADD NEW FORM.

In order to create a new form you have to complete a couple of steps.

Frontend Style: In this section you can actually build the form. You can use the form builder to insert input, select, dropdown fields via drag & drop.

1. Form Settings:

   1. Enter a FORM NAME to display in breadcrumbs and which is also used as the page title

   2. Choose if you want to a CREATE FRONT-END URL for the new form

   3. Enter the URL KEY

   4. Choose if you want to SAVE FORM SUBMISSION in the admin panel

   5. In case you want to have a custom prefix for the submission ID (e.g. for RMA submissions), you can enter it in FORM SUBMISSION ID PREFIX

   6. Enable the form using the ENABLED select field

   7. You can check the FRONT-END URLS in the field above

2. You can enter CUSTOM JAVASCRIPT in the code input fields

3. You can adjust CUSTOMER NOTIFICATION settings for the given form. These will override the settings made in the configuration in CONTENT / CONTACT FORMS / CONFIGURATION

4. You can adjust ADMIN NOTIFICATION settings for the given form. These will override the settings made in the configuration in CONTENT / CONTACT FORMS / CONFIGURATION

5. Select the STORE VIEWS you would like to use the contact form in

6. In case you are editing an existing form, you can check the FORM SUBMISSIONS

When the settings have been made you can click SAVE FORM.

The new form is now saved and can be used on CMS pages. For this you will need the ID of the given form which can be checked in the corresponding column. Now navigate to CONTENT / ELEMENTS / PAGES. Here you can either create a new page or insert the contact form in an existing CMS page. In either case, expand the CONTENT section in the CMS page configuration. Now add an CC Paragraph component (see Paragraph). Here you can use a widget to include the form created. Use the following widget in the HTML editor with the ID from the form to be included:

<p>{{widget type="PluginCompany\ContactForms\Block\Form\Widget\View" form_id="ID" show_form_as="form"}}</p>

When done, click SAVE on the CC Paragraph configuration. Additionally you are required to make changes in the design configuration of the CMS page. On the CMS configuration page expand the DESIGN area. In the LAYOUT UPDATE XML input enter embed following code snippet:

Click SAVE PAGE on the CMS Page configuration page. Now you can access the form using the CMS Page’s URL key you just created or edited.

_________________________________________  

³³ Here you can find the extension: https://plugin.company/magento2-extensions/custom-contact-forms.html