00:00:05:15 - 00:00:08:21
In this tutorial, we'll take a look
at one of the form builders available
00:00:08:21 - 00:00:11:26
modes, which tailor
the experience directly to how you wish
00:00:11:26 - 00:00:14:26
the end user to interact
with this product.
00:00:15:08 - 00:00:18:03
Here we'll be taking a look
at the create mode.
00:00:18:03 - 00:00:19:23
This allows fields to be created
00:00:19:23 - 00:00:23:01
and formatted from within the form
builders user facing form.
00:00:23:18 - 00:00:26:07
This is great when you want users
to be able to freely design
00:00:26:07 - 00:00:29:07
some elements of their own artwork.
00:00:30:07 - 00:00:31:13
What I'm going to do is launch
00:00:31:13 - 00:00:35:08
the script
config for this particular product.
00:00:35:09 - 00:00:38:09
This is access, the same way
we've discussed in other tutorials
00:00:38:20 - 00:00:41:20
in the Form Builder series.
00:00:43:13 - 00:00:45:20
You'll notice that I've already input
00:00:45:20 - 00:00:48:20
into this particular config
for this particular product.
00:00:48:21 - 00:00:52:04
I'll just talk through some of the steps
that have gone through here.
00:00:55:17 - 00:00:56:03
So first
00:00:56:03 - 00:00:59:03
off, we have the instanceEditorMode line
00:00:59:08 - 00:01:03:22
This allows you to select the mode
the form builder will use by default.
00:01:03:22 - 00:01:04:17
And what we've discussed
00:01:04:17 - 00:01:08:13
in the majority of the form
builder tutorials is the form mode.
00:01:09:01 - 00:01:12:08
Other options are upload, create
and guided
00:01:12:16 - 00:01:15:11
at the time of recording.
00:01:15:11 - 00:01:17:06
In this tutorial we're going to utilize
00:01:17:06 - 00:01:20:06
create.
00:01:20:12 - 00:01:23:21
The next section down is the ADD field
type section.
00:01:24:05 - 00:01:27:01
This allows you to define
which field types will be available
00:01:27:01 - 00:01:30:09
for end users
to add whilst using the create mode.
00:01:30:24 - 00:01:34:22
Simply specify
each of the field types with true
00:01:34:22 - 00:01:37:22
or false following them.
00:01:41:24 - 00:01:44:08
So once you've done that,
just go ahead and save the config
00:01:44:08 - 00:01:47:08
and reload the product.
00:01:49:24 - 00:01:50:27
Product will launch
00:01:50:27 - 00:01:55:03
with the user facing form,
providing the ability to add new fields.
00:01:55:08 - 00:01:58:06
You can see this top section on the user
facing form
00:01:58:06 - 00:02:01:19
with a couple of dropdowns
allowing you to add different field types.
00:02:05:06 - 00:02:08:03
Let's
go ahead and add a single line of text
00:02:08:03 - 00:02:11:03
just to get us get ourself started here.
00:02:11:28 - 00:02:14:14
And remember that
this is a user facing form.
00:02:14:14 - 00:02:17:14
This is how they will interact
with the product.
00:02:18:20 - 00:02:21:20
Now, when you add a new field,
a couple of things will happen.
00:02:21:23 - 00:02:24:13
First and foremost,
you will have the ability to input
00:02:24:13 - 00:02:27:13
into the newly created field,
as you would expect.
00:02:27:19 - 00:02:31:10
But users also have the ability to format
00:02:32:28 - 00:02:35:07
the text
within the field that we've just created
00:02:35:07 - 00:02:39:00
and also change the arrangement
or management of that
00:02:39:00 - 00:02:42:18
particular field as well,
such as changing the Z order arrangement
00:02:43:05 - 00:02:46:05
or of course, deleting the field again
00:02:49:24 - 00:02:51:26
when no fields are selected.
00:02:51:26 - 00:02:54:25
Your users will see a form
showing inputs for all
00:02:54:25 - 00:02:58:17
added fields
in addition to options to add new fields.
00:03:02:05 - 00:03:03:10
Let's try something different.
00:03:03:10 - 00:03:06:10
Let's go to a clip of field.
00:03:10:06 - 00:03:10:20
Again,
00:03:10:20 - 00:03:14:03
your users will be given options to edit
that newly added field.
00:03:14:03 - 00:03:17:16
So you can see we've got the ability
to select an image and we can choose
00:03:17:16 - 00:03:20:16
whether or not it distorts the clipart.
00:03:22:25 - 00:03:24:22
Now, by default clipart
00:03:24:22 - 00:03:28:23
fields will give access to all clipart
categories assigned to a product.
00:03:29:13 - 00:03:32:28
You can see, for example,
I can get too old for clipart categories
00:03:32:28 - 00:03:35:28
and all of the images
contained within them.
00:03:36:25 - 00:03:40:05
What happens if we want to limit
the accessible clipart categories?
00:03:40:16 - 00:03:44:01
We can do this
by specifically defining field tags
00:03:44:08 - 00:03:47:08
within the script config.
00:03:48:03 - 00:03:50:08
So if I just go back to my script config,
00:03:50:08 - 00:03:52:12
you'll notice
the second section down here,
00:03:52:12 - 00:03:54:00
which doesn't
currently have too much in it.
00:03:57:20 - 00:03:58:10
What we're looking at
00:03:58:10 - 00:04:01:10
is this new field custom tags.
00:04:01:10 - 00:04:05:28
This section allows us to define specific
field tags on each different field type.
00:04:06:13 - 00:04:09:11
We need to identify
the relevant field tags.
00:04:09:11 - 00:04:12:11
And the easiest way to do
this is on the product itself.
00:04:18:15 - 00:04:21:11
So this is just like a testing phase
at this stage.
00:04:21:11 - 00:04:25:06
This is just to actually get
the name of the relevant field tags.
00:04:25:21 - 00:04:29:20
So if I go ahead and add an image frame,
just start customizing
00:04:29:20 - 00:04:32:24
that using our custom tab
as I normally would.
00:04:36:29 - 00:04:40:06
And then I want to assign the relevant
clipart category to it.
00:04:40:07 - 00:04:43:06
And this is the one
I actually want to make.
00:04:43:06 - 00:04:46:24
So available
within this particular product.
00:04:46:28 - 00:04:49:28
When our end users add a
00:04:50:24 - 00:04:53:24
clipart frame from the form
on the right hand side.
00:04:54:06 - 00:04:57:05
So let's say, for example,
I only want them to be able to utilize
00:04:57:05 - 00:04:58:23
Infigo headshots.
00:04:58:23 - 00:05:01:23
You'll see when I activate that on my test
frame,
00:05:01:27 - 00:05:06:01
it comes up with the relevant field type
within that particular field.
00:05:06:17 - 00:05:10:27
And this is the text that I need
to take over to my script config.
00:05:10:27 - 00:05:13:10
So locate the relevant type of field.
00:05:13:10 - 00:05:15:07
So in this case, it's a clipart field
00:05:16:10 - 00:05:19:10
and then I'm going to input that field tag
00:05:19:22 - 00:05:22:22
into that.
00:05:24:15 - 00:05:25:11
We're going to save that
00:05:25:11 - 00:05:28:11
and then reloads my MegaEdit product.
00:05:36:28 - 00:05:38:04
Now, when I go ahead
00:05:38:04 - 00:05:42:01
and add a new clipart
field, we'll see that when I go to select.
00:05:42:01 - 00:05:45:20
The image is limited
only to those categories
00:05:45:20 - 00:05:49:15
that I have allowed access to in my script
config So,
00:05:49:15 - 00:05:52:24
for example, in this case,
all I can get to is the headshot category.
00:06:00:27 - 00:06:03:03
Now remember that
if you want to make static,
00:06:03:03 - 00:06:07:00
unchangeable fields on the product,
the tools do exist to do this.
00:06:07:27 - 00:06:10:04
Other tutorials
go into this in more detail.
00:06:10:04 - 00:06:13:14
However, you can make use of masks
and background layers,
00:06:13:23 - 00:06:16:23
along with specifying
that a field cannot be interacted with.
00:06:17:06 - 00:06:22:22
What this means is that you can create
permanent backgrounds or foreground layers
00:06:23:00 - 00:06:26:01
which the customer can't interact with
and can't change.
00:06:26:14 - 00:06:28:26
This is great
if you just need to have them to interact
00:06:28:26 - 00:06:33:02
with certain parts or certain areas
of this particular product.