00:00:05:15 - 00:00:07:13
In this tutorial, we'll take a very quick

00:00:07:13 - 00:00:11:10
look at the fundamental capabilities
of the Infigo Form Builder.

00:00:11:12 - 00:00:14:29
This piece of functionality allows you
to easily configure variable product

00:00:14:29 - 00:00:18:10
templates whilst giving your users
a minimalist, user friendly

00:00:18:10 - 00:00:21:17
form with which to interact with.

00:00:21:20 - 00:00:24:07
We're going to begin
by creating a MegaEdit product

00:00:24:07 - 00:00:32:07
and navigating to its MegaEdit
config settings

00:00:32:09 - 00:00:33:07
is sure to apply

00:00:33:07 - 00:00:37:22
resources such as canvases, stocks,
clip art and whatever else you need

00:00:37:22 - 00:00:42:04
as part of the usual MegaEdit product
configuration and make sure you

00:00:42:04 - 00:00:46:24
look at the general settings as well
to configure the product as you like.

00:00:46:27 - 00:00:49:20
Before we can use the Infigo form builder,
we need to make sure

00:00:49:20 - 00:00:51:22
that the relevant script is active.

00:00:51:22 - 00:00:55:22
So click on the script tab
So at the time of creation,

00:00:55:24 - 00:00:59:00
this script is named
the Form Builder Refactor.

00:00:59:02 - 00:01:00:20
However, there is a high possibility

00:01:00:20 - 00:01:04:04
the name has been altered prior
to its official release.

00:01:04:07 - 00:01:07:01
Information
will be available on the Infigo Academy

00:01:07:01 - 00:01:11:19
as to these script to look out for
should the name have been changed?

00:01:11:21 - 00:01:13:03
Whatever the name of the script is.

00:01:13:03 - 00:01:20:04
Make sure it is enabled
and then click on Save Changes.

00:01:20:07 - 00:01:21:06
Now we're going to go ahead

00:01:21:06 - 00:01:25:13
and launch that MegaEdit product

00:01:25:16 - 00:01:27:20
with the Infigo form builder enabled.

00:01:27:20 - 00:01:31:10
A new tab will be available
on the MegaEdit left paint.

00:01:31:12 - 00:01:37:12
This contains all of the configuration
options for the Infigo form builder.

00:01:37:14 - 00:01:39:12
So before we actually add any fields,

00:01:39:12 - 00:01:44:26
if you just go onto the page tab
within the custom tab,

00:01:44:28 - 00:01:47:00
we can use the form builder to control

00:01:47:00 - 00:01:50:10
whole page elements such as the page name.

00:01:50:10 - 00:01:54:21
You can see here whether or not
we want to allow background specification

00:01:54:28 - 00:01:58:23
or layout specification
with backgrounds and layouts.

00:01:58:28 - 00:02:02:18
Once this selection has been enabled
like this,

00:02:02:21 - 00:02:05:28
the administrator is able to pick
and choose the background

00:02:05:28 - 00:02:07:12
or layout categories.

00:02:07:12 - 00:02:11:06
The customer will be able to select from

00:02:11:08 - 00:02:12:10
and this is accomplished

00:02:12:10 - 00:02:19:26
using this very simple set of toggles

00:02:19:28 - 00:02:20:15
backgrounds.

00:02:20:15 - 00:02:25:16
A layout change options will be shared
on the form to the right of the screen.

00:02:25:18 - 00:02:28:15
So please do note that
the form to the right of the screen is

00:02:28:15 - 00:02:32:08
what your end users are going to see
and will interact with.

00:02:32:10 - 00:02:36:05
Your users will not be able to interact
with the custom tab over on the left

00:02:36:05 - 00:02:39:16
hand side, which you're using
to configure the form on the right

00:02:39:16 - 00:02:45:11
hand side.

00:02:45:13 - 00:02:47:23
So now will work on
configuring some fields.

00:02:47:23 - 00:02:51:23
So I'm just going to add
a couple of fields to my canvas.

00:02:51:25 - 00:02:54:04
So going back to Custom Tab next,

00:02:54:04 - 00:02:57:26
you can configure individual fields
present on the canvas.

00:02:57:29 - 00:03:01:10
Each field will have its own set
of configuration options

