User Guide Form Builder Extension Version - 1.1.3 User Guide Version - 1.1.3 Magento Editions Compatibility Community - 2.2 1
Content Form Builder V-1.1.3 Introduction Installation Usage Admin General Configurations General Tab Date Settings Tab Email Settings Tab Form Add / Edit General Tab Settings Tab Fields Tab Form Submitted Results How to Add Form in CMS Page How to Add Form Results in CMS Page Front-End Sample Form Sample Form Result Page Sample Form Result View Page Sample Ajax Form Support 2
Introduction Web Form Builder allows you to make any type of form right from magento admin, design it and collect data from users in e-mail and database easily. For more information about this extension please visit MageArray.com Installation Backup your web directory and store database Download extension installation package Disable Magento Cache run command " php bin/magento cache:disable " using SSH from your magento root directory Upload contents of the extension installation package to your " app/code/magearray/formbuilder " directory Then run commands " php bin/magento setup:upgrade " using SSH from your magento root directory Enable Magento Cache run command " php bin/magento cache:enable " using SSH from your magento root directory 3
Usage Admin General Configurations To configure the Form Builder extension for Magento, navigate to Stores >> Settings >> Configuration >> MageArray Extensions >> Form Builder. 4
General Tab Google Captcha Settings It will use Google Captcha. To use Google Captcha you need. Google Site Key Google Secret Key You can get Google Site key and Google Secret Key by Sign up here Google Captcha. Date Settings Tab Date Fields Order It will help to configure Date format.(ex. mm/dd/yyyy or dd/mm/yyyy or yyyy/mm/dd) Year Range User can specify year range for date field. Email Settings Tab Email Sender It will allow to select sender name and email address. Email Template It will allow to select email template. 5
Form Add / Edit Forms can be viewed and managed through MageArray Extensions >> Forms. Here admin can add/edit forms. 6
General Tab Form Name - You can specify form name. Description - It will contain form description where you can add HTML, Image, etc. using editor. Success Message - It will display when form will submitted successfully. Status - It will Enable / Disable particular form. 7
Settings Tab 8
Email Settings Email Subject - It will contain subject of email which is sent through formbuilder. Send Email To Admin? - It will Enable / Disable functionality to send form result to Admin. Admin Email Address - The form result will be sent to entered email address. Customer Email Template - You can choose an email template of form result for customer. Admin Email Template - You can choose an email template of form result for admin. Send Email To Customer? - It will Enable / Disable functionality to send a form result to the customer. Customer Email Address Field - You can select email address field from created form fields where customer will enter email address and it will use for receive email. Customer Name Field - You can select name field from created form fields where the customer will enter a name. General Settings Captcha - It will Enable / Disable Captcha on frontend. Enable Approval - It will approve result of form submitted by customer. Submit Form Using Ajax - It will allow you to how to submit form using ajax or not. Show Success Message - It will allow you to where to display success message Before Form/Hide form and show message When you set Submit Form Using Ajax set as Yes. Redirect URL - The form will be redirected to entered URL after submitting a form. Note: Redirect Url will not work if you are submitting form using ajax. Submit Button Text - It will allow you to change Submit button Label. Form CSS - You can change design as per requirement through From CSS. Note : If you want to display some field in email than you can use variable like this E.g :if Field label is First Name than you can use like this {{var data.first_name raw}} if Field label is Email than you can use like this {{var data.email raw}} If you want to display all field in email than you can use this variable {{var form_result raw}} 9
Fields Tab Add New Fieldset Name: Name of the fieldset Status: It will Enable / Disable particular fieldset. Add New Field 10
Name: Name of the input field Input Type: Input type of the input field Status: It will Enable / Disable particular input field Class: Use specific class for that input field Validator: Select which validation you want use for this field Required: Field is required or not. Input Types 11
Text Field: Use for Text type input field Placeholder: you can add placeholder text for text input field. Area: Use for text area type input field Placeholder: you can add placeholder text for text input field. File File: Use to make field of file type Compatible File Extensions: You can add allowed type of file s extension 12
Select Dropdown: it create select field of drop down type Radio Buttons: it create select field of radio button type Checkbox: it create select field of checkbox type Multiple Select: it create select field of Multiple Select type Date Date: It shows date picker in the field 13
Custom 1 Html: Html input type is use to add any html code like Map, Image. You can add your code in HTML content section Custom 2 Pre Filled: When you want to show some field pre filled then the field type is helpful Visible - Editable : It allows to edit the pre filled value in the field Visible - Read Only: It doesn t allow to edit the pre filled value and it s read only Hidden: It use to make hidden type of input field which is pre filled when form loads Parameter: add name of the parameter which pass through the url. 14
Form Submitted Results 15
How to Add Form in CMS Page 1. Go to Content >> Pages 16
2. Select page where you want to add that form. 3. Now Go to Content Tab and Click on Insert widget button. 17
4. Select FormBuilder from given Widget Type. 5. It will show Widget Options named Form Name. 6. Select form which you want to add to that page, and click insert widget so it add widget code in content area. 7. Now Click Save Page button. 8. If cache enable then refresh your magento cache. 18
How to Add Form Results in CMS Page - Follow Step 1 to 3 of How to Add form in CMS Page. 19
4. Select Formbuilder - Results from given Widget Type. 5. It will show Widget Options Form Name : Select form name whose results you want to display in frontend. Results per page : How many results you want to display for each page. More than specified result will shown in next page. Form Fields that will display in grid : Select fields which you want to show in results grid 6. Click on Insert Widget button. 20
7. Now Click Save Page button. 8. If cache enable then refresh your magento cache. 21
Front-End Sample Form 22
Sample Form Result Page 23
Sample Form Result View Page 24
Sample Ajax Form 25
Support We support all our customers through our website https://www.magearray.com/support or mail us on support@magearray.com. If you have any questions on Extension or need support with its use please contact us https://www.magearray.com/contact - we're happy to help you. 26