USER GUIDE - Magento• Options: It displays Select, Multi select, Checkbox and Radio type control have how many options. • Options Value: It displays all the given options from

Contact Form Builder Flexibleforms (M2) Magento Extension by PIXLOGIX

USER GUIDE

Copyright 2015 - 2018 © Pixlogix.com

All rights reserved

[email protected]

http://www.pixlogix.com/

2 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com

© Pixlogix.com

Table of Contents 1. Installation Process ......................................................................................................... 3

2. Flexibleforms Configuration ............................................................................................ 4

2.1 General Settings ...................................................................................................... 4

2.2 Admin Email Settings ............................................................................................... 5

2.3 Customer Email Settings .......................................................................................... 6

2.4 Product Inquiry Form Settings .................................................................................. 7

2.5 Captcha Settings ...................................................................................................... 8

2.6 Date & Time Custom Options ................................................................................... 9

2.7 Implementation Code .............................................................................................. 9

3 Manage Forms (Admin Form Listing) ............................................................................. 10

3.1 Form Setting (Add/Edit Form) ................................................................................ 11

3.2 General Settings .................................................................................................... 12

3.3 Email Settings ........................................................................................................ 13

3.4 Fieldset List ............................................................................................................ 14

3.5 Fields List ............................................................................................................... 15

4 Add/Edit Fieldset .......................................................................................................... 17

Fieldset Settings ........................................................................................................... 17

5 Add/Edit Field ............................................................................................................. 18

Field Settings ................................................................................................................ 19

6 View Result .................................................................................................................. 20

7 Insert Form Widget ....................................................................................................... 22

8 Form Listing (Frontend)................................................................................................. 23

9 Form View (Frontend) ................................................................................................... 24

10 Product Inquiry Form (Frontend)................................................................................... 26

11 Email template with Fieldset ...................................................................................... 29

12 License ......................................................................................................................... 31

13 Help & Support ............................................................................................................. 32




© Pixlogix.com

1. Installation Process

To install the extension, you need to follow below steps

• Backup your web directory and store database

• Enable all cache from admin (System > Tools > Cache Management) before upload

extension.

• Extract extension zip package and copy all folders/files.

• Upload all folders/files into (app/code/Pixlogix/Flexibleforms) folder from your store

root folder by FTP.

• After uploading all folders/files navigate to your store root folder in the SSH console of

your server:

o cd path_to_the_store_root_folder (cd public_html)

o Run the following command:

▪ php bin/magento setup:upgrade

▪ php bin/magento setup:static-content:deploy

▪ php bin/magento cache:flush

• Flush the store cache; Logout to complete installation process and login.




© Pixlogix.com

2. Flexibleforms Configuration

2.1 General Settings

• Enable Forms: To enable or disable flexibleforms extension.

• Enable in Footer Link: To enable or disable flexibleforms link on frontend Footer link

menu.

• Enable Breadcrumbs: To enable or disable Breadcrumbs on frontend.

• Frontend Title: To display this text in title, footer menu and list page on frontend.




© Pixlogix.com

• Form URL Prefix: It is used for preview page URL, footer menu link and Breadcrumb URL

on frontend.

• Form URL Suffix: It is used for preview page URL.

• Redirect Url: To redirect page after successful form submission. i.e.

http://www.domain.com. If admin want to redirect form after successful submission

then add redirect url into this field otherwise leave it blank.

• Enable for logged in users only: Allow permission to submit form for logged in users

only or for all.

• Store Result in Database: To enable or disable form results in database.

2.2 Admin Email Settings

• Enable Email to Admin: To enable or disable admin email.

• Admin Email Name: Admin will get email from this Name.

• Admin To Email Address: Admin will get email to this email address.

• Admin From Email Address: Admin will get email from this email address. “This Email

address must contain to the same domain as the site. i.e. [email protected]”

• Admin Email Subject: Admin email subject name.

• Admin Email Template: Admin can change admin email template from here.



http://www.domain.com/


mailto:[email protected]


© Pixlogix.com

2.3 Customer Email Settings

• Enable Email to Customer: To enable or disable customer email.

• Customer Email Name: Customer will get email from this Name.

• Customer Reply From Email: Customer will get email from this email address.

• Customer Email Subject: Customer email subject name.

• Customer Email Template: Customer email template selection.




© Pixlogix.com

2.4 Product Inquiry Form Settings

• Enable Product Inquiry: To enable or disable Product Inquiry form.

• Tab Title: Enter text to change Product Inquiry tab title.

• Flexibleforms List: Select a form to display as product inquiry form.

• Product Attributes in Email: Selected product attribute will display on product inquiry

email.




© Pixlogix.com

2.5 Captcha Settings

• Enable Captcha: To enable or disable captcha. When admin enables captcha then must

need “Site key” and “Secret key" fields values to use captcha.

• Site key: Admin can get "Site Key" from below link

