Picture of Configuring the page in the Form Builder | FB_005

Configuring the page in the Form Builder | FB_005

In this tutorial, we'll take a look at how to configure some of the general settings for each of the pages in your MegaEdit product. This includes options such as renaming each page (instead of the basic "Page 1", etc) and allowing your users to change the background of the page from within the form.

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:06:15
In this tutorial, we'll

00:00:06:15 - 00:00:09:15
take a look at how to configure
some of the general settings

00:00:09:17 - 00:00:13:00
for each of the pages
on your MegaEdit product.

00:00:13:03 - 00:00:16:02
This includes options
such as renaming each page

00:00:16:02 - 00:00:19:29
instead of just having the basic page
one, page two, that kind of thing,

00:00:20:01 - 00:00:23:01
and allowing your users
to change the background of the page

00:00:23:01 - 00:00:28:25
from within the form builder
main form itself.

00:00:28:27 - 00:00:31:25
We're going to start off
by clicking on the custom tab,

00:00:31:25 - 00:00:36:07
which is on the left hand
window in MegaEdit.

00:00:36:09 - 00:00:38:23
The custom tab is available
when you have the form build

00:00:38:23 - 00:00:40:22
a script enabled on a product.

00:00:40:22 - 00:00:42:15
As we'll see in future tutorials.

00:00:42:15 - 00:00:47:00
This is primarily used to control
and configure individual fields on forms.

00:00:47:02 - 00:00:50:22
However, we can also use it to control
elements of each individual page

00:00:50:29 - 00:00:54:19
in the MegaEdit product.

00:00:54:21 - 00:00:56:26
So we start off on the Fields tab.

00:00:56:26 - 00:00:58:18
You can see
we don't have any fields on the form,

00:00:58:18 - 00:01:01:18
so we don't have any options in here
at the moment.

00:01:01:24 - 00:01:05:03
I'm just going to go ahead
and switch to the page tab

00:01:05:05 - 00:01:07:20
and this gives me options
for this particular page

00:01:07:20 - 00:01:11:29
on the MegaEdit product.

00:01:12:01 - 00:01:13:13
So we're going to start off

00:01:13:13 - 00:01:16:13
by entering a page display name.

00:01:16:17 - 00:01:20:11
So instead of the basic page one,
you can name each of the pages

00:01:20:11 - 00:01:22:04
by filling out this field.

00:01:22:04 - 00:01:25:01
This updated name will be shown
in various locations,

00:01:25:01 - 00:01:28:20
such as the page selector
and within the form itself.

00:01:28:22 - 00:01:32:01
So this example is going to be
a basic business card.

00:01:32:01 - 00:01:34:18
So we'll start off
just by naming this logo site.

00:01:34:18 - 00:01:37:01
For example.

00:01:37:04 - 00:01:39:21
You can see that it's now been renamed

00:01:39:21 - 00:01:42:28
in the actual MegaEdit window itself

00:01:43:00 - 00:01:45:09
and within the form
I'm just going to repeat this process

00:01:45:09 - 00:01:49:04
on the second page as well.

00:01:49:06 - 00:01:51:19
So the next thing I'm going to do again on
the page is tab

00:01:51:19 - 00:01:56:20
is to allow the user to change
the background of this particular page.

00:01:56:23 - 00:01:59:28
We can do this
by activating the backgrounds select

00:02:00:01 - 00:02:03:16
option.

00:02:03:19 - 00:02:05:08
It's worth
noting that we do have the ability

00:02:05:08 - 00:02:06:29
to include layouts on here as well.

00:02:06:29 - 00:02:08:12
So if you want to create,

00:02:08:12 - 00:02:12:01
we've already created
applicable layouts that fit on this page.

00:02:12:04 - 00:02:16:09
You can also utilize those and allow users
to select between them.

00:02:16:11 - 00:02:17:18
We're sticking with background now.

00:02:17:18 - 00:02:20:18
You see that once we have the activated,
we have an additional dropdown

00:02:20:21 - 00:02:24:29
that allows us to pick and choose
individual background categories.

00:02:25:04 - 00:02:32:26
If we only want to make certain ones
available in the actual form itself

00:02:32:28 - 00:02:34:00
so I’ll activate that

00:02:34:00 - 00:02:40:19
particular background category.

00:02:40:22 - 00:02:41:28
So as we change

