What types of Components can I use to Build Forms?

Stylistically, the horizontal space of a Droplet form layout is broken up into 12 columns. Therefore, each component can be up to 12 columns in width or you can have multiple components across one row (called a Section). There are a variety of fields or components that you can use to build a Droplet form. This will allow you to choose the ideal way for your form to collect or display data. 

Required Form Layout Components

"submitedBy":{
"name":"Submitter Name", 
"email":"submitter@email.com"
}

There are four types of Droplet form components. 

• Interactive Components - allow the user to enter information or press a button to submit or reject.
• Layout Components - provide structure and formatting for your form.
• Advanced Components - more complex and customizable form components that may involve writing code. 

This article will list every available component and an example of how it could be used. If you are looking for a particular component, you can use the table of contents to the right to navigate quickly. 

You may want to reference these additional articles to add complexity to your components by applying display logic to them so they hide or show to the user under certain conditions or validation logic to ensure the field is completed a certain way.

Interactive Components

Interactive Components allow the person filling out this form to interact with the form submission by entering information or submitting/rejecting it. 

All Interactive Components require an ID. This ID is used to reference the component throughout the layout and in the step permissions configuration. All components will automatically be assigned an ID when you create your form using the PDF creator or drag the component onto the canvas. We recommend replacing this default ID with a more descriptive ID that better matches the component so you can easily recognize it across the layout and workflow of your form. 

Rules for ID naming:

• Can only include letters, numbers, and underscore characters
• Cannot begin with a number

Input

Input components are our most commonly used form field. These can be Single Line components to collect a small amount of information from the user such as a name, phone number, street address, etc., or Multi-Line components when you need the user to provide more information.

Single Line Input components have some additional settings in the Properties panel that allow you to put formatting guardrails on the information the user enters. The Type setting lets you dictate whether the user can enter Text, Numbers, or an Email address.

If you choose Text as the Type, you can make the additional choice of using a Mask. Masks set additional formatting requirements so you can ensure the user enters the correct number of characters. 

You can choose Custom from the Mask dropdown to set custom formatting requirements for this Input if you are familiar with RegEx (learn more or reference a RegEx cheat sheet here). 

Formatted Text

Text components are for any text you need to add to the page that isn't connected to a form field. This might be paragraphs of informational text, links, policies, or section titles. 

For longer text blocks or for more precise formatting, you can open the HTML Text Editor to make your changes. 

Crash course in HTML Text Markup

HTML works by wrapping content in opening <> and closing tags </>. 

The whole Text component will be wrapped in opening and closing Text tags like this:

<Text>


</Text>

Within these Text tags, you can use various HTML markup elements like these:

<p>Everything between paragraph tags will be a single paragraph.</p>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<b>Bold text</b>
<em>Italicized text</em>
<u>Underlined text</u>
<a href="insert URL here" target="_blank"><span style={{ color: "#056bff" }}><u>Blue, underlined clickable link</u></span></a>
<ul>Unordered list
   <li>List Item</li>
   <li>List Item</li>
</ul>
<ol>Ordered list
   <li>List Item 1</li>
   <li>List Item 2</li>
</ol>


 Line break

If you would like a more in-depth course on HTML you can use this resource.

Select From Options using Radio, Checkboxes, or Dropdowns

Allowing the user to select from a list of predefined options helps to keep the data you collect from your form clean and consistent. 

There are three Droplet form components that allow you to define options for the user:

Radio Buttons for when you want the user to only select a single choice

Checkboxes for when you want the user to select one or more of the options

Dropdowns for when you want the user to select one or more items from a long list of options

Creating Options

You can create the options for these components in three ways:

List

Using a list is going to be the most straightforward way to create options in your component. You can add or remove items from your list and update the text to the options you need. 

Logic

If your list of items comes from a dataset or data from another field, you can write an expression to reference the dataset or component ID using Javascript. You can learn more about how to connect and use your Dataset here but you will likely be using an expression similar to the one below to access the dataset keys. 

Object.keys(datasetName).sort()

Key Value

Keys and Values are paired together here which will allow you to reference the Key instead of the Value elsewhere in the form. This is a useful option type if the values associated with your options are longer phrases. 

True/False

A True/False component asks the user to indicate whether something is true or false. This type of field works well for yes/no questions. 

