How to Set Form Field Properties

Topics:

This article is a glossary of all form field properties available in the application. Not every option is available for every field type. At the start of each section we'll tell you what field types use this properties option. 

You can open the properties section with a few clicks. 

• Click into Edit Mode. 
• Select your form field.
• Choose the Properties icon

 

We've grouped our properties into the following options. Click ahead to the things you need the most. 

• General Properties
  • Field Name
  • Field Location (XY Coordinates)
  • Field Size
  • Field Formatting (Numbers, %, Etc)
  • Tab Order of all Fields
• Appearance properties
  • Border properties
  • Rotate properties
  • Tooltip properties
  • Background properties
  • Text properties
  • Caption properties
  • Font properties
  • Set/Reset Appearance Default
• Value Properties
  • Read Only
  • No Export
  • Required
  • Value List
  • Limit Value Length
• Form Calculations

 

General Properties

This section will describe properties that impact the form field in a general way. 

You'll learn how to configure the following:

• Field Name
• Field Location (XY Coordinates)
• Field Size
• Field Formatting (Numbers, %, Etc)
• Tab Order of all Fields

 

Field Name

This is the field name. Be sure to use periods "." instead of spaces in the name. 

• Open the General Properties tab. 
• Click next to Name. 
• Type the new name into the box.
• Hit the Enter key or click outside the box to confirm your choice.

Field Location (XY Coordinates)

Every form field on your document has a specific XY coordinate that reflects it's location. These coordinates will match the unit of measurement for your page size. 

You can enter any XY coordinate and move the field to an exact location.

• Open the General Properties tab. 
• Click next to X Position or Y Position. 
• Type the new number into the box.
• Hit the Enter key or click outside the box to confirm your choice.

 

 

Field size

The best way to make sure your fields are exactly the same size is to set the size through the properties tab. Once you've placed the first field, you can verify it's size by checking the Width and Height.

You can then apply these same dimension to any field. 

• Open the General Properties tab. 
• Click next to Height or Width. 
• Type the new number into the box.
• Hit the Enter key or click outside the box to confirm your choice.

 

 

Field Formatting (Numbers, %, Etc)

This option is only available for Text Fields and Combo Boxes (Dropdowns).

With field formatting you can add special restrictions to your field, like forcing that field to represent a % or a date. 

Each of these options is found in the Format Tab:

 

 

You can set up the following options:

• Number - Only numbers can be entered, you can configure the specific formatting.
• Percentage - Any number entered into this field will become a %. 
• Date - This field will only display dates in your chosen format.
• Time - This field will only display time figures in your chosen format. 
• Special - Additional formatting options.

We'll explain each option. You'll be able to pick between available options in the dropdown next to Category. 

 

 

Number

• Choose Number next to Category.
• Set the number of Decimal places after 0 that should be visible.
• You can pick between punctuation options for number seperations next to Separator Style.
• When dealing with money you can choose a Currency Symbol.
  • When you do, you can choose the Symbol Location placing it before or after the number.

 

 

Percentage

• Choose Percentage next to Category.
• Set the number of Decimal places after 0 that should be visible.
• You can pick between punctuation options for number seperations next to Separator Style.

 

 

Date

• Choose Date next to Category.
• Pick from the available formats next to Date. 

 

 

The date must be entered in the specific format you chose. However anyone filling out a form will see a date selector:

 

 

Time 

• Choose Time next to Category.
• Pick from the available formats next to Date. 

 

 

Special

• Choose Special next to Category.
• Pick from the available formats next to Special.
  • We offer some preset options but you can create your own Arbitrary Mask here.

 

 

You can also run a JavasScript command when a user interacts with your field.

• Choose Custom next to Category.
• You can add a Format Script or Keystroke Script by clicking on Run a Javascript next to either.

 

 

• Enter your JavaScript command into the window that opens. 
  • We don't offer support on JavaScript commands, but you can click here for more information. 

 

Tab order of all fields

This feature lets you decide the squence of active fields when a user chooses to cycle between them using the Tab Key.

 

Step 1 - Access Set Tab Order Tool

