Picture of Create mode (Form Builder) | FB_031

Create mode (Form Builder) | FB_031

In this tutorial, we'll take a look at one of the Form Builder's available modes, which tailor the experience directly to how you wish your end users to interact with this product. Here, we'll be taking a look at the Create mode. This allows fields to be created and formatted from within the Form Builder's user-facing form. This is great when you want your users to be able to freely design some elements of their own artwork.

Tutorial Video Transcript

A transcript of our tutorial video, ensuring you can find exactly what you need, when you need it.

You can search this page to find the relevant time-stamp in the video. Also, this text can be used as part of the tutorial search feature.

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.

 

Incomplete
Step by Step Guide

Create mode (Form Builder) | FB_031

In this tutorial, we'll take a look at one of the Form Builder's available modes, which tailor the experience directly to how you wish your end users to interact with this product.

Here, we'll be taking a look at the Create mode. This allows fields to be created and formatted from within the Form Builder's user-facing form. This is great when you want your users to be able to freely design some elements of their own artwork.

Creation Date: Feb 19, 2024
Created By: Sam Webster

1. Click on MegaEdit config

Click on MegaEdit config

2. Click on Scripts

Click on Scripts

3. As usual with the Form Builder tutorials, begin with a product already set up to use the Form Builder script, then launch the script Config screen

If you need advice on configuring the basics of the Form Builder, take a look at earlier tutorials on the Infigo Academy.

As usual with the Form Builder tutorials, begin with a product already set up to use the Form Builder script, then launch the script Config screen

4. Input the instanceEditorMode and AddFieldTypes lines to your script config

The instanceEditorMode line allows you to select the mode the Form Builder will use. By default, and what we've discussed in the majority of the Form Builder tutorials, is the "Form" mode.

Other options are Upload, Create and Guided.

In this tutorial, we'll utilise 'Create'.

The AddFieldTypes section allows you to define which field types will be available for end users to add whilst using the Create mode. Simply specify each field type with 'true' or 'false'.

Input the instanceEditorMode and AddFieldTypes lines to your script config

5. Click on Save and Continue Edit

Click on Save and Continue Edit

6. Launch the MegaEdit product

Launch the MegaEdit product

7. The product will launch will the user-facing form providing the ability to add new fields.

The product will launch will the user-facing form providing the ability to add new fields.

8. Add a single line text box

Remember, this is the user-facing form and is how they will interact with the product

Add a single line text box

9. Users will have the ability to edit the field they just added, including formatting and the arrangement relative to other fields

Users will have the ability to edit the field they just added, including formatting and the arrangement relative to other fields

10. Newly added text box

Newly added text box

11. When no fields are selected, your users will see a form showing inputs for all added fields, in addition to options to add new fields

When no fields are selected, your users will see a form showing inputs for all added fields, in addition to options to add new fields

12. Add a new clipart field

Add a new clipart field

13. Again, your users will be given options to edit the newly added field

Again, your users will be given options to edit the newly added field

14. By default, clipart fields will give access to all clipart categories assigned to a product

But what happens if we want to limit the accessible clipart categories? We can do this by specifically defining field tags within the script config

By default, clipart fields will give access to all clipart categories assigned to a product

15. Add a new section to the script config named newFieldCustomTags

This section allows us to define specific field tags on each different field type.

We need to identify the relevant field tags. This is easiest to do on the product itself

Add a new section to the script config named newFieldCustomTags

16. Assign a clipart category to your product

This will generate a field tag which we will need to copy and input into our script config

Assign a clipart category to your product

17. Locate and copy the field tag relating to the selected clipart categories

Locate and copy the field tag relating to the selected clipart categories

18. Input the clipart field tag into the relevant area of the newFieldCustomTags area.

Input the clipart field tag into the relevant area of the newFieldCustomTags area.

19. Click on Save and Continue Edit

Click on Save and Continue Edit

20. Reload the MegaEdit product and add a new clipart field

Reload the MegaEdit product and add a new clipart field

21. Available cliparts will now be limited to the categories specified in the script

Available cliparts will now be limited to the categories specified in the script

22. Click on Custom Tab

Click on Custom Tab

23. Click on Custom Tab

Click on Custom Tab

24. Remember, if you want to make static, unchangable fields on the product, the tools exist to do this.

Other tutorials go into this in more detail, however you can make use of mask and background layers, along with specifying that a field cannot be interacted with.

Remember, if you want to make static, unchangable fields on the product, the tools exist to do this.

Individual Search Words

customization, designer, user-friendly, interactive, configuration, interface, features, elements, flexibility, script

Alternate Search Phrases

add fields to form, interactive form design, configure form settings, user-generated content, customizable form fields, create new fields, edit field properties, manage form layout, user interaction options, form design flexibility