Table

Table components allow users to enter a lot of information at once and keep it all organized. You can build a table with as many columns as you need and resize them to fit nicely across the page. All Tables will have a width of 12 columns. If enabled, your users will be able to add and remove rows to change the table height. 

Columns can be turned into checkboxes, date/time pickers, dropdowns, fixed values, or formulas that compute across the row. You can set different formatting by column as well if you need one to stand out more than others. 

There are many use cases for Tables including lists of volunteers or meeting attendees, displaying information, sharing work history, or completing timesheets. 

Date/Time

When you add a Date/Time component to your form, your users will be able to select from a date or time picker rather than using an uncontrolled field and hoping the user enters their date or time in the correct format. 

You can choose whether the field gathers date and time, date, month, or just time by changing the Type in the Property Panel. If you choose a type that includes the time, you can also select the interval for the options in minutes. 

Signature

Signatures are a special type of component that opens a place for the user to sign when the field is entered. 

The field will be formatted as an electronic signature when the signature is adopted.

File Upload

File upload components allow your users to share files that will stay attached to their form submission. Anyone who opens the submission will be able to open the file(s) or download them with the submission from the Droplet application. 

Layout Components

Layout components are non-interactive but improve the look and function of your form. Many of these components can be used to group components and apply display logic to ensure the form is showing the correct information or applicable fields at each workflow step.

Spacer

Spacer components do exactly what they sound like - give your other components a little bit of space! You can use them to move components further to the right of a Section, Group, or Tile using the column width setting in the properties panel of the Spacer component. 

Divider

Long forms benefit from Divider components used to visually break up sections. Dividers can also be used to accent headers and titles. 

Image

Using your logo at the top of your form will help your users know they are in the correct place. You can drag the Image component where you want your logo to be and use the Source upload button in the Properties panel to upload the image you would like to use. You can adjust the size of this image and the number of columns it occupies until it looks the way you want it to. 

Section

You will notice a new Section is added to the canvas each time you add a new component to the canvas. You can also add a new Section from the component library. 

The Section component holds all of the components in a single row and is always 12 columns wide, no matter the total width of the components it contains. You can have a Section that is 12 columns wide that holds an Input that is 4 columns wide. The extra 8 columns of width will be empty on the right side of the Section. If the total width of components inside a Section is greater than 12, the components will wrap and start to fill another row.

Section components can be formatted and display logic can be applied in the Properties panel. 

Tile

You can use Tile components to group and format items on your canvas. Tiles can be less than 12 columns so they are useful within Sections to help keep components aligned and can be used to format certain parts of your form with background colors or borders. 

Group

Group components are useful when you want to have multiple rows or Sections grouped together to enact display logic on the whole Group at the same time but you don't need to do any formatting. There aren't any formatting options for Group components so they are simply used for setting Display logic. 

To use a Group component, you can drag it to the canvas in between Sections. Then drag any Sections or individual components you want in the Group. 

Page

Page components work in sync with Actions components to allow the user to navigate through pages of content in a single form. Each time the user clicks Next or Back to move to a new page, all components inside the current page will validate. When the user gets to the final page, they will be able to submit the form. 

All components not contained in a page component will display on all pages, which works really well for headers or any text that should always show. 

PDF Page Break

We know sometimes forms still need to be printed. PDF Page Break components will help break your form up into pages when you print from your browser or you download submissions to this form as a PDF using the Droplet platform. PDF Page Break will not have any impact on the form layout on the web. 

Advanced Components

Language Selector

If you need to make this form available in other languages, the Language Selector component will allow the user to use a Dropdown to select between the languages you've made available. When they select a new language, the form will translate all components you've created Translations for in the Translations code editor. If you need assistance with this, please send us an email. 

Timestamp

Timestamp components will automatically add the date and time that the component was loaded into the form page. This can be used to identify the date and time the form was started or to display the date and time a form was signed. 

PDF Stamp

There are some forms that need to be submitted on the original pdf layout. This is often the case with government forms and some insurance registration forms. The PDF Stamp component will gather all of the information collected with the Droplet form and create a "stamped" version of the original pdf. This stamped PDF will stay attached to the submission and can be opened from the submission or downloaded with the submission from the Droplet platform.