00:02:41:28 - 00:02:45:14
options in the form,
build a custom tab here,

00:02:45:21 - 00:02:49:29
you'll notice that the fields
tag appear and disappear.

00:02:50:02 - 00:02:52:04
And these are at the bottom of the screen
here.

00:02:52:04 - 00:02:55:04
These inform the script of the settings
that you have applied.

00:02:55:05 - 00:02:58:05
You can add field tags
manually if you wish to do so.

00:02:58:10 - 00:03:01:19
We do intend to make a list of available
field tags available

00:03:01:25 - 00:03:08:12
in the near future.

00:03:08:14 - 00:03:08:27
Okay.

00:03:08:27 - 00:03:09:22
So I'm going to go ahead

00:03:09:22 - 00:03:14:13
and make sure we actually save this
as a product template default.

00:03:14:15 - 00:03:18:16
So we want to make sure that the changes
we've made actually are retained

00:03:18:23 - 00:03:21:27
if we navigate away
from the page in MegaEdit, we do this

00:03:21:27 - 00:03:29:24
by going to menu
and then save as product default.

00:03:29:27 - 00:03:32:01
All right.

00:03:32:01 - 00:03:35:10
So on this
page we activated the background options

00:03:35:17 - 00:03:38:07
and as soon as we did that,
you may have noticed on the right hand

00:03:38:07 - 00:03:43:04
side on the main form that we now
have the ability to change the background.

00:03:43:04 - 00:03:46:14
Clicking on this will allow you to select
between available entries that are

00:03:46:14 - 00:03:50:11
within the selected background categories
all the layout categories.

00:03:50:11 - 00:03:55:08
If you've applied them,
which have been applied, the actual form.

00:03:55:10 - 00:03:57:22
So for example,
if I select to change backgrounds

00:03:57:22 - 00:04:00:23
and choose either an image or a colour
that I've defined, we'll see.

00:04:00:23 - 00:04:07:09
That's now applied.

00:04:07:12 - 00:04:10:00
As a reminder, this is how our end users,

00:04:10:00 - 00:04:12:27
our customers are eventually
going to interact with our product.

 

Incomplete
Step by Step Guide

Configuring the page in the Form Builder | FB_005

In this tutorial, we'll take a look at how to configure some of the general settings for each of the pages in your MegaEdit product. This includes options such as renaming each page (instead of the basic "Page 1", etc) and allowing your users to change the background of the page from within the form.

Creation Date: Jan 18, 2024
Created By: Sam Webster

1. Click on Custom Tab

The Custom Tab is available when you have the form builder script enabled on a Product. As we'll see in future tutorials, this is primarily used to control and configure individual fields on forms, however we can also use it to control elements of each individual page in the MegaEdit product.

Click on Custom Tab

2. Click on Page

Click on Page

3. Enter a page name

Instead of the basic "Page 1", etc, you can name each of the pages by filling out this field.

This updated name will be shown in various locations, such as the page selector and within the form itself.

Enter a page name

4. Change the page using the page selector and repeat the process on other pages

Change the page using the page selector and repeat the process on other pages

5. Click on Background Select and/or Layout Select

This option allows you to apply background categories or layout categories to the page from within the form.

Click on Background Select and/or Layout Select

6. Select the background categories you wish to use

These are defined on the canvas you have in use.

Select the background categories you wish to use

7. Tags

As you begin to change settings on the form builder, you will notice that fields tags appear and disappear. These inform the script of the settings you have applied.

You can add field tags manually if you wish. We intend to make a list of available field tags available in the near future.

Tags

8. Click the Menu dropdown

Click the Menu dropdown

9. Click on Save as product default

This ensures that any changes you have made are applied to the default product.

Click on Save as product default

10. Click on Change background

With these changes made, you will see a "Change Background" or "Change Layout" button available at the top of the forms for the relevant page(s).

Click on Change background

11. Clicking this will allow you to select between available entries within the selected Background categories or Layout categories applied to the form

Clicking this will allow you to select between available entries within the selected Background categories or Layout categories applied to the form

12. Example of applied background

Example of applied background

Individual Search Words:

page settings, rename, background, layout, customization, form builder, configuration, options, editor, script

Alternate Search Phrases:

page configuration tutorial, change page names, background customization options, layout settings guide, form builder page options, rename pages in MegaEdit, adjust background in forms, MegaEdit page customization, setup page elements, apply background categories