https://www.google.com/recaptcha/admin/create

• Secret key: Admin can get "Secret Key" from below link







© Pixlogix.com

2.6 Date & Time Custom Options

• Time Format: To change time for time picker and datetime picker on frontend.

• Date Fields Order: To change date format for date picker and datetimepicker on

frontend.

2.7 Implementation Code

• Add code to CMS page or a Static Block: Admin can use widget to any static block or

CMS page to display contact form by form id, instead of preview page.

• Add code to a template file: Admin can use this code into any phtml file to display

contact form by form id.

• Add code to layout file: Admin can use this code into layout file or Custom Layout

Update section to display contact form by id.




© Pixlogix.com

3 Manage Forms (Admin Form Listing)

• ID: Form Id

• Title: Form Title

• Url Key: Form Url Key is used to see preview page on frontend.

• Fields: It displays how many fields are available in this form.

• No. Of Results: It displays number of form submissions and Result page link.

• Store View: It displays which form is assigned to which store.

• Status: Form Status.

• Created: Form Creation time.

• Modified: Form Update time.

• Action: Admin form edit page link and form “Preview” page link on frontend.




© Pixlogix.com

3.1 Form Setting (Add/Edit Form)

• Form Title: Form Title

• Url Key: Form URL key to view form on frontend.

• Status: To enable or disable this form.

• Form Top Description: To display form description top of form on frontend.

• Form Bottom Description: To display form description bottom of form on frontend.

• Form Successful message: To display successful message for successful form

submission.




© Pixlogix.com

• Form Fail message: To display failure message after form submission failure.

• Form Button Text: To change frontend form submit button text.

3.2 General Settings

• Redirect URL: To page redirect after successful form submission. This field is form

specific. i.e. http://www.domain.com

• Enable Captcha: To enable or disable captcha for this specific form.

• Store View: To select store specific access on frontend.






© Pixlogix.com

3.3 Email Settings

• Enable Email to Admin Notification: Form specific, enable or disable admin email

notification.

• Admin To Email Address: Form specific, admin will receive email to this email address,

otherwise admin will receive email to setting page email address “Admin To Email

Address” field.

• Form Specific Admin Email Template: To enable/ disable form specific admin email

template.

• Admin Email Template: Email template selection if enable “Form specific admin email

template” option.

• Enable Email to Customer Notification: Form specific, enable or disable customer email

notification.

• Customer Reply from Email: Form specific, customer will receive email from this email

address, otherwise customer will receive email from setting page email address

“Customer Email Address” field. “This Email address must contain to the same domain

as the site. i.e. [email protected]”




© Pixlogix.com

• Form Specific Customer Email Template: To enable/disable form specific customer

email template.

• Customer Email Template: Email template selection if enable “Form specific customer

email template” option.

3.4 Fieldset List

• “Add New Fieldset”: This button will be displayed after form save.

• Fieldset ID: Fieldset Id

• Title: Fieldset title

• Position: Fieldset position to display fieldset order wise on frontend.

• Status: Fieldset status

• Action: Fieldset edit page link




© Pixlogix.com

3.5 Fields List




© Pixlogix.com

• “Add New Field”: This button will be displayed after form save.

• Field ID: Field Id

• Title: Field title

• Fieldset: Fieldset for the assigned field.

• Field Type: Field Type for the assigned field.

• Options: It displays Select, Multi select, Checkbox and Radio type control have how

many options.

• Options Value: It displays all the given options from the field.

• Position: Fields position to display fields order wise on frontend.

• Required: To set field required or not on frontend.

• Status: Field status

• Action: Field edit page link




© Pixlogix.com

4 Add/Edit Fieldset

Fieldset Settings

• Title: Fieldset title

• Description: Fieldset description to display underneath of fieldset on frontend

• Position: Fieldset position to display fieldset order wise on frontend.

• Fieldset Class: To add custom class on frontend.

• Status: Fieldset status




© Pixlogix.com

5 Add/Edit Field




© Pixlogix.com

Field Settings

• Title: Field title

• Field Type: Field Type for the current assigned field (i.e. Text, Textarea, Select,

etc...). Select email Field Type = "Email" for customer email notification.

• Options: It displays Select, Multi select, Checkbox and Radio type control

options.

• Field Style: It displays Checkbox and Radio type control options vertical or

horizontal layout on frontend. (Only for field type = Checkbox and Radio)

• Fieldset: Select fieldset if you want to display form fields group/fieldset wise

otherwise you need not to select fieldset.

• Required: To set field required or not on frontend.

• Custom error message: If field is required then you can set custom error

message. Leave empty to use default message.

• Pre Define variable: It displays default value from login user. Use i.e. {{email}}

(Only for field type = Text)

• Allowed Image Max Size: Specify max image size allowed to upload. Image size

specify in kb i.e 1mb = 1024kb, i.e. 1024 (Only for field type = File and Image)