Our professional services team will need to help set up your Stamped component after you finish building your form layout. You can add the Stamp component where you want it to be on your form, format it how you wish, and add "TBD" to the Template Property. Then send us an email with an attachment of the PDF you would like the information to be stamped onto. We'll complete the setup and let you know when it is ready for testing.

Identifier

Identifier components are useful when a ticket or invoice number needs to be automatically created and incremented for each new form submission. The Identifier is what creates and stores this number. The Identifier will continue counting with every new submission to this form if you select Automatic or with every button click otherwise. 

If you need to reset the Identifier or if you need to fit into a certain pattern (Example: 2023FIN-1000), you can adjust it from the Droplet application's Form page by opening the three dots menu on the form card in the "Next Sequence ID" setting.

Computed

Computed components are powerful form elements that allow you to write a formula to create or find information from Datasets using data from this form submission. You will use the Formula button in the Properties panel to enter the Javascript code you would like this component to run. There are some helper functions for functions we use frequently listed below and if you need to use data from another component, you can reference it using its ID. 

sum(...args)
subtract(a, b, fallback)
multiply(a, b, fallback)
divide(a, b, fallback)
concat(a, b, separator, fallback)
padStart()
padEnd()
today()
addDays(days, fromDate)
getSubmissionId()

Table Helper Functions:
   Number(sum(columnId))
   getCell()

Functions to more easily deal with dollar signs:
   toCurrency(number) => string
   fromCurrency(string) => number

Functions to access workflow information:
   currentStep() => string of current step name
   getAssignedTo() => object of current assignee's name and email address
   getSubmittedBy() => object of submission initiator's name and email address

Ternary Operator: 
condition ? expressionIfTrue : expressionIfFalse

Strict Equality: ===
Strict Inequality: !==
Logical Or: ||
Logical And: &&

Template Literals for String Concatenation:
`${string1} `+`${string2}`

Computed fields are often hidden over the course of the whole submission lifecycle by entering "false" into the Display Logic field. This allows the formula to run in the background and return the information without displaying it to the person filling out the form. This information may be used in other locations in the layout, to determine workflow routing or assignments, or be used in notification email text.

If the Computed field is returning information the user should see and it isn't hidden by display logic or in the step permissions, it will populate when the formula runs. If the formula is blank or false when the form loads because it depends on another field, you can set it to display when that field is true by entering the component ID in the Display Logic field. 

If you have questions about formulas for your computed fields or referencing your datasets in your computed fields, please send us an email. 

Custom HTML

Custom HTML components hold raw HTML that isn't text. We typically use them to insert iFrames into a form and use the code snippet provided by the element or webpage we are using in the iFrame. This works especially well to embed videos. 

Any content inserted with an Custom HTML component will not display when a form submission is exported to a PDF or printed. If you would like to insert text formatted with markup, you can use the Formatted Text component. 

Action Buttons

Action buttons allow the user to move a form submission to the next person or step of the workflow. The route the form takes when a button is pressed is outlined in the Workflow part of the form. Pressing an Action button connects to the predefined workflow and moves the form submission. 

Because the workflow pathway is fully customizable, the pathway the submission will take when pressing an Action button will vary and you can also change the button text to match the workflow.

Generally, Submit buttons move the submission forward in the workflow and eventually lead the form to a "Completed" status in the Droplet platform. All forms must have a Submit button to function properly.

Reject buttons generally will immediately move the form to a "Rejected" status in the Droplet platform. Reject buttons are not required, especially if a form does not need to be rejected at any point in the workflow and Reject is not available for use in the first step of a form. Oftentimes, forms will co-opt the Reject button to create a pathway to send a submission back for corrections. If you would like to set up this type of routing for your form, you can follow the steps here. 

Other available Action buttons are:

• Save: Allows the user to save their work. If they are not logged in, they will be prompted to enter their name and email address and will receive a link to continue working on their submission when they are ready. Any data that is saved in the submission will be considered private and not accessible by anyone else in the Droplet platform until the submission is submitted. 
• Next and Back: If you are using Pages, you can use the Next and Back buttons to navigate through the pages. Fields on one page will need to be completed and valid before someone can move to the next page. On the last page, the Submit button will display instead of the Next button.