00:03:01:10 - 00:03:05:23
available within this tab.

00:03:05:26 - 00:03:06:24
First and foremost, we're

00:03:06:24 - 00:03:10:10
going to enter some field names
so I can see this is my text field.

00:03:10:10 - 00:03:23:08
By clicking on it,
I select the relevant field.

00:03:23:10 - 00:03:25:25
Next option along we can select the order

00:03:25:25 - 00:03:30:00
in which these fields are to appear
on your customer facing form.

00:03:30:03 - 00:03:31:29
What were the number
the higher up the form?

00:03:31:29 - 00:03:35:12
It appears so our text field will appear
first in this case and image

00:03:35:12 - 00:03:40:22
field second,

00:03:40:24 - 00:03:41:21
the set of toggles

00:03:41:21 - 00:03:46:02
we have underneath
each of these form entries is controlling

00:03:46:02 - 00:03:50:14
how our end users are able to interact
with this field on the canvas.

00:03:50:17 - 00:03:54:28
This set of toggles includes options
such as preventing field deletion,

00:03:55:01 - 00:03:57:28
preventing selection
and preventing movement,

00:03:57:28 - 00:04:06:26
and you can configure those as applicable.

00:04:06:28 - 00:04:10:06
We can access more advanced
configuration options for each field

00:04:10:06 - 00:04:19:21
by clicking on the gear
icon on the right hand side of its inputs.

00:04:19:23 - 00:04:20:28
So for a text field,

00:04:20:28 - 00:04:24:19
we need to select the format
that we require the data to be input.

00:04:24:22 - 00:04:26:06
So you'll see we have a selection there.

00:04:26:06 - 00:04:30:08
The primary ones for this basic
tutorial could be a single line text,

00:04:30:10 - 00:04:33:10
a multi-line text, or a time or a date.

00:04:33:17 - 00:04:35:28
I'm just going to go
with a single line text

00:04:35:28 - 00:04:38:17
and you'll see that
as soon as I make a selection here,

00:04:38:17 - 00:04:41:10
we get to the option
appearing on the form over

00:04:41:10 - 00:04:44:10
on the right hand side.

00:04:44:10 - 00:04:45:08
Now, by default,

00:04:45:08 - 00:04:49:11
your form will contain a range
of formatting options such as font

00:04:49:11 - 00:04:54:26
selection, colour, bold,
various things like that.

00:04:54:28 - 00:04:56:08
In this simple example,

00:04:56:08 - 00:04:59:29
we're just going to remove these options
just to allow text input.

00:05:00:01 - 00:05:03:06
And I can do this
by clicking on the no formatting options.

00:05:03:06 - 00:05:08:11
Toggle

00:05:08:13 - 00:05:09:00
Inputting

00:05:09:00 - 00:05:14:07
text into the main form will automatically
place the text on the associated frame

00:05:14:09 - 00:05:21:05
on the canvas.

00:05:21:07 - 00:05:21:16
Next,

00:05:21:16 - 00:05:24:25
we're going to configure the image field.

00:05:24:27 - 00:05:27:14
I'm going to go back on our custom tab

00:05:27:14 - 00:05:30:03
and select
the advanced options on the image

00:05:30:03 - 00:05:33:03
field.

00:05:33:10 - 00:05:34:00
In this case,

00:05:34:00 - 00:05:38:01
we want to specify that a clipart
will be present within this image field.

00:05:38:03 - 00:05:42:21
So I'm going to select clipart option
from there I'm given a dropdown

00:05:42:21 - 00:05:45:28
where I can control which clipart
categories assigned to this product.

00:05:46:04 - 00:05:53:11
are relevant to this particular field.

00:05:53:13 - 00:05:54:08
With those options

00:05:54:08 - 00:05:58:02
selected, we can now
get to the selection of the image within

00:05:58:02 - 00:06:03:17
the image field on the form
over on the right hand side,

00:06:03:19 - 00:06:12:14
so I can use the form
to navigate available imagery.

00:06:12:16 - 00:06:15:28
As always, while configuring this
as an administrator, you do have access

00:06:15:28 - 00:06:20:11
to additional configuration options
by double clicking on a field

00:06:20:14 - 00:06:22:04
and then going to the details tab.