• Open the Forms Tab.
• Click on Set Tab Order.

 

 

Step 2 - Choose to Automatically or Manually set tab order

You can choose to have Soda PDF automatically decide the best tab order. Choosing this option will show the updated tab order immediately and you are done!

When you choose to manually set the tab order, you'll tell Soda PDF the correct flow. 

Choose from one of the following options in the popup:

• Choose Yes to set the tab order manually.
• Choose No to set the tab automatically.

 

 

Step 3 - Set the tab order

• Click on each form field in the new order. 
  • The numbers will update to reflect the new order.

 

 

 

Appearance Properties 

You'll find each appearance setting in the Appearance Tab.

 

 

In this section we'll explore how to configure each available option. Please keep in mind certain settings will apply to only specific form field types. 

Click on one of the links below to jump ahead:

Genereal Appearance Settings - Shared by all field types

• Border
• Rotate
• Tooltip
• Background 

 

Text Box/Combo Box (Dropdown)/List Box/Push Button Only

• Text 
• Font

 

Push Button Only/Radio Button/Check Box

• Caption/Symbol

 

Border:

There are a few options available to make sure the field border matches your document.

 

Set border width 

• Click the number next to Width. 
• Increase the number to make it thicker, you can hide the border by setting it to 0.
• Hit the Enter key or click anywhere in your document to finalize.

 

Choose border style

You can update the style, or pattern, of the border of the form field. 

• Click the option next to Style. 
• Choose a new one from the list.

 

Choose border color

• Click the box next to Color.
• Click on the color you want to use.
  • Click here for more information about custom colors.

  

Change the highlighting

This option impacts what happens when a user interacts with a form field. As an example choosing Invert will invert any colors as the field is selected:

• Click the dropdown next to Highlight. 
• Choose an option the list.

Rotate

• Click next to Rotate
• Choose a rotation option from the list. 

 

Tooltip

When a user hovers their mouse over the field you will see your tip appear.

 

 

• Click next to Tooltip.
• Type your tip into the box.
• Press the Enter key to confirm.

 

You can easily verify your tooltip is configured properly:

• Click on the View button.
• Hover your mouse over the form field.

Background

• Click the box next to Color.
• Click on the color you want to use.
  • Click here for more information about custom colors.

 

Text:

These are features that impact any text related to your form fields. Whether it's the value options in a dropdown menu or the text a user enters into your field. 

 

Text Alignment

• Click next to Text Alignment. 
• Choose one from the list.

Multiline - Text Field Only

By default, text fields will only allow a user to enter a single line of text. If you want your form recipient to add paragraphs, you need to enable multiline. 

•  Toggle the switch next to Multiline.

 

Password Mode

This feature will hide anything entered in the text field, showing stars instead of the characters they enter. 

• Toggle the switch next to Password.

 

  

Font:

These font settings can be set for Text Fields, Combo Boxes (Dropdown Menus) and List Boxes. 

 

Change font

• Click the box next to Type.
• Choose the font you want from the list. 

 

 

Changing font size

• Click the box next to Size.
• Type a new size into the box. 

 

 

Changing font color

• Click the box next to Font Color.
• Choose the font color you want.
• Click on the color you want to use.
  • Click here for more information about custom colors.

 

 

Changing font styling

You can apply Bold or Italics to the text. 

• Click the box next to Font Modifier.
• Choose the option you want from the list.

 

 

 

Caption/Symbol

There is a caption option available for Push Buttons/Check Boxes and this updates the icon you see when a user selects the field. There is also a caption option available for Push Buttons which updates the text on the button. 

You are also able to change the size and color of this caption. 

 

Change Push Buttons/Check Boxes 

• Click the dropdown next to Caption.
• Choose one from the list.

 

 

 

Update Push Button text

• Click next to Caption.
• Type the new caption into the box.
• Hit the Enter key to confirm your choice.

 

Change caption/symbol color

• Click the box next to Font Color.
• Choose the font color you want.
• Click on the color you want to use.
  • Click here for more information about custom colors.

 

 

 

Change caption/symbol size

