Picture of Configuring image fields for image uploads in the Form Builder | FB_007

Configuring image fields for image uploads in the Form Builder | FB_007

Following on from FB_006, we'll this time look at configuring our form field to accept uploaded imagery from our users. The process is virtually identical to the process of configuring for clipart.

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:00
Following on from the previous tutorial,
will this time

00:00:08:00 - 00:00:13:28
look at configuring our form fields
to accept uploaded imagery from our users?

00:00:14:01 - 00:00:18:27
This process is virtually identical
to the process of configuring for Clip.

00:00:18:29 - 00:00:23:16
I'm going to begin by adding and
positioning an image field on our canvas.

00:00:23:18 - 00:00:25:21
Now, this is going to be on my second
page.

00:00:25:21 - 00:00:29:06
The end result of this is just going to be
the ability to upload a headshot

00:00:29:06 - 00:00:35:06
onto the actual business card itself.

00:00:35:08 - 00:00:36:04
That just going to add

00:00:36:04 - 00:00:45:16
an image field and position it.

00:00:45:19 - 00:00:47:26
And then we're going to go over
to the custom tab and start

00:00:47:26 - 00:00:49:14
configuring that field.

00:00:49:14 - 00:00:55:29
So we'll start off
by entering a field name.

00:00:56:01 - 00:00:58:13
As a reminder,
if you don't want the field name to appear

00:00:58:13 - 00:01:04:04
on the form itself for the end user,
you can precede it with three asterisks.

00:01:04:04 - 00:01:06:12
Next, we'll have a look
at the interactivity options.

00:01:06:12 - 00:01:09:12
Again, we can use these toggles to quickly
define common

00:01:09:12 - 00:01:13:12
interactivity preferences
on this field on the canvas.

00:01:13:14 - 00:01:14:13
This includes features

00:01:14:13 - 00:01:26:14
such as preventing users
from selecting, deleting or moving fields.

00:01:26:17 - 00:01:29:25
Okay, so we want the ability for users
to upload imagery.

00:01:29:25 - 00:01:35:08
So for this we're going to select
the toggle, which is user image, select.

00:01:35:11 - 00:01:38:15
This will ensure that your customers
are provided with an upload option.

00:01:38:15 - 00:01:41:23
So you'll see as soon as I check this,
we get this upload image option

00:01:41:23 - 00:01:46:14
appearing on the right hand side,

00:01:46:16 - 00:01:47:11
and this will allow them

00:01:47:11 - 00:01:50:15
to select
an image to upload from their device.

00:01:50:15 - 00:01:50:22
Right.

00:01:50:22 - 00:01:54:00
Just go ahead and click on that upward
image just to see what that looks like.

00:01:54:02 - 00:01:57:27
So I've chosen an image to upload that
and you'll see what pops up is the ability

00:01:57:27 - 00:01:59:02
to add that to an album.

00:01:59:02 - 00:02:00:22
So the same way as if you'd set up

00:02:00:22 - 00:02:04:22
your MegaEdit product in a different way
to allow the import of images.

00:02:04:24 - 00:02:08:25
I've got the option to either select
from an existing set of albums

00:02:08:28 - 00:02:16:13
or I can create a new album.

00:02:16:15 - 00:02:19:15
And again,
if that doesn't quite upload as we like,

00:02:19:22 - 00:02:23:20
we can do further configuration on
that field just by clicking on the pop up.

00:02:23:20 - 00:02:27:07
So double clicking to bring the pop up
and then go into the details tab.

00:02:27:09 - 00:02:30:14
And again, we've got the ability
to prevent our users from being able

00:02:30:14 - 00:02:46:19
to access this pop up at all
using these interactivity options.

00:02:46:22 - 00:02:49:15
so you have additional customization
options on the form

00:02:49:15 - 00:02:53:05
when an image has been uploaded
into that particular field.

00:02:53:07 - 00:02:55:25
So, for example,
we have the ability to reposition

00:02:55:25 - 00:02:58:26
and rotate the image
within the frame itself,

00:02:58:26 - 00:03:04:03
so we're not actually moving
the frame itself.

00:03:04:05 - 00:03:04:11
Right.

00:03:04:11 - 00:03:05:17
So with those changes made, we're

00:03:05:17 - 00:03:09:17
just going to go ahead,
click on menu and save as product default.

 

Incomplete
Step by Step Guide

Configuring image fields for image uploads in the Form Builder | FB_007

Following on from the previous tutorial, we'll this time look at configuring our form field to accept uploaded imagery from our users. The process is virtually identical to the process of configuring for clipart.

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

1. Begin by adding and positioning an image field on your canvas

Begin by adding and positioning an image field on your canvas

2. Click on Custom Tab

Click on Custom Tab

3. Click on the field icon to select the field on the canvas it relates to

Click on the field icon to select the field on the canvas it relates to

4. Enter a field name

This will be displayed above the field on the form itself. If you wish to hide the field title on the form, simply type "***" in front of the field name you require.

Enter a field name

5. Interactivity Options

Use these toggles to quickly define common interactivity preferences for this field on the canvas. This includes features such as preventing users from selecting, deleting or moving the field.

Interactivity Options

6. Check User image select

This will ensure that your customers are provided with an upload option for this field on the form. This will allow them to select an image to upload from their device.

Check User image select

7. The field will now be available on the form to the right of the screen, ready to interact with

The field will now be available on the form to the right of the screen, ready to interact with

8. Click on Upload Image

Click on Upload Image

9. You or your customers select an image from their device

You are then required to create or select an album in which this image is placed. These are saved to the users account

You or your customers select an image from their device

10. Click on Start

Click on Start

11. The image is added to the canvas

You have additional customisation options on the form when the image is selected, for example rotating or repositioning the image within the frame itself.

The image is added to the canvas

12. Remember, you can access additional configuration and user restriction controls by double clicking the field on the canvas and heading to the Details tab. Not ALL settings are shown on the Form Builder tab.

Remember, you can access additional configuration and user restriction controls by double clicking the field on the canvas and heading to the Details tab. Not ALL settings are shown on the Form Builder tab.

13. Click the Menu dropdown

Click the Menu dropdown

14. Click on Save as product default

Remember the save your updated configuration as the product default.

Click on Save as product default

Individual Search Words

imagery, upload, headshot, customization, album, interaction, form, field, configuration, canvas

Alternate Search Phrases

image upload, user photos, add pictures, image configuration, custom image field, form image, upload options, image positioning, interactive form, photo upload feature