• Allowed Image Extension(s): Add file extension(s) separated by newline i.e. jpg

png pdf doc (Only for field type = File and Image)

• No. of stars selected by default: Leave empty to set default value 0. Maximum

selected value limit is 5. (Only for field type = Star Rating)

• Layout: If you want to display multi column fields to sibling fields then you need

to select “2 Column” option for both fields, you can select “1 Column” option to

display only one field in one row as 50% width but you can select “1 Column

Wide” option to display single field with full width.

• Position: Fields position to set field on frontend.

• Tooltip: To display field info with field Title as tooltip on frontend label.

• Note: To display field Note underneath of field. Admin can set information from

here.

• Field Class: To add some additional css style, you can set field specific class and it

will add on frontend field parent element.

• Status: Field status




© Pixlogix.com

6 View Result




© Pixlogix.com

• How to See View Result: To check view result of stored form data, go to Admin >

Flexible Forms > Manage Forms > [View Results] You can see respected form View

Results link

• View Result: You can view results of form with all field detail. Additionally "User IP,

Form Submit Time, User Browser Info".




© Pixlogix.com

7 Insert Form Widget

To insert form widget on cms page you can add it from below ways

• Admin: Content > Elements > Pages > Click on “Add New Page” to insert on new page or

edit on existing page > Click on “Content” tab > Click on “Widget” icon from wysiwyg

editor or click on “Show / Hide Editor” button > Then “Insert Widget...” button will

appear > Click on “Insert Widget...” button then below screenshot popup will appear. >

Select “Flexibleforms: Form” option from “Widget Type” dropdown > Then select form

from “Flexibleforms” dropdown as per your need. = [DONE]

• You can add form into cms page using below code but you need to replace “form_id” as

per your form id.

{{widget type="Pixlogix\Flexibleforms\Block\Forms\Widget" form_id="1"}}




© Pixlogix.com

8 Form Listing (Frontend)

• Form Listing at Frontend: You can see "Flexibleforms" menu link at Footer Links

Navigation to view all forms.




© Pixlogix.com

9 Form View (Frontend)




© Pixlogix.com

• Frontend View: You can see form front-end view (See above snap)




© Pixlogix.com

10 Product Inquiry Form (Frontend)

• Product Inquiry Form at Frontend: Product inquiry tab on product page. Admin can

select any one form as a product inquiry form from form setting page.




© Pixlogix.com

How to use product inquiry form on frontend?

• Step 1: Create a form by click on “Add New Form” from Manage form section. (See

below screenshot)

• Step 2: Select a form from “Product Inquiry Form Settings” section. Don’t forget “Enable

Product Inquiry” option to set “Yes”. (See below screenshot)




© Pixlogix.com

• Step 3: Now click on “Product Inquiry” tab on frontend product detail page to see

product inquiry form. (See below screenshot)




© Pixlogix.com

11 Email template with Fieldset




© Pixlogix.com

• Email: You can see email template with fieldset. (See above snap)




© Pixlogix.com

12 License

What is allowed with single regular license?

• You can use it on one website for yourself or for your client.

• You will need to purchase another regular license for another domain or clients.

• You can setup extension on your staging server for testing/development purposes (that

setup shouldn't be available to the public).

• You can customize extension, you can modify it with other works as per your need.

• Extension updates will be available free for single website.

What is not allowed?

• It is not allowed to create multiple websites with single regular license. You will need to

purchase multiple regular licenses for multiple websites.

• It is not allowed to copy our extension code to misuse or for other extension creation or

for selling purpose.




© Pixlogix.com

13 Help & Support

Please read "User Guide" carefully, it will help you to resolve most of potential problems with

incorrect configuration of the extension in Magento. If you don't find the answer to your

questions, please watch our video from below url.

Video - Extension Installation & Form Configuration guideline

Coming soon..! (Under Creation)

Magento Support Policy

Magento configuration, installation, maintenance, customization etc. is beyond the scope of our

support. We can provide you paid support on extension setup, customization & magento custom

requirement. If you found bug within extension, please contact us at below email.

[email protected]

Developed by

PIXLOGIX INFOTECH PVT. LTD. is a multi-disciplinary, award-winning web design, development and user

experience company with special focus on website usability and responsive design. The PIXLOGIX team

consists of a highly experienced team of specialists with an outstanding record of providing high quality

deliverables both on a timely basis and at very affordable cost.

PIXLOGIX is a Global provider of web programming and IT services with clients based in the USA, UK,

Australia, Finland, Spain, Netherlands and many more. Our communication skills are excellent and are

pleased to participate in providing quotations per Requests for Quotation or proposals. We guarantee

your satisfaction!

www.pixlogix.com

Thank you!



Documents

USER GUIDE - Magento• Options: It displays Select, Multi select, Checkbox and Radio type control have how many options. • Options Value: It displays all the given options from