This will change the size of the symbol in a check box or radio button. It will change the size of the font in a Push Button. 

 

 

Set/Reset Appeareance Default

Once you make any changes to a form field's appearance, you can set the new appearance as default. This default will only be set for that specific field type.

If you set the appearance of a Radio Button, you will not see those changes made to a Check Box.

These defaults will stay in effect when you add these fields to a any PDF document. 

 

Set as default

You need to make a change before you will be able to choose this option. 

• Click SET AS DEFAULT.

 

Reset default

Resetting a default will reset any appearance changes back to Soda PDF's default settings. 

• Select any field. 
• Open the properties 
• Click RESET DEFAULT

 

Values

Depending on the form type you use, you'll encounter different value setting options. 

 

 

Here is a breakdown of each value setting:

• Read Only
• No Export
• Required
• Value List
• Limit Value Length

 

Read Only 

This option applies to all properties. This option prevents any changes to the value in the form field. 

• Toggle the switch next to Read Only.

 

 

No export

This setting applies to all form field types. This option prevents the form data from being extracted from this document.

• Toggle the switch next to No Export.

 

 

Required

This setting applies to all form field types except Push Buttons. This option requires the user to fill out this form field before they can save the document. 

• Toggle the switch next to Required.

 

 

Value List

This setting is for Combo Boxes (Dropdown Menus) and List Boxes. You can set the values your users can choose between.

 

Step 1 - Open Value List Tool

There are 2 ways to open the tool. The first is in the Values Tab:

• Click on Set next to Options. 

 

 

The other option:

• Right-click on the form field.
• Choose Edit Value List. 

 

 

Step 2 - Add Values

You can add values to the list for your users. You can add the public facing Name and customize the behind the scenes Value name. 

• Click ADD.
• Type your value name.
• Click anywhere else to confirm.
• Repeat until all values are added. 

 

 

Step 3 - Edit Public Name and Value Name

The Name column is what your user will see. Under Value you can set a different value name for data purposes. 

• Double-click on the name you want to update.
• Type into the box.
• Click anywhere else to confirm.

 

 

Step 4 - Confirm new value list

• Click OK to confirm your new list. 

 

 

Bonus Step - Deleting a value

• Select a value
• Click on the X.

 

 

 

Bonus Step - Editable Value

If you are working with a Combo Box (Dropdown Menu) you can provide users the option to edit dropdown entries, adding their own.

• Toggle the switch next to Editable.

 

 

Limit Value Length

While working with text fields you can limit the number of characters that can be entered into the field. 

• Click in the box next to Length Limit.
• Enter the character limit.
• Click anywhere else to confirm. 

 

 

Form Calculations

You can set up Text Fields and Combo Boxes (Dropdown Menus) to perform math calculations. These are found in the Calculations Tab.

 

 

We recommend configuring these fields with relevant number settings first. You can choose between:

• Quick Calculations
• Advanced Calculations

 

Quick Calculations

Step 1 - Choose the calculation result field

You will need to choose the field where the calculation results will appear.

 

Step 2 - Choose math operation

• Choose predefined next to Category.
• Next to Predefined choose one of the following options
  • You can divide and subtract in the Advanced Calculations section:

 

 

Step 3 - Choose the fields involved in the calculations

• Click Select next to Fields.
• Choose the fields.
• Click OK.

 

 

Advanced Calculations

You can write out your own equations with advanced calculations. You can also use a script. 

 

Write out your own equations

Please adhere to the order of operations as you create equations.

• Choose Simplified field notation next to Category.
• A box will open where you can enter your math equation.
  • Enter each field name (make sure all capitalization matches) and separate the field names with the correct math symbol.
  • As an example: to perform division it would be field1/field 2.
  • Another example can set it up like field1/field2+field3*field4 and in this case it will add the product of field 3 & 4 with the results of dividing field 1 by field 2.
• Click OK to confirm.

 

 

Use a script

You can use JavaScript to perform more complex equations. 

1. Choose Custom calculation script.
2. Click Set next to Script.
3. Enter your code.
4. Click OK.