00:00:05:15 - 00:00:07:02
In this tutorial will continue

00:00:07:02 - 00:00:11:04
the configuration of a basic product
using the Infigo form builder.

00:00:11:07 - 00:00:15:00
This section looks at the basic
configuration of a text field.

00:00:15:02 - 00:00:18:02
The end result will be
a single text box on our form,

00:00:18:06 - 00:00:23:17
which accepts a single line
text input and places it onto the canvas.

00:00:23:19 - 00:00:27:06
There will be no formatting options
displayed on the form and end Users

00:00:27:06 - 00:00:34:14
will not have the ability
to format the text using the pop up.

00:00:34:16 - 00:00:36:21
Okay,
so I'm going to begin by adding a text

00:00:36:21 - 00:00:40:27
field to our canvas.

00:00:41:00 - 00:00:42:04
You can format this text

00:00:42:04 - 00:00:45:11
field in the usual way
so you can double click on the field

00:00:45:11 - 00:00:49:14
on the canvas to bring up the pop up,
which is filled with configuration options

00:00:49:16 - 00:00:50:23
amongst many other things.

00:00:50:23 - 00:00:54:15
This will allow you to define the font,
text, size and behavior

00:00:54:16 - 00:00:57:17
when text reaches the end of that field.

00:00:57:20 - 00:00:59:01
So with that field configured

00:00:59:01 - 00:01:03:02
how we want it, I'm just going to go ahead
and go to our custom tab.

00:01:03:02 - 00:01:06:18
So we're going to start configuring
this using the form builder itself.

00:01:06:21 - 00:01:10:05
We'll see that we have an entry there
for the field we've just added.

00:01:10:08 - 00:01:13:26
Let's go to the icon
indicating that it's a text field.

00:01:13:28 - 00:01:18:13
We can select it using the text field icon
and get to more advanced

00:01:18:13 - 00:01:23:21
configuration options
using the select field button.

00:01:23:24 - 00:01:27:03
That will take us
to our advanced configuration

00:01:27:03 - 00:01:35:27
using the form builder
for this particular field.

00:01:35:29 - 00:01:36:10
Okay.

00:01:36:10 - 00:01:39:03
So as with the image fields
that we've looked at in previous

00:01:39:03 - 00:01:48:16
tutorials,
we're going to start off with a field name

00:01:48:19 - 00:01:49:19
that will be displayed

00:01:49:19 - 00:01:59:15
on the actual form itself
unless we proceed it with three asterisks.

00:01:59:17 - 00:01:59:27
We want to

00:01:59:27 - 00:02:02:27
specify the order in which
the field will appear on the form.

00:02:03:03 - 00:02:05:06
So this is a number here.

00:02:05:06 - 00:02:09:07
So if this is the number one
and it proceeds well, and that's

00:02:09:07 - 00:02:16:11
less than the other fields that we have,
it will displayed at the top of the form.

00:02:16:13 - 00:02:17:17
you see in this case

00:02:17:17 - 00:02:20:17
that both of the fields
that we have all listed as one.

00:02:20:24 - 00:02:22:10
So it will go in this order.

00:02:22:10 - 00:02:23:19
It's worth it here.

00:02:23:19 - 00:02:27:11
If we want the single name
input to be higher.

00:02:27:13 - 00:02:29:27
I'm going to actually increase the value

00:02:29:27 - 00:02:35:00
that for the image upload fields.

00:02:35:03 - 00:02:36:19
We have a visibility option

00:02:36:19 - 00:02:39:19
there as well where we can show
and hide the content of that field.

00:02:39:26 - 00:02:42:02
This is great
if you've already fully defined a field,

00:02:42:02 - 00:02:48:17
so don't want to delete it but
don't want it on the canvas at the moment.

00:02:48:20 - 00:02:49:10
Then as

00:02:49:10 - 00:02:53:10
with the image fields underneath there
we have the interactivity options.

00:02:53:10 - 00:02:54:25
So this set of options controls

00:02:54:25 - 00:02:58:09
the primary ways in which your customer
can interact with the field.

00:02:58:11 - 00:03:01:17
You can control behavior
such as their ability to delete

00:03:01:17 - 00:03:04:19
or reposition the field
along with controlling whether or not

00:03:04:19 - 00:03:08:23
they can open that configuration,
pop up by double clicking on it.

00:03:08:26 - 00:03:13:22
Remember, this is only a sample of the
most commonly used interactivity options.

00:03:13:24 - 00:03:17:22
More detailed options can be located
on this particular pop up

00:03:17:25 - 00:03:25:09
in the details tab.

00:03:25:11 - 00:03:26:17
So we'll notice at the moment

00:03:26:17 - 00:03:30:28
that our text field is not appearing
on the actual form itself.

