Ch. 041 Field Designer - Tech Preview Mode

EDOCBUILDER > eDocBuilder Documentation Manual & Videos

Field Designer

A Tech Preview for eDocBuilder

Overview


In this article, you'll learn:
 
 

What is the Field Designer?


 
In eDocBuilder, the Field Designer is an interface that allows you to edit new and existing templates in a way that's closer to how your customers interact with them on your website.  The Field Designer also lets you create new templates from scratch, without using Adobe Acrobat Form Fields or InDesign.
 
Because this feature is a "tech preview", it won't allow you to do everything you can currently do on the Field Setup page, but it will allow you to do many things, and is in the process of being updated to add more and more features.
 
Features that are planned for future updates to the Field Designer will show up in the interface but will be grayed out when you try to interact with them.
 
 

Creating New Templates


 
You might be familiar with previous ways of creating a template in eDocBuilder, which often required a pre-created form such as a PDF, or required you to create your fields in a program such as InDesign that you then imported into eDocBuilder.
 
However, now that the Field Designer has been implemented, you no longer need to do that, and can create a template entirely from scratch in eDocBuilder.
 

Templates Tab

 
To create a new template, go to the Template tab (if you're not there already), and look for Create a Template.  As seen in the image above, Create a Template is located directly below the row of tabs at the top of the page.
 
Select Form or Interactive, and enter a template name, and click create.
 

Create a Template

 

Form or Interactive?

Form templates allow you to use Response Sets, and they also allow you to use barcode fields in your template. Read more about Response Sets here.
 
Interactive templates do not allow you to use Response Sets, or add barcode fields, but they do allow you to configure ways for your customer to interact with the template which aren't possible for Form templates.
 
 

Setting Template Size and Number of Pages

 
After you click create, the page should look something like the below:
 

Template Assets Page

 
Because many people import PDF forms to base their templates on, the page defaults to the Upload PDF tab.
 
If you're creating from scratch, you need to click on the From Scratch tab instead. It will load a page like this:
 

Template Assets, Creating from Scratch

 
Before you leave this page, you need to set the number of pages for your template, and you need to set the page width and page height.
 
By default, the unit of measurement for the page width and height may be something other than what you need. In that case, look in the upper right of the page for this box:
 

Default Unit Selection

 
It will allow you to change the units your template is in.
 
The unit you have selected for your template also affects what measurement the rulers show when you are moving fields around on your template using drag-and-drop.
 
Here's a breakdown of how specific units of measurement affects the display of rulers:
 
Unit of Measure Ruler View
Points
Points
Inches
Inches
Feet
Inches
Microns
Centimeters
Mm (Millimeters)
Centimeters
Cm (Centimeters) Centimeters
M (Meters) Centimeters
 
Once you have set your number of pages, and the page width and height, and your units of measurement, make sure to click Save & Commit!
 
 

Adding Assets to a Template (Fonts and Images)


Before any fonts or image assets are available for you to use in the Field Designer, you need to select or add them on the Assets page of your template.
 
If you're not already on this page, click on Assets in the navigation bar on the upper right:
 

Editing a Template, Navigation Bar

 
You'll be brought back to the page that looks like this:
 

Template Assets Page

 
Once here, you can select or even upload the fonts, background images, and other images you will need to create your template. For an in-depth look at these options, please see these other sections of the eDocBuilder manual:
 
 
 
 

Navigating the Field Designer Interface


 

The Field Designer Page

 
The Field Designer page is roughly made up of four sections:
 
  • Far left: Menus to copy/paste/undo/redo, menus to adjust the ruler and guides for the center section, and a list of all fields currently in your template. Note that the Fields and Form tabs show you different configuration options!
  • Far right: Buttons to save and view your work, as well as a pane that displays specific configuration options for the current selected field.
  • Center: Graphical template view. Use this to drag and drop elements, rotate them, and resize them.
  • Bottom: Pagination, and gallery of image assets you can drag and drop onto your template.
 
The next sections will explain how to use these areas to complete common tasks.
 
 

Using Grids, Rulers, and Snapping


 
The Field Designer has a few settings you can utilize under View that will allow you to turn rulers and guides on and off, and also set the behavior of snapping when you drag a field to relocate it. See the image below:
 

The View Menu

 
  • Fullscreen: Puts your internet browser in fullscreen mode so you can utilize more screen space when working.
  • Snap to Fields: Causes fields to snap into alignment with other fields.
  • Snap to Guides: Causes fields to snap into alignment with blue vertical or horizontal guides you set.
  • Snap to Grid: Causes fields to snap to the grid.
  • Show Rulers: Turns rulers on the top and left on or off.
  • Show Guides: Shows or hides blue vertical or horizontal guides you set.
  • Show Grid: Shows or hides the grid overlay.
  • Show Bleed: Shows or hides bleed.
  • Highlight All Fields: Highlights all fields in yellow so you can see them even if they're empty or transparent.
  • Show Tooltips: Turns tooltips on or off.
  • High Resolution: Turns high resolution images on or off as you edit your template.
 
When snapping is on, when you drag a field, you'll see it jump around to snap to the closest element appropriate for the type of snapping that you enabled. For example, if you have Snap to Fields turned on, and start to move one of your fields, it'll jump to align with another field if you move it close.
 

Setting Blue Vertical and Horizontal Guides

 
To set a vertical or horizontal guide line, simply click on one of the rulers, and drag your mouse onto your template. A blue line will appear, and you can drag this guide to wherever it needs to be on the template. You can have one vertical and one horizontal guide at a time. See the image below for an example:
 

Blue Guide Lines

 
 

Units of Measurement and the Ruler

 
If you created your template from scratch, you probably already set the Units of Measurement for your template, using the box in the upper right corner next to log out.
 

Default Unit Selection

 
However, the Units of Measurement also affect the display of the ruler, by telling it what unit the ruler should show up in.
 
Below is a chart showing how specific Units of Measurement change the units the ruler is shown in. If you are in the Field Designer, you can change this setting without navigating away from the Field Designer or losing your work.
 
Unit of Measure Ruler View
Points
Points
Inches
Inches
Feet
Inches
Microns
Centimeters
Mm (Millimeters)
Centimeters
Cm (Centimeters) Centimeters
M (Meters) Centimeters
 
 
 

Adding Text, Image, Shape, and Non-Printable Fields via the Field Designer


 
To create a new field for your template, use the Insert menu.
 

Insert Menu Options

 
Currently, if you are working with a Form template, there are five types of fields you can insert:
  • Image
  • Text
  • Barcode
  • NonPrintable
  • Shape
 
When you click one of these options, a blank field of the type you choose will be inserted into your template.
 
From there, you can resize it, rotate it, and move it around on your template by hovering your mouse over it in the center section, and clicking when your cursor changes.
 
If you are working with an Interactive template, your options under Insert may be different. For example, the Barcode field type is not available for Interactive templates.
 

Non-Printable Fields

Non-Printable Fields indicate to your customer that they cannot add any images or text to a particular area of the template.
 
A field that is set as non-printable will never print on the production file or display in the preview, and prevents the customer from adding any images or text in that area.
 
 
By default, a NonPrintable field is grey with a crossed-out printer icon.
 
 
 
Once you add a NonPrintable field in the Field Designer, you can also assign an image by selecting an image that you previously added to your template assets.
 

Editing a Field's General, Layout, and Style Attributes

 
When you click on a given field in the center or in the list on the far left, the far right column will change to display attributes you can customize for that particular field.
 
Below is an example of how the three different tabs (General, Layout, and Style) for a Text field look.
 

Example of General, Layout, and Style tabs for a Text Field

 
Template Fields in eDocBuilder work largely the same way regardless of if you use the new Field Designer, or the conventional Field Setup page to configure them.
 
Therefore, you can consult other chapters in this manual for detailed information on configuring field settings.
 
See the following eDocBuilder manual chapters to get started:
 
 
 
 
 

Selecting Multiple Fields to Align, Duplicate, or Delete


 
In Pressero's Field Designer, you can align and distribute multiple fields. To select multiple fields hold down the CTRL (PC) or Command (Mac) key and click on each field you want to align or distribute.
 

Aligning Fields

 
Once you have multiple fields selected, you can look at the far right for a menu that allows you to align and distribute the selected fields.
 
 
The first three icons allow you to left-align, center-align, and right-align all selected fields.
 
The middle three icons allow you to align all selected fields to the bottom, center, or top.
 
Finally, the last two icons allow you to distribute all selected fields vertically, or horizontally.
 

Duplicating Multiple Fields

 
First, make sure you’re on the Fields tab in the Field Designer. Then select the fields while holding down the CTRL or Command keys. At the top of the Fields tab, you will see a counter telling you how many fields you have selected, and a white button that will say Duplicate if you hover your mouse over it.
 
 
Click that, and a series of boxes will pop up where you can name the field, set the prompt, and set the tooltip.
 
After that, click Create to move onto the next.
 
There will be one box to fill out for each field!
 

Deleting Multiple Fields

Want to get rid of several fields, fast?  While on the Fields tab in the Field Designer, hold down CTRL or Command keys and click all the fields you want to remove, then click the red Delete button.
 
 
(And if you delete fields by mistake, hit the Undo button to bring them back!)
 

Interactive Designer Templates: Aligning and Distributing Fields as a Customer

End Users can also use Distribute and Align when customizing an Interactive Designer template.
 
You can preview this yourself by clicking on the magnifying glass icon for an Interactive Designer template, or by clicking Test Template if you’re already editing it in the Field Designer.
 
 
To select multiple fields on Windows, hold down CTRL and click on all fields you want to select. On Macs, hold down Command and click on your fields.
 
Then use the drop-down menu from the top to align or distribute your selected fields, as in the animation above.
 
 
 
 

Setting Field Prompts, Size, Tooltips, Entry Blocks, and the "Required?" Flag


 
After you have inserted a field, you may notice the left side of the page is divided into two tabs: Fields and Form.
 
 
Click on the Form tab. Here you can set the following:
 
  • Prompt: The question the customer sees that tells them what to enter, such as First Name or Email Address.
  • Size: The width of the field the customer sees when entering data into it (Form Templates only)
  • Tooltip: Additional information about the field that the customer sees when hovering their mouse over the blue question mark symbol for the field.
  • Required: Allows you set a field as "Required" so a customer MUST fill it out before proceeding. Also adds a red asterisk to the field.
  • Character Limit: For text fields, allows you to set a maximum text length for a field. Also, if you are using Entry Blocks, allows you to make a particular field larger or smaller visually, so they can appear side-by-side.
  • Display Character Counter: For larger text fields, shows a customer how many characters they have left after beginning to enter text.
  • Field Order: By dragging and dropping a field, you can change the order the customer sees the field in when they enter data.
 
 

 

 

Field Width (Form Templates only)

If you click on a field, you will have an option to set the width by percentage, both if the field is in an Entry Block, and also if it's not included in an Entry Block.
 
This option isn't available for Interactive Designer templates.
 

Entry Blocks

 
The Form tab also allows you to click on check marks for individual fields so that you can select and assign them to an EntryBlock.
 
You might use this, for example, when you have three name-related fields (Title, First Name, Last Name) and want to associate them together. Or if you have a large template spanning multiple pages, it may be useful to use Entry Blocks to group fields that "belong" to one page, so they are easier for you and customers to navigate.
 
For Form templates, you can also adjust the widths of fields placed into an Entry Block.
 

Form Template Entry Blocks

 
To create an Entry Block, go to the Form tab, and click on or hover over one of the fields you want to add to an EntryBlock grouping. You'll see a check box appear at the top of the field; click it to select the field. Then, go to the next field you need to have in your Entry Block, and click the check for that one as well, until you have all of the fields you need selected.
 
Once you have selected all your fields, look at the top of the column for the button that says + Entry Block and click it.
 
 
The fields you selected will be grouped together, and as in the example image below, a new box will appear that will let you name the Entry Block, and also add directions for it, so your customers are given more information on how to fill out the fields appropriately.
 
 
If you need to add additional fields to an existing Entry Block later, there are two ways. You can click the check mark on all the fields you need added, then scroll down to find the existing Entry Block you need to add them to. In the upper right of that Entry Block, there is a blue icon you can click to add the fields you have currently selected to that Entry Block.
 
Alternately, you can drag and drop fields into (and out of) the Entry Block.
 
When working with an Entry Block, you can also adjust the width of the field, so they can line up side-by-side.  This can be done by using the character count (a smaller character count will make a smaller field, to a minimum of 25% of the width), or you can use the width option drop-down. You might set a phone number field to be smaller, and the Ext field to be larger (but not 100%), and when these fields are in a group together, they will be shown side-by-side instead of one above the other.
 
If you need to remove an Entry Block, find the Entry Block on the Form tab, and click the red icon in the upper right corner. This will remove ALL fields assigned to that Entry Block.
 

Interactive Template Entry Blocks

 
Entry Blocks in an Interactive Template work similarly as in Form Templates, but you don't have the option to change the sizes.  To create an Entry Block, go to the Form tab and hover your mouse over a field and check it. After you've checked several fields, you can click the + Entry Block button to create it, as in the animation below, and then give it a name.
 
 
 
 
 
 

Using the Form Tab on the Field Designer to Change Field Display Order


 
If you select the Form tab on the left hand side, you will see the fields in the order in which a customer will see them when they are entering the information you're asking for.
 
Using a Form Template
 
This area allows you to drag, drop, and resize Form Template fields. You can also resize fields so they display beside each other no matter if they’re located within Entry Blocks or not. You can even add or remove fields from an entry block using drag-and-drop.
 
 
If you are using Entry Blocks, there’s also an option to force smaller fields to be on separate lines, instead of next to one another. This is exclusive to fields that are grouped in an Entry Block. See the animation below.
 
 

Using an Interactive Designer Template

 
You won't have all the same abilities to resize the fields when working with an Interactive Designer template, but you can still drag and drop them.
 
 
 
 
 

Using the Field Designer to Place, Position, and Rotate Fields


 
In the center section of the Field Designer, you can use your mouse to resize, rotate, and move fields. Below is an animated image demonstrating how the mouse cursor changes when you hover over various parts of a field.
 
 
Breakdown of the mouse cursor icons:
 
  • 4-way cross: Lets you drag and drop the entire field to somewhere else on the template.
  • 2-way arrow: Lets you resize the field, depending which side or corner you drag from. Using it on a corner will resize the field both horizontally and vertically, while using it on just the top/bottom or left/right sides will only resize vertically or horizontally.
  • Hand icon: Lets you rotate the entire image.
 
When you drag a field on a template, it will snap into alignment with other fields or with grid lines if you have gone to View and have turned the snapping options on.
 
Remember to save your work!
 
 
 
 

Previewing a Template From a Customer Perspective


 
In the upper right-hand corner of the page, there is a button to Save & Publish, and above it, a button labeled Test Template, which will open in a new window. The button looks something like the image below:
 
 
When you use it, it will allow you to preview your template, so you can see how the Prompts and the Default text will look to a customer who is filling out the template. It allows you to test filling out the form yourself, and also check that fields you've marked as required are being marked required.
 
The Test Template feature uses the version of the template you last saved, so be sure to hit Save & Publish before testing the template, otherwise you may not see all of your most recent changes reflected on the page.
 
 
Above is an example of what you might see using the Test Template.
 
On the left, you will be able to fill out your fields like a customer would.
 
Use the green-outlined Update Preview button on the bottom of the screen to update the template preview on the right with whatever you enter as a "customer".