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"
}Droplet will reference this object in the workflow using the helper function getSubmittedBy() and will use this information in the platform to track the original submitter of a form. By default, your form will have an Input component for each of these but you can be creative and use other components with these IDs to serve the same purpose.
If the submittedByName or submittedByEmail are missing when you attempt to save your form, you will see a red error message and be unable to save.
All Droplet Form Components
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.
We'll also include some tips from our team of professional form builders. |
|---|
Our team has been building Droplet forms since the beginning so we have a lot of tips and tricks we like to share! |
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 visibility 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
Camel Casing |
|---|
Camel Casing or eliminating spaces between words and capitalizing the first letter of each new word makes your IDs easier to read and copy. It looks like this: phoneNumber, cellPhone, workStreetAddress |
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).
Mask + Guide + Placeholder |
|---|
Mask enforces formatting when the user is typing. You can make this more clear to the user as they type by turning on Guide. To display the formatting requirements before the user enters the field, you can put them in the Placeholder Details. For a phone number placeholder, you may use this: (___)___-____ |
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 use the rich text editor by clicking into the Formatted Text Component and using the controls at the top of the Canvas.
Here you can bold, italicize, underline, change the text type (paragraph or headers), change the font family, change the font size, change the color or highlight, change the alignment, add/remove indentation, add lists, or add links (including pdf links).
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.
| Data collected without Options | Data collected with Options |
| North Elementary School |
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.
Vertical vs Horizontal Options Layout |
|---|
If a checkbox or radio only has a few options, we like to arrange them horizontally instead of vertically. You can toggle between these options in your properties panel. |
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.
Clean True/False Formatting |
|---|
We often use this component with an empty label, or a label with a space in it if you need to align the component properly, and put the prompt in the text instead. You can see this in the example below |
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.
Min Time and Max Time |
|---|
In certain situations, you may need to restrict the options available to your users. The most common Min Time we use with date type Date/Time components is the formula for today so someone can't choose a date before they've submitted the form. To do the same, you would enter the formula: today() into the Min Time logic panel that opens at the top of the canvas. |
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.
Sign and Date! |
|---|
Dates often go alongside signatures and one way to make this automatic for your users is to have a Timestamp component automatically fill in the correct date and time when the signature is completed. Here's how we typically do this: 1. Add a Signature component, set it to 8 columns wide, and remember the Signature component ID. 2. Add a Timestamp component to the same Section and set it to be 4 columns wide. 3. In the Timestamp component, open the Display Logic panel and enter the formula using your Signature component ID: isNotBlank(signatureComponentID) |
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.
You can use the Properties panel to add or remove restrictions to this component |
|---|
If you want to receive only certain file types or limit to files below a certain size, you can add these limits in the Upload Properties panel to the right. This component will only accept one file by default, but you can allow a user to upload multiple files here by toggling on Multiple Files. |
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.
Formatting with Display Logic |
|---|
Sometimes when a component is hidden using display logic, the form layout will change to fill in the space from that missing component. You can use a Spacer component that has opposite display logic so it fills in the component's place in the form layout while the component is hidden. While using Display Logic and Spacer components, it is often easiest to use the Debug tool to preview the form layout. This way you can change the data or the workflow step to see how the layout changes. |
Divider
Long forms benefit from Divider components used to visually break up sections. Dividers can also be used to accent headers and titles.
Do you need to display text or components within a table format? |
|---|
Table components are only used for gathering information from your users so when you need to format other items in a table structure, you can use vertical dividers to help. The image below groups Formatted Text and Single Line Inputs into a Section with a border and includes a vertical divider between the Text component and the Name Input component. |
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.
Use Tiles to hide or display conditionally required questions |
|---|
If your form asks a question on the left that may have a follow-up question on the right depending on the answer, this is a good candidate for using a Tile component. 1. Drop two Tile components on the canvas so they are next to each other in the same Section. 2. Drop your question Component in the left tile and the follow-up question Component in the right tile. 3. Add display logic to the follow-up question Component so it only displays when the proper information is entered in the first question. 4. Format either Tile as you wish. |
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.
Using Group to create reusable content |
|---|
We like to reuse the same header for all forms in an organization or department for consistency. To do this, we create a Group that contains all components in the header and give it an ID we'll recognize. Now we can copy and paste that same block of code from <Group id="header"> to </Group> in the code editor of this form to any new form. |
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 submit a support request.
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.
Sign and Date! |
|---|
Dates often go alongside signatures and one way to make this easier on your users is to have a Timestamp component automatically fill in the correct date and time when the signature is completed. Here's how we typically do this: 1. Add a Signature component, set it to 8 columns wide, and remember the Signature component ID. 2. Add a Timestamp component to the same Section and set it to be 4 columns wide. 3. In the Timestamp component, open the Display Logic panel and enter the formula using your Signature component ID: isNotBlank(signatureComponentID) |
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 a support request 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 visibility, 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 submit a support ticket.
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.
Changing Action Button Text and Creating Different Action Buttons for Different Steps |
|---|
You can change the text for any of these buttons to customize your form and help your users understand the workflow their submission will move through. Using "Send for Rejections" when your form routes back to a previous step in the workflow instead of "Reject" will make this pathway more clear. For more complex forms, you can add multiple Action buttons to one form and use display logic to show or hide them based on certain conditions or which step the form submission is currently on. |
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article