Post on 25-Aug-2020
Contact Form Builder Flexibleforms (M2) Magento Extension by PIXLOGIX
USER GUIDE
Copyright 2015 - 2018 © Pixlogix.com
All rights reserved
support@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
3 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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.
4 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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.
5 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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. no-reply@domain.com”
• Admin Email Subject: Admin email subject name.
• Admin Email Template: Admin can change admin email template from here.
6 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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.
7 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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.
8 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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
https://www.google.com/recaptcha/admin/create
9 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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.
10 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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.
11 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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.
12 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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.
13 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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. no-reply@domain.com”
14 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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
15 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© Pixlogix.com
3.5 Fields List
16 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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
17 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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
18 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© Pixlogix.com
5 Add/Edit Field
19 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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
20 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© Pixlogix.com
6 View Result
21 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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".
22 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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"}}
23 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© Pixlogix.com
8 Form Listing (Frontend)
• Form Listing at Frontend: You can see "Flexibleforms" menu link at Footer Links
Navigation to view all forms.
24 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© Pixlogix.com
9 Form View (Frontend)
25 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© Pixlogix.com
• Frontend View: You can see form front-end view (See above snap)
26 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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.
27 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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)
28 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© Pixlogix.com
• Step 3: Now click on “Product Inquiry” tab on frontend product detail page to see
product inquiry form. (See below screenshot)
29 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© Pixlogix.com
11 Email template with Fieldset
30 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© Pixlogix.com
• Email: You can see email template with fieldset. (See above snap)
31 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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.
32 Go to: Table of Contents Copyright 2015 – 2018 © Pixlogix.com
© 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.
support@pixlogix.com
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!