Form Builder Basics (Quick Guide) | FB_003
SW

Sam Webster

Created Feb 05, 2024

Form Builder Basics (Quick Guide) | FB_003

In this tutorial, we'll take a very quick look at the fundamental capabilities of the Infigo Form Builder. This piece of functionality allows you to easily configure variable product templates, whilst giving your users a minimalist, user-friendly form with which to interact with it.

19
1

Begin by creating a MegaEdit product and navigating to its MegaEdit config settings

Begin by creating a MegaEdit product and navigating to its MegaEdit config settings
2

Click on Scripts

Be sure to apply resources such as canvas, fonts, stock, etc to your MegaEdit product in the usual way.

Before we can use the Infigo Form Builder, we need to ensure the relevant script is active.

Click on Scripts
3

Enable the relevant script

At the time of creation, this script is named Form Builder Refactor, however there is a high possibility the name has been altered prior to official release. Information will be available on the Infigo Academy as to the script to look out for, should the name have been changed.

Enable the relevant script
4

Click on Save changes

Click on Save changes
5

Launch the MegaEdit product on the storefront front end

Launch the MegaEdit product on the storefront front end
6

Click on Custom Tab

With the Infigo Form Builder enabled, a new tab will be available on the MegaEdit left pane.

This contains all of the configuration options for the Infigo Form Builder.

Click on Custom Tab
7

Click on Page

We can use the form builder to control whole-page elements such as:

  • Page name

  • Background

  • Layout

With backgrounds and layouts, once selection has been enabled, the administrator is able to pick and choose which background or layout categories the customer will be able to select from. This is accomplished using simple to use toggles.

Click on Page
8

Background or Layout change options will be shown on the form to the right of the screen

NOTE: The form to the right is what your end users will eventually see. Your users will not be able to interact with the Custom Tab, on which you are configuring the form.

Background or Layout change options will be shown on the form to the right of the screen
9

Click on Fields

Next, we can configure individual fields present on the canvas.

Each field will have its own set of configuration options available within the Custom Tab.

Click on Fields
10

Enter field names

Enter field names
11

Select the order in which these fields are to appear on your customer facing form

The lower the number, the higher up the form it appears.

Select the order in which these fields are to appear on your customer facing form
12

Specify how your end users will be able to interact with this field on the canvas

This set of toggles includes options such as preventing field deletion, preventing selection and preventing movement.

Specify how your end users will be able to interact with this field on the canvas
13

Access more advanced configuration options for each field by clicking the gear icon

Access more advanced configuration options for each field by clicking the gear icon
14

For a text field, select the format you require the data to be input. Such as a date, single line of text or area of text

For a text field, select the format you require the data to be input. Such as a date, single line of text or area of text
15

By default, your form will be contain a range of formatting options

By default, your form will be contain a range of formatting options
16

Remove these by clicking No formatting options

Remove these by clicking No formatting options
17

Inputting text into the main form will automatically place the text in the associated frame on the canvas

Inputting text into the main form will automatically place the text in the associated frame on the canvas
18

Text on the canvas

Text on the canvas
19

Next, we'll configure our image field to be controlled by the form

Next, we'll configure our image field to be controlled by the form
20

Specify that you wish the image field to be populated with clipart

Specify that you wish the image field to be populated with clipart
21

Select applicable clipart categories

Select applicable clipart categories
22

The image field can now be controlled from the main form

The image field can now be controlled from the main form
23

Use the form to navigate available imagery

Use the form to navigate available imagery
24

Populated image field

Populated image field
Well done!
Create how-to guides like this in a snap. Get Tango now.