Picture of Combining variables in the same text field (Form Builder) | FB_015

Combining variables in the same text field (Form Builder) | FB_015

In this tutorial, we'll learn how to write your Form Builder script config for multiple variables. We'll also take a look at how we can combine these variables to appear in the same text field on your canvas, as well as how to automate a line break between variables.

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:07
In this tutorial,
we'll learn how to write your form,

00:00:08:07 - 00:00:11:24
build a script config
for multiple variables.

00:00:11:27 - 00:00:14:26
We'll also take a look
at how we can combine these variables

00:00:14:26 - 00:00:18:04
to appear in the same text
field on your canvas,

00:00:18:07 - 00:00:22:24
as well as how to automate a line break
between variables.

00:00:22:26 - 00:00:26:11
The first thing we need to do is to update
our form, build a config or form,

00:00:26:11 - 00:00:29:17
build a global config
depending on how we want to

00:00:29:17 - 00:00:32:17
utilize the script.

00:00:32:21 - 00:00:35:08
So I'm on my mega edit scripts screen

00:00:35:08 - 00:00:38:02
and I'm just going to go to the global
config of my form,

00:00:38:02 - 00:00:45:26
build a script.

00:00:45:29 - 00:00:47:17
Creating multiple variables

00:00:47:17 - 00:00:52:01
is basically a repeat
of the config of the first variable.

00:00:52:03 - 00:00:54:03
However, you need to remember to add

00:00:54:03 - 00:00:57:19
a comma
at the end of your first variable config.

00:00:57:26 - 00:01:02:24
This tells the system
to move on to the next variable.

00:01:02:27 - 00:01:03:12
In this

00:01:03:12 - 00:01:07:07
example variable we're going to ensure
that a line break is input.

00:01:07:07 - 00:01:12:15
As soon as we start
typing into the field on the form.

00:01:12:17 - 00:01:16:21
So here, for example,
this will ensure that our name and title

00:01:16:21 - 00:01:20:13
field always appear on different lines,
even if they're used within

00:01:20:13 - 00:01:22:03
the same text field.

00:01:22:03 - 00:01:27:14
And this is accomplished

00:01:27:16 - 00:01:30:10
using backslash n in the prefix,

00:01:30:10 - 00:01:37:11
but can also be applied to the suffix
if it's relevant to you.

00:01:37:13 - 00:01:38:13
With that configured, I'm

00:01:38:13 - 00:01:42:08
just going to click Save

00:01:42:10 - 00:01:44:28
and remember
if you've configured it incorrectly,

00:01:44:28 - 00:01:51:26
it will give you a warning down here
and won't apply the Save.

00:01:51:28 - 00:01:52:06
All right.

00:01:52:06 - 00:02:00:12
So I'm just going to navigate to
or reload my product.

00:02:00:14 - 00:02:01:27
So I've just gone into the advanced

00:02:01:27 - 00:02:05:29
configuration options for that text field
that we already had present.

00:02:05:29 - 00:02:08:16
So this is from the previous tutorial.

00:02:08:19 - 00:02:09:00
What I'm going

00:02:09:00 - 00:02:12:00
to do is update the field text cache

00:02:12:00 - 00:02:15:24
section to contain both of those variables
that we've created.

00:02:15:27 - 00:02:18:15
So you can see that both of the variables
have now been registered

00:02:18:15 - 00:02:26:00
as available underneath it.

00:02:26:03 - 00:02:28:06
So I'm just going to update this
so that we just have one

00:02:28:06 - 00:02:39:02
variable immediately following the other.

00:02:39:05 - 00:02:39:16
Okay.

00:02:39:16 - 00:02:44:11
So with both of those variables
actually inputs onto our field text cache,

00:02:44:11 - 00:02:47:14
you'll see that they're now both
have an entry in the actual form itself.

00:02:47:14 - 00:02:51:27
Entering a value in the first field

00:02:52:00 - 00:02:55:13
will hide all of the variable names
within that field

00:02:55:15 - 00:02:59:13
and the resulting text for only
the completed form entries will be shown

00:02:59:13 - 00:03:03:29
as we had a line break built into the
variable suffix for the second variable

00:03:04:02 - 00:03:11:16
entering the value into the title field
will automatically add that line break.

00:03:11:18 - 00:03:14:18
So you can see
that even though the specification is one

00:03:14:19 - 00:03:17:22
variable immediately after the other
because we've specified

00:03:17:27 - 00:03:21:14
the prefix of a line
break, it's doing that for us.

 

Incomplete
Step by Step Guide

Combining variables in the same text field (Form Builder) | FB_015

In this tutorial, we'll learn how to write your Form Builder script config for multiple variables.

We'll also take a look at how we can combine these variables to appear in the same text field on your canvas, as well as how to automate a line break between variables.

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

1. Update the Form Builder global config

We begin by navigating to our global config for the Form Builder script. Remember, we can create variables on a product by product basis if required, however creating them on a global level will ensure all products using the Form Builder script will have access.

Creating multiple variables is basically a repeat of the config for the first variable, however remember to add a "," at the end of your first variable config. This tells the system to move on to the next.

In this example variable, we are going to ensure that a line break is input as soon as we start typing into the field on the form. So here, for example, this will ensure that our Name and Title fields always appear on different lines, even if they are used within the same text field.

This is accomplished using "\n" in the prefix, but can also be applied to the suffix.

Update the Form Builder global config

2. Click on Save and Continue Edit

If your config format is incorrect, you will receive an error message informing you of such.

Click on Save and Continue Edit

3. Navigate to or create a product containing a text field

Navigate to or create a product containing a text field

4. Select the advanced configuration options for the text field

Select the advanced configuration options for the text field

5. Update the Field text cache to contain both variables

You will note that both our available variables are now detailed below this field.

For this example, we simply want the Title variable placed immedietely after the Name variable.

Update the Field text cache to contain both variables

6. With both variables present in the Field text cache of field, both will have associated inputs on the main form.

With both variables present in the Field text cache of field, both will have associated inputs on the main form.

7. Entering a value in the first field will hide all variables names within that field ,and the resulting text for only the completed form entries will be shown.

Entering a value in the first field will hide all variables names within that field ,and the resulting text for only the completed form entries will be shown.

8. As we had a line break built into the variable suffix, entering a value into the Title form field will automatically add a line break.

As we had a line break built into the variable suffix, entering a value into the Title form field will automatically add a line break.

Individual Search Words

combine, multiple, variables, linebreak, global, update, configure, script, input, form

Alternate Search Phrases

configuring multiple variables, combining form inputs, setting line breaks, global script configuration, adding multiple inputs, form field updates, creating input variables, automating line breaks, merging text fields, script customization for forms