00:03:31:01 - 00:03:33:20
And this is because we haven't selected

00:03:33:20 - 00:03:35:29
the type of text field
that this is going to be.

00:03:35:29 - 00:03:42:05
So the type of
input within this text field.

00:03:42:07 - 00:03:43:07
You have a selection of

00:03:43:07 - 00:03:47:23
multiple format types depending on what
you wish the contents of that field to be.

00:03:47:26 - 00:03:50:26
So if I click on there, you'll see
we have a few different options.

00:03:50:28 - 00:03:53:20
We'll cover
many of these in later tutorials.

00:03:53:20 - 00:03:54:15
For now, we'll stick

00:03:54:15 - 00:03:59:06
with the absolutely basics and select
a single line text field.

00:03:59:08 - 00:04:02:16
You'll see that
as soon as I select that the entry becomes

00:04:02:16 - 00:04:10:08
available on the form on the right hand
side,

00:04:10:11 - 00:04:12:14
that's ready to go
as soon as I place some text

00:04:12:14 - 00:04:15:27
in this form now, which is simulating
how our customers would interact with it.

00:04:16:00 - 00:04:19:00
You can see updates on the canvas.

00:04:19:07 - 00:04:19:18
Okay.

00:04:19:18 - 00:04:23:09
So if you have a lot of fields
on your canvas, it might be difficult

00:04:23:09 - 00:04:27:08
to spot the element
that this text field relates to.

00:04:27:10 - 00:04:30:03
So what we've got on here,
you'll see to the right hand

00:04:30:03 - 00:04:33:13
side of that text field,
we have this little target icon

00:04:33:16 - 00:04:42:00
that snaps
those to a view of this particular field.

00:04:42:02 - 00:04:44:25
So you'll see when
we actually do our initial configuration

00:04:44:25 - 00:04:48:29
options for our text field that it means
that a lot of configuration options,

00:04:48:29 - 00:04:53:10
so a lot of formatting for that particular
text field is available by default.

00:04:53:13 - 00:04:56:05
So things like changing the font,
changing the color,

00:04:56:05 - 00:05:01:04
changing the alignment,
the are all there by default.

00:05:01:07 - 00:05:03:06
In our example,
we're going to remove these

00:05:03:06 - 00:05:05:23
to prevent our customer
from altering the format

00:05:05:23 - 00:05:09:04
and only giving them the option
to change the input.

00:05:09:04 - 00:05:12:00
Text and nothing else.

00:05:12:00 - 00:05:15:03
The easiest way to do this,
so on the configuration within the form

00:05:15:03 - 00:05:19:18
builder of that particular field
is just to click on no formatting options

00:05:19:20 - 00:05:24:06
that will get rid of absolutely all
of the other options which are on here.

00:05:24:09 - 00:05:27:14
alternative
if you want some finer control over this.

00:05:27:15 - 00:05:31:18
So let's say
you only want to disable font selection.

00:05:31:21 - 00:05:33:26
Turn off the no formatting options

00:05:33:26 - 00:05:37:22
and then only toggle the options
of the things you don't want to show.

00:05:37:24 - 00:05:41:00
For example,
if I say no font size selection,

00:05:41:02 - 00:05:44:01
that option will no longer be available
within the form itself.

00:05:44:01 - 00:05:47:02
So once again, I want to draw
your attention to field tags

00:05:47:04 - 00:05:52:15
down at the bottom of the screen.

00:05:52:18 - 00:05:54:26
We see that when we change options
in our form

00:05:54:26 - 00:05:59:12
builder configuration
feel tags are added and removed.

00:05:59:15 - 00:06:02:15
So for example,
keep an eye on the field tags.

00:06:02:16 - 00:06:04:17
See, as I uncheck options,

00:06:04:17 - 00:06:08:07
the added and removed
new tags can be added manually.

00:06:08:07 - 00:06:08:26
If you already

00:06:08:26 - 00:06:12:19
have a configuration in mind
and you know the tags that they require.

00:06:12:21 - 00:06:15:15
And we intend to create and distribute

00:06:15:15 - 00:06:24:14
a list of available
field tags for you to use in the future.

00:06:24:16 - 00:06:27:10
And I know I've said this before,
but remember, not all configuration

00:06:27:10 - 00:06:30:10
options are shown on the actual form
builder itself.

00:06:30:11 - 00:06:34:01
If you need further configuration
or interactivity options,

00:06:34:03 - 00:06:36:01
double click on the actual field.

00:06:36:01 - 00:06:39:14
As an administrator,
you always have access to this pop up

00:06:39:16 - 00:06:41:04
when you want to go to the details tab,

00:06:41:04 - 00:06:43:00
and that will give
you much greater control.