Multiple Custom Forms

Transcription

1 Multiple Custom Forms for Magento 2 Extension for Magento 2 User Guide

2 Table of contents 1. Module Features 2. Module Configuration 3. Manage Forms 4. Add Field 4.1. Text Field 4.2. Text Area 4.3. Drop Down 4.4. Multiple Select 4.5. Radio Buttons 4.6. Checkbox 4.7. File 4.8. Agreement 4.9. Hidden 5. Display Multiple Forms

3 Module Features Receiving a good and quick response from customers is a very good way to keep in quick touch with users of your store. To get a quick response from users an admin often creates and designs web forms. We know how important it can be to modify custom forms as it possible and moreover without any special coding skills. So we created an excellent module for you, it s Multiple Custom Forms. Multiple Custom Forms is an excellent solution for creating, modeling and managing custom forms on your web-store. Multiple Custom Forms is created to be a simple as ABC extension for creating web forms. Magento admin can easily design a form, add a different kind of fields (text box, text area, radio buttons, agreement, checkbox, hidden, file attachments). Elementary backend form editor helps to control the appearance of a form. The module Multiple Custom Forms is very flexible, the extension allows you to create forms for feedback, satisfaction appraise, contact and a lot more. Moreover, we have a good feature in this module, you can enable a feature of file attachment in the module. Of course, this module allows you to display recaptcha in the forms.

4 Module Configuration Screenshot 1 Enabled - to enable the extension select yes ; Template - select Multiple Custom Forms Template; Google recaptcha Public Key - type the public key of recaptcha; Google recaptcha Secret Key - type the secret key of recaptcha. Note: to create Google recaptcha Public Key and Google recaptcha Secret Key use

5 Manage Forms To add a new form go to Admin Panel > Manage Forms > Add New Form Screenshot 2 Form Name - type a name of the form; Form Code - type a code of the form; Enabled - to enable the form, click yes ;

6 recaptcha - select the option of recaptcha Screenshot 3 Submit Button Text - type the name of submit button; Submission Type - type from the list the type of submission; Screenshot 4 If the options or DataBase and are selected, then additional fields for entry will be shown: Screenshot 5 Fill up the Recipient s & Subject. In the field Recipient one can enter a couple of s separated by commas.

7 Action after Submit - select what action should be like after form submission. Show Message - the message will be shown. In the fields Success Messag e and Fail Message type a necessary message. Screenshot 6

8 Redirect option - allows you redirect a customer to specific page after form submission. In the field Redirect URL - type the URL to which it should be redirected. Screenshot 7 Screenshot 8 Description - type the description of the form.

9 Add Field Once you created the form, the next step is to add the fields. Run to the Admin Panel > Manage Forms > click Edit > scroll down the page > Add Field Screenshot 9 Screenshot 10 Title - type a title of the form;

10 Input Type - select the input type; Screenshot 11 Show in grid - to show in grid table, select yes.

11 Text Field Text Field is an element of the form where a customer can type some short answer. Screenshot 12 Required - if you want to set this field as required, click yes ; Placeholder - type the message in placeholder; Default Value - type the default value that will be shown once the form is filled up. A customer, if he wants, can change the value in the text field; Validation - select the type of validation; Screenshot 13 Comment - type the content of a comment. The comment will be shown under text field.

12 To save the fields of the form, click Save Field. To preview the form, click Preview. How it looks on website: Screenshot 14

13 Text Area Text Area is an element of the form where a customer can type short message. Screenshot 15 Required - if you want to set this field as required, click yes ; Placeholder - type the message in placeholder; Default Value - type the default value that will be shown once the form is filled up. A customer, if he wants, can change the value in the text field; Validation - select the type of validation; Screenshot 16 Comment - type the content of a comment. The comment will be shown under text field.

14 To save the fields of the form, click Save Field. To preview the form, click Preview. How it looks on website: Screenshot 17

15 Drop Down A dropdown menu is a menu that allows the user to choose one value from a predefined list. Screenshot 18 Required - if you want to set this field as required, click yes ; Options Source - select necessary option source. Detailed explanation of all options source see below. Screenshot 19 Default Option - add default option; Comment - type the content of a comment. The comment will be shown under text field.

16 Country - if the field concerns a country: Screenshot 20

17 How it looks on website: Screenshot 21

18 Region - a field concerns a region. a) the first example is based on the Region Source option > Specific Country Screenshot 22

19 How it looks on website: Screenshot 23

20 Product Attribute - ask your clients questions concerning products. Product Attribute can be attributed by color, format, manufacture, shipping group, size. Screenshot 24 How it looks on website: Screenshot 25

21 Custom - an option allows an admin to add specific options for drop down list. Screenshot 26 Screenshot 27 Title - type the title of the field; Input Type - select Drop Down type; Required - if you want to make the field as required one, then select yes ;

22 Option Source - select necessary option. To show you this example, we chose Custom option which allows you to add options for the fields; Default Option - set a default option for the field; Comment - type the comment for the field; Options - here you can add necessary option for your field. To add new option click the button Add Option ; How it looks on website: Screenshot 28

23 Multiple Select Multiple Select is an option that allows a customer to select more than one answer (option). Screenshot 29

24 Screenshot 30 Title - type the title of the field; Input Type - select Multiple Select type; Required - if you want to make the field as required one, then select yes ; Option Source - select necessary option. To show you this example, we chose Custom option which allows you to add options for the fields; Default Option - set a default option for the field. The list of default options will be shown after you save the field and add necessary options; Comment - type the comment for the field; Options - here you can add necessary option for your field. To add new option click the button Add Option ;

25 How it looks on website: Screenshot 31

26 Radio Buttons A radio button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options. Screenshot 32 Title - type the title of the field; Input Type - select Radio Buttons type; Required - if you want to make the field as required one, then select yes ; Option Source - select necessary option. To show you this example, we chose Region option as our questions is about the region. If you choose this option all regions will be automatically uploaded, but in Country Field you should choose a necessary country and all regions of these country will be uploaded. Country Field - choose necessary country for uploading the regions of this country;

27 Default Option - set a default option for the field. The list of default options will be shown after you save the field and after that you can choose default option; Comment - type the comment for the field. How it looks on website: Screenshot 33

28 Checkbox A checkbox allows a user to select a value from a small set of options, often binary. Screenshot 34 Title - type the title of the field; Input Type - select Checkbox type; Required - if you want to make the field as required one, then select yes ; Option Source - select necessary option. To show you this example, we chose Country option as our questions is about the countries. If you choose that options, all country list will be automatically uploaded; Default Option - set a default option for the field. The list of default options will be shown after you save the field and after that you can choose default option; Comment - type the comment for the field.

29 How it looks on website: Screenshot 35

30 File File allows a customer to upload a photo. Screenshot 36 Title - type the title of the field; Input Type - select File type; Required - if you want to make the field as required one, then select yes ; Allowed Extensions - type allowed formats of a file; Allowed Number of Uploads - type how many number of uploading can a customer do per one time; Max File Size - type maximum size of a file which can be uploaded; Comment - type the comment for the field.

31 How it looks on website: Screenshot 37 The file was uploaded successfully: Screenshot 38

32 Agreement With this option you can set an agreement in your store for your customer. Screenshot 39 Title - type the title of the field; Input Type - select Agreement type; Required - if you want to make the field as required one, then select yes ; Agreement Label - create an agreement label. In this example we inserted a link agreement; Agreement Link Text - type an agreement link text; Agreement Text - type the text of agreement.

33 How it looks on website: Screenshot 40

34 Hidden Hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field and moreover, a customer doesn t see a hidden field, which leads to the purpose of the field. It is special for collecting data, for example, from which page, categories etc a form was sent. Screenshot 41 Title - type the title of the field; Input Type - select Hidden type; Hidden Source - select necessary hidden source. We will show you in more details how to set up the hidden source (see below); Screenshot 42 Show in grid - to show in grid table, select yes.

35 Static Value Static Value is a value which will be sent every time a form is submitted. Screenshot 43 Static Value - type a static value. How it will look in your Screenshot 44

36 Product Attribute Product Attribute option allows you to collect data concerning products. Screenshot 45 Product Attribute - select a product attribute. For example, if you want to know from what Product ID was a form sent, then select Product ID.

37 Category Attribute Screenshot 46 Category Attribute - select a category attribute. For example, if you want to know from which category was a form submitted and a category image, then select Image.

38 Customer Attribute Screenshot 47 Customer Attribute - for example, if you want to collect a data of customers last name, then select Last Name.

39 Display Multiple Forms There are a few ways how to display a multiple form to your website: via widget, via page, via block. To display a form as a page or a block: to display it use native Magento functionality. Widget To display a multiple form via widget run to Admin Panel > Widgets > Add Widget Screenshot 48 Type - select Multiple Custom Form ; Design Theme - select a design theme of the form, click Continue.

40 Fill up all necessary settings and click the button Add Layout Update, choose where a widget should be displayed. Screenshot 49

41 Then go to the Widget Options section: Screenshot 50 Custom Form - choose a name of the from what you want to display; Display Template - select in what way you want to display a form. Screenshot 51 Popup display template is designed for developers. Form can be opened in popup by running follow code: jquery('body').trigger('showcustomform_{formcode}'); where {formcode} is the Form Code value of form assigned to this widget. Popup with button: type the button title and click Save. Screenshot 52

42 How it looks on the website: To fill up the form, in our example, we clicked the button Quote Bulk Order. Screenshot 53

43 We filled up all necessary fields and clicked the button Submit. Screenshot 54 The form was submitted successfully: Screenshot 55

44