Build Forms

TABLE OF CONTENTS

• How to Upload and Insert an Image onto a Formstack Form
• How to add a Hyperlink to your Form
• Hyperlink text or Hyperlink images
• Hyperlink images
• Manage hyperlinked items
• How to Show-Hide Multiple Sections Using Conditional Logic
• How to Show-Hide Multiple Sections Using Conditional Logic
• Undo Actions
• Copying A Form
• Deleting a Theme
• Deleting a Form
• Multi-Page Validation
• Multi-Page Forms
• Themes Overview
• Welcome & Submission Messages
• Editing the Header & Footer
• Conditional Logic Tips
• Conditional Logic for Formstack Forms
• AI Form Creation with Formstack Forms
• How to Add an Image to a Form
• Section Conditional Logic

How to Upload and Insert an Image onto a Formstack Form

In this article we will be taking you through how to display an image on your form. Adding an image to your form is a great way to personalize the overall look and feel of your form.

To insert an image into your form, you will first need to add a Section or Description Area Field as pictured below. 
 

 Once you've selected the description area field or section, you can choose the edit description area or section heading option and then click on the Insert Image button (which looks like a picture of mountains).

This will bring up the option to either drop an image directly from your computer or browse the files on your hard drive. Alternatively, you can also click on the chain icon to insert a hosted image. Once you've selected the image you wish to use, you can click on the upload button.

Once uploaded, you'll see an image in your description or section area field as depicted below. Clicking on the image will allow you to make adjustments like the size or alignment. Once you're okay with how everything looks, make sure to click the save button on the top right and then you can use the the "Preview live form" option on the builder to get an idea of how it looks.
 

Uploaded Images 

To check what images have been uploaded on your Form, you can navigate to your name on the top right and then choose the uploads options. 

From here, you can view all images from your account that are being stored on Formstack's servers and being used across your forms. It's important to note that you can use this section to free up space if needed, but deleting an image here will remove it from the related Form. To delete images, hover over the image of your choosing then click the "Delete" button. 
 

Alternatively, if you were looking for a way to give your submitters the ability to upload their own image or file, check out this article for more information. 

How to add a Hyperlink to your Form

Easily add a hyperlink to your form for end-users to view an external website while completing their form. Here’s how!
 

Hyperlink text or Hyperlink images

Step 1: From your form builder, drag and drop a Description Area field to your form.

Step 2: Click Edit Description Area.

 

Step 3: In the description area, type your text and highlight the portion you would like to hyperlink.

Step 4: Click the Insert Link icon from the styling dashboard, enter the URL, choose if you want it to be opened in the same or new URL, and click Insert

 

Step 5: Review the field and click Save to capture.    

Hyperlink images

Alternatively, hyperlink images in the Description Area field to redirect end-users to a website. 

Step 1: From the Edit Description Area field, select the Insert Image icon from the styling dashboard and upload the image.

Step 2: Once added to the description area, click the image to edit:

 

Step 3: Here select the Insert Link icon, enter the URL, choose if you want it to be opened in the same or new URL, and click Insert. 

Step 4: Review the description field and click Save to capture. 

Manage hyperlinked items

Once your text or image is hyperlinked, open the edit description area field to take action on them like editing or deleting the links. 

Click on the hyperlinked text or image to unveil options:

 

Here you can: 

• Open the hyperlink to review 
• Edit the style of the hyperlinked text
• Edit link
• Unlink

Then click Save.

How to Show-Hide Multiple Sections Using Conditional Logic

Want to create a form where you can display sections based on a response? For example, if you have a registration form that allows for up to 5 registrants on one form and you need to collect information on each registrant, it is not necessary to show all 5 sets of registrant fields unless the end-user is registering 5 individuals.

With Conditional Logic, you can create forms where the showing of multiple sections is dependent upon a specific selection in a single field.

Creating Field to Determine Number of Sections Displayed 

In order to set this up, first create a field asking how many individuals are being registered. You will need to use a drop-down list, checkbox, number or radio button field for this in order to utilize the Conditional Logic feature. For this example, I used a dropdown list.

Copy Sections

Next, create your first section with all the necessary registrant information fields (the section header and fields can be added via the Form Builder tools). If you allow 5 registrations on one form, then you can simply click to copy the initial section 4 times. The duplicate icon is the icon with two pieces of paper.

Click on that icon and choose to copy "Section Header and Fields". Repeat for the number of Sections you would like to have. In this example, we are copying 5 Sections.

Logic Overview

After you have your 5 sections, you can begin applying logic to each section so the appropriate number of sections appear for the selected number in the dropdown list.

Note: All fields in a section inherit the logic set on the section. You will need to create a select list, checkbox, number or radio button field to utilize the Conditional Logic feature.

To lay this out simply.... 

Section 1 needs to show if ANY the options 5, 4, 3, 2, or 1 are selected in the number of registrants field.

Section 2 needs to show if ANY the options 5, 4, 3, or 2 are selected in the number of registrants field.

Section 3 needs to show if ANY the options 5, 4, or 3 are selected in the number of registrants field.

Section 4 needs to show if ANY the options 5 or 4 is selected in the number of registrants field.

Section 5 only needs to show if the option 5 is selected in the number of registrants field.

Adding Logic

Here's the logic for Section 1. To add this logic, click the + Add Logic button inside each section editor. Use the green "+" sign buttons to add multiple conditions. Remember to toggle to "any" or "all" as needed.

Your form will do this when you're finished:

How to Show-Hide Multiple Sections Using Conditional Logic

Want to create a form where you can display sections based on a response? For example, if you have a registration form that allows for up to 5 registrants on one form and you need to collect information on each registrant, it is not necessary to show all 5 sets of registrant fields unless the end-user is registering 5 individuals.

With Conditional Logic, you can create forms where the showing of multiple sections is dependent upon a specific selection in a single field.

Creating Field to Determine Number of Sections Displayed 

In order to set this up, first create a field asking how many individuals are being registered. You will need to use a drop-down list, checkbox, number or radio button field for this in order to utilize the Conditional Logic feature. For this example, I used a dropdown list.

Copy Sections

Next, create your first section with all the necessary registrant information fields (the section header and fields can be added via the Form Builder tools). If you allow 5 registrations on one form, then you can simply click to copy the initial section 4 times. The duplicate icon is the icon with two pieces of paper.

Click on that icon and choose to copy "Section Header and Fields". Repeat for the number of Sections you would like to have. In this example, we are copying 5 Sections.

Logic Overview

After you have your 5 sections, you can begin applying logic to each section so the appropriate number of sections appear for the selected number in the dropdown list.

Note: All fields in a section inherit the logic set on the section. You will need to create a select list, checkbox, number or radio button field to utilize the Conditional Logic feature.

To lay this out simply.... 

Section 1 needs to show if ANY the options 5, 4, 3, 2, or 1 are selected in the number of registrants field.

Section 2 needs to show if ANY the options 5, 4, 3, or 2 are selected in the number of registrants field.

Section 3 needs to show if ANY the options 5, 4, or 3 are selected in the number of registrants field.

Section 4 needs to show if ANY the options 5 or 4 is selected in the number of registrants field.

Section 5 only needs to show if the option 5 is selected in the number of registrants field.

Adding Logic

Here's the logic for Section 1. To add this logic, click the + Add Logic button inside each section editor. Use the green "+" sign buttons to add multiple conditions. Remember to toggle to "any" or "all" as needed.

Your form will do this when you're finished:

Undo Actions

In the form builder, under the form fields, you'll find a "History" button. Click on it to view up to 25 events from your recent form activity such as adding or deleting fields or renaming the form.

Formstack allows you to undo field deletions up to seven days after the activity. To restore a change there are two possible ways to make that happen. The first option is you can click on undo  at the top of the page. This will undo the most recent change and continue to do so with each press.

The other option is you could go to the change you want to go back to and click on that item in the list and it will make the form as it was before that change.

Copying A Form

To copy a form, click on the "Forms" tab in your account. Then, click on the checkbox next to the form you would like to copy.

Next, click on the "copy" button at the top of the page.

Note: Standard forms can be copied into Workflow forms by choosing the 'As a Workflow Form' option when clicking 'Copy'. Workflows are available as a paid add-on. 

Copy a Form to Your Own Account

When you click on the "copy" icon, you are given two choices:  copy to "My Account" or "Other Account(s)".  If you want to make a copy of the form in your own Formstack account, choose My Account.  If you want to send a copy of the form to another Formstack user, choose Other Account(s).

When you copy a form in your own account, it will be given the name of your original form with "- COPY" added to it.  You can change the name of your form on the Settings tab of the form.

Copying a Form to Another Account

When copying a form to another account or multiple accounts, put in the email address of each Formstack account you want to copy the form to. The email being used will need to have an account created before copying over a form.

If copying the form to more than one account, separate each email address with a comma.  You can also put in a custom message that will show in the email sent to these users letting them know you've sent them a new form.

Below is an example of the email they will receive:

You have two options for sharing the form:  "Only the Form" and "Form and Integrations".  If you share only the form, your integrations and credentials for those integrations will be removed from the form, so that the user you are sending the form to can put in their own credentials (Example:  Authorize.net API info).  If you want them to use your integration accounts, then choose Form and Integrations.

The owner of the account you are sending the form to will receive a message on the "Forms" page of his or her account. The user can then accept or deny the form you sent.

Deleting a Theme

To delete a theme from your account, hover over a non-active theme from the menu selection and then click on the 'Delete' option.

When deleting a theme that is being used on forms, you will see a warning pop up that indicates you are using it on several forms and that those forms will be changed to the default theme for your account. You can then delete the theme and change those forms or cancel and go back without affecting any of your forms.

 Once you have deleted the theme, any forms that used it will be immediately updated.

Deleting a Form

To delete a form, check the box next to the form on the "Forms" page of your account.  Then click on the button that says "delete" with a trash can icon.

A warning message will pop up to make sure you really want to delete your form.  At this point, hit the "Delete" button or the Cancel button.

Re-using a Deleted Form's URL

When a form is moved to the Deleted Forms folder the URL attached to that form is still not free to use on a live form. You will either need to wait 7 days until the form has been hard deleted from your account or restore the form, change the URL from the Settings page, then delete the form again.

Restore a Deleted Form

If you accidentally delete a form, you will have 7 days to restore it.  You can find deleted forms by clicking on the "Deleted Forms" link on the left side of your list of forms.

To restore a form, check the box next to the form on the "Deleted Forms" page of your account. Then click on the button that says "restore" with an arrow icon.  This will reactivate your form and move it back to your list of Active forms.

Multi-Page Validation

When creating a multi-page form, you can allow the user to skip to further pages without filling out the required fields on the immediate page. This can be turned on in the Form Extra section on the Build tab.

The form submitter will not be able to submit the form until all required fields are completed. However, now you can see all pages without having to fill in all required fields on the immediate page.

If the form submitter tries to submit the form without a required field filled out, the browser will redirect the user back to the FIRST required field that isn't filled out. If this field is on page one, it will take them back to page one. It will also highlight all required fields that are not filled out.

Multi-Page Forms

Multiple pages are useful for breaking up long forms and can be created using Sections. Drag and drop a new Section onto your form where you want your page break and check the "Start new page" option. 

Form Progress Indicator

You can also add a progress bar to your form when using multiple pages. This is useful on longer forms to show your users where they are in the process of filling out the form.

You can enable this function when creating a form by clicking the "Form Extras" section on the right side of the form builder and toggling the "Progress Indicator" on. You must have more than one page on your form to enable this function.

Themes Overview

Paid and Trial accounts on Formstack come with the ability to choose a pre-built Theme or create your own custom Theme. This is done using our Theme builder. You can even include custom HTML and CSS on a custom Theme! The number of custom themes you can build depends on your subscription level.

On the "Build" page of your Form, you will see the "Style" tab in the upper left corner. Click the "Style" tab to create a new Theme.

Inside the Style tab, you can search for themes in your account and also sort your themes. You'll see the active theme used on your form listed at the top. You can create a new theme by selecting the "Create Theme" button.

In your new theme, start by giving your theme a name. You can then proceed to begin changing the styling options for your theme. You'll see Quick Styles at the top, which are easy, quick edits. Open up the Advanced Styles tab to unleash all the theme options you can customize.

Once you're at a good point, you may choose to Save, Save as New, or Save and Activate the theme by clicking the "Save Changes" button. Save and Activate will save your new theme and set it as the Active theme on your Form.

One thing to keep in mind is that Themes only apply to forms that are hosted by Formstack. If you're embedding a form on your own website, it will include the styling you applied to your form via your custom Theme, but will not include styling outside of the form box and may be affected by the styling of the web page where you've embedded. In this case, you may need to alter the CSS on your Theme. You can do this in the Advanced Code Editor inside the Theme Builder. 

Note: If there are code conflicts in regards to formatting, styling, or functionality when you embed the form on your site, try using the iframe embed method.

Editing Your Theme

The Theme builder is broken down into different sections; "Quick Styles", "Advanced Styles", "Theme Details", and "Advanced Code Editor" each offering different ways to customize your form.

Important Notes When Editing:

• When making changes to a Theme you must explicitly click the save button to apply changes to your Theme.
• Changes to a Theme will not be reflected on your Live Form unless the Theme you are editing is your "Active" theme.
• Using the "Save and Activate" option is a great way to ensure that you are making changes to your live form.
• Saved changes will affect all Forms for which a Theme is "Active".

Quick Styles

The "Quick Styles" Section allows you to quickly make broad-stroke changes to your Form's styling. In specific, this section allows you to customize: Form Colors, Form Font, Font Sizes, Spacing, and Field Style. This allows you to set the overall look and feel of your form, and choose from well over 50 different fonts.  

 The "Edit Form Colors" button will bring up a new screen that allows you to set colors in many different areas of your form and includes some sample fields for you to see what the changes will look like. After you get it looking the way you want, click "Save Colors" to go back to the Theme Builder.

Advanced Styles

The Advanced Styles section allows you to adjust the fine details of your Form's styling. This section has subsections that allow you to make detailed edits, such as specific text alignment, specific padding/spacing adjustments, customize buttons, and more. Make sure to check out the "Additional Components" section. By customizing the Primary, Secondary, and Tertiary colors you can change the colors on the small details of your form, such as the File Upload Button and scroll bars.

Use the options in the Advanced Styles section to put on those perfect finishing touches or change almost everything about your form and really make it yours!

Advanced Code Editor

Sometimes you have a need to go off the beaten path with your Form, or you're a pro web designer and like to do things your own way. This is where the Advanced Code Editor comes in. We have another great support document to offer CSS help using this powerful addition to the Theme Builder.

Using Your Theme

You can hover over any theme in your Theme Library and select "Apply" to set this as the active theme on your form. To set the Theme you're working on as active, select the "Save and Activate" option from the top of the theme editor.

Set Theme as Active

Save and Activate in Theme Builder

Stock Themes

Here are some preview images of the Stock Themes we currently offer. These are the themes you can use as a starting point when creating a new theme.

Welcome & Submission Messages

Adding a Submission and Welcome message to your Form is a great way of inviting and thanking a participant for their time. 

How to add an image as your submission or welcome message

1. Go to the ‘Settings’ tab of your Form

2. Navigate to Welcome & Submission Message and choose whether you’d like to add and or edit/delete the default Welcome & Submission Messages. (This can also be done by clicking on the Welcome or Submission message while on the build tab and by clicking the "Customize message in settings" button)

3. While on the Welcome Message Settings page, You can choose to modify the text of the start button or remove the default text to hide the button (We would recommend keeping the text if you don't include instructions in your image on how to proceed to the next page). Upload an image and select the image settings that work for you:

4. While on the Submission Message Settings page, you can choose to display/edit the Default message, Display a custom message, Display an image or Redirect to a custom URL.

Image Settings definitions:

Cover will automatically scale and crop your image to fill the entire screen without losing the aspect ratio

Fit to Screen will scale the image so that the entirety of the image will always be visible. Any space that is not filled in by the image will be filled by the Page Background Color in your theme.

Repeat will use your original image’s size and repeat the image until the entire form is filled

Stretch will not respect your image’s aspect ratio and change its width and height to fill the entire screen

5. Click Save Settings once you’re comfortable with all of your settings.

What are the file types supported and the maximum file size?

We support PNG, JPG, JPEG, GIF as file types and maximum file size of 5 MB

Other tips:

• If you have various devices or screen sizes you are designing for, avoid putting design elements near the edge of your image to avoid having it cropped from your image
• Pick an ideal Page Background Color in your theme to blend in with your image in case your image doesn’t fill the entire screen
• If you are only using a tablet or mobile devices, then we recommend using the same model so you can focus on designing for one resolution

If you are designing an image for a tablet, here are some resolutions to get you started

This list does not include all the possible variations but only serve as a starting point if you are unable to find a resolution that works for your devices. 

Examples:

Mobile - Tablet 

Web 

Note: Factors like browsers, screen sizes, operating systems, and version updates will affect how forms appear across devices. It is recommended to always test forms on any device you need to support.


Finally, you have the ability to redirect users to a custom URL upon submission. This can be very helpful when trying to drive traffic back to your website, or to make sure the user ends up exactly where you need them to be after submitting the form. This is also a great place to send a user to another form that can be pre-filled with date from the form being submitted. You simply add the form URL of the form you want the user to go to and then you can select the, "Append submitted data to a URL" check box. The submitted data will then be added as a URL query string and the next form will be prefilled with the data. Check out THIS article for more details on how this feature works.

Note - "Append submitted data to a URL" will not be available on certain plans, ie. (Legacy HIPAA Plans and New Healthcare Plans). This process should only be used when looking to pass non sensitive information. PII and PHI data should not be passed via URL query string as it can leave the sensitive data exposed. Please refer to THIS guide if you need a breakdown on what is considered sensitive data. Also take a look at THIS guide that talks through how to properly set up your form to collect sensitive data and make sure you are not violating terms of service.

Editing the Header & Footer

Editing the Header and the Footer of a form sends a powerful message about the purpose of your form. We have now made building and branding forms more streamlined by allowing you to easily add images to the Header or Footer. 

To add a header or footer image click "Style" in the upper left corner of the builder.

Hover your mouse to the active theme and click on "Edit" (If you're using a stock theme you'll need to first make a copy of the theme before you can add header and footer on your form).


From there, go to Advanced Styles and under General click on "Upload Image" to add a header and footer. 

Once the "Upload Image" button is clicked, the option to either drag and drop files or choose a file from your computer will appear along with the option to set the size of the image, and align the image to the left, center, or right side of the page. 

ProTip: We recommend an image with a width of 700px for the best fit.

Once you've added your header image make sure to click on "Done" and save your theme before you preview your live form.

Note: Images uploaded in Jpeg format are compressed by our system at about 80% quality. If you're noticing a drop in image quality, this might be why. We suggest using a lossless image format such as PNG or GIF to not experience this quality loss.

Removing the Header or Footer Image

To remove a header or footer image you've added to your theme click on "Edit Image" next to Form Header or Form Footer, then click on the red "x" icon to the right of the image to remove the image and click on "Done". Finally, save your theme to apply the change.

Note: Header and footer images do not show up when embedding your form using the javascript embed code as they are not part of the form body. The images will, however, show using the iframe embed code.

Editing Header/Footer HTML
 

When on the Active Theme or the Theme applied on the form, click on the "Advanced Code Editor" to expand the view of it. When it is expanded there will be buttons for "Header HTML" and "Footer HTML" click on the one you would like to edit and you could put in the custom code, or below them, there is an option to put in the default header or footer code.
 

Warning: Editing the HTML/CSS in the Header or Footer will wipe out any styling by the Theme or Advanced CSS applied to the theme.

Conditional Logic Tips

This article takes you through a few additional tips to consider when using conditional logic. If you're looking for a more general overview of using it for the first time, we'd recommend starting with this article instead.

Here are a few things you should know when working with conditional logic:

Confirm your options labels before you create your logic

If you need to delete any options or add option values you’ll need to re-do the logic rules. This goes for any email or routing logic you have already set up, too.

Make your field labels different to avoid confusion when creating logic rules

If you have multiple fields on your form with the same label, then you may have trouble setting up logic rules based on the correct fields.

For example, if you’re building a multi-person registration form and you want the submitter to check off a box after each section to register another person you’ll need to make the field label unique. That way, when you go to create your logic rules on your sections you can easily tell which field should trigger the logic for each section.

Logic rules work based on the option label until option values are added

Conditional logic rules look at the option label to act until option values are used. Once values are enabled the logic rule will look at the value. 

This is important to remember when setting up email routing logic. If you’re sending two confirmation emails based on the selection of two options that both have an equivalent value (for example 0 and 0.0) both emails will send.

Conditional Logic for Formstack Forms

Conditional Logic allows you to show or hide a field (or entire section) based on what the user selects for another field on a form.

For example, you might have a field asking users "How would you rate the service we offered?" If a user selects Poor, you might want to display an additional field for comments so the user can enter details on his or her experience. Below you'll find a video on how to this up for yourself or detailed instructions based on your preference. 

Sections:

How to setup Conditional Logic video

Adding Logic to Your Field

Creating Your Logic Rule

Conditional Logic for Sections

Determining if a Field Has Logic

Removing Logic

Tips


 

Adding Logic to Your Field

To use Conditional Logic, click on a field within the form builder to edit it. This is the field you will show or hide based on choices made in previous fields. Once you've clicked and highlighted the field you'd like to apply the logic to, Click the chevron next to Logic and then click the button  "+ Add Logic" button. From here, you can add Logic to your form.

Creating Your Logic Rule

First, choose whether you want to hide or show the field depending on the logic.

Next, add the field on your form that you want to determine the criteria. In this example, we want to show our field when a customer chooses Poor in the Dropdown List field that asks them how they would rate their service.

We also want this field to display if a Customer chooses Good. To add additional criteria, click the + Add Another button.

Since customers can only choose one option, we want to make sure we change our criteria to show when Any of the following rules match. This creates an either/or situation.

Each of the rules you set up must be based on a Date/Time, Dropdown List, Checkbox, Number, Event, or Radio Button field. Select the field you want to view and its respective option. You can add or delete criteria by clicking on the plus and minus icons.

NOTE: As stated above, your form MUST contain a field with options or a Number field in order for you to use the Conditional Logic feature.

Determining if a Field Has Logic 

The field that has logic applied will display a purple LOGIC symbol telling you that the field has conditional logic applied to it.

Conditional Logic for Sections 

Just as you can use Conditional Logic for fields, you can also use this feature for entire sections on forms. This is perfect for long forms that may have multiple sections that all users do not need to fill out. You do not need to apply logic to every field inside of a section, just the section itself because any logic applied to a section will also be applied to all fields within that section.

NOTE: On Multi-Page Forms, we do not recommend using logic on a section that is set to "Start a New Page." If the conditions are not met for this section to show, the entire page will be hidden, including other sections that would be on the same page. In this way, succeeding fields and sections "inherit" the logic of the section starting the page. If the top section on a page must be hidden by logic, we recommend adding a blank section above it (with no logic applied to it) that will "Start a New Page" instead.

Removing Logic

Conditional Logic may be deleted or edited at any time. To access the logic to make changes, go into your form > click on the field carrying the logic > click the chevron next to Logic and then click the red circle with a white line to remove any logic.

Conditional Logic Tips 

Confirm your options labels before you create your logic

If you need to delete any options or add option values you’ll need to re-do the logic rules. This goes for any email or routing logic you have already set up, too.

Make your field labels different to avoid confusion when creating logic rules

If you have multiple fields on your form with the same label, then you may have trouble setting up logic rules based on the correct fields.

For example, if you’re building a multi-person registration form and you want the submitter to check off a box after each section to register another person you’ll need to make the field label unique. That way, when you go to create your logic rules on your sections you can easily tell which field should trigger the logic for each section.

Logic rules work based on the option label until option values are added

Conditional logic rules look at the option label to act until option values are used. Once values are enabled the logic rule will look at the value. 

This is important to remember when setting up email routing logic. If you’re sending two confirmation emails based on the selection of two options that both have an equivalent value (for example 0 and 0.0) both emails will send.

AI Form Creation with Formstack Forms

Formstack Forms is offering a new way to simplify the Forms creation process. AI Form Creation is a new pathway for creating a Form. This feature allows you to enter prompts (i.e a description of what you would like included in your document template) to then generate a Form using AI.

This means that you will not have to go through the process of manually adding fields when choosing to create from scratch, but can still make adjustments as needed after the form has been created.

Please note: This feature can be enabled by an Org Admin from the Account Settings tab on our admin site. For more information, check out this article.

To get started, you will select Create Form on the top right from the Forms or Home tab  After this step, you'll see a new option on the Form type selection screen and can choose the AI Form option as shown below.

After you've selected the AI Form option, you'll be taken to a new screen to name your Form and write the prompt that will determine the structure of your Form. The AI Form option will try it's best to create a Template based on the information provided and will take you to the Form afterwards to review. (Please allow some time while the builder puts together a form based on your request). We've included an example below of what this could potentially look like based on your Prompt:

Prompt Example

Generated Form based on prompt

It's important to note that the AI Form Creator helps to effortlessly create an initial draft for your form and lets you customize and make tweaks without the heavy lifting. AI-generated forms are intended to help you get started with form creation, but they are not complete or fully functional without further review. We strongly recommend reviewing and thoroughly testing your forms before distributing them to end users and using this feature as a good starting point to build a foundation and save time on the form building process.

FAQ
 

What is AI?

Artificial intelligence (AI) makes it possible for machines to learn from experience, adjust to new inputs and perform human-like tasks. AI's effectiveness depends heavily on the quality of its algorithms and machine learning techniques. While AI can excel at specific tasks, it requires extensive data and repetition to do so. By analyzing large datasets, recognizing patterns, and making data-driven predictions or decisions, AI continuously enhances its performance over time.

What kind of AI is Formstack using?  

We are using Anthropic's Claude LLM in our AWS Bedrock environment.

Can you pull images or logos into the template using AI?

Not at this time, but you can prompt styling aspects such as hex color, bold, underline and italics. 

Can I ask AI to set up a integrations/Plug-ins?

Not at this time.
 

Does Formstack Forms train AI using the forms I create?

Absolutely not. Anthropics's Claude LLM, similar to ChatGPT and other large-scale generative AI models, is trained using publicly available forms found online from around the world.

What Safeguards exist to ensure forms created via AI are appropriate? 

Even though Formstack AI is trained on an extensive and varied dataset, some content might not be appropriate for all situations. To mitigate this, we’ve put measures in place to restrict AI use in certain harmful categories. AI-generated forms are intended to help you get started with form creation, but they are not complete or fully functional without further review. We strongly recommend reviewing and thoroughly testing your forms before distributing them to end users.”

What types of forms can I create using AI?

Formstacks AI Form creation tool can be used to for just about any type of Form, but here are a few examples of different prompts that you can use based on your use case:  

1. “Create a simple contact form that collects name, email, and address.”
2. “Design a survey form with questions about user satisfaction, including rating scales and a comment section.”
3. “Generate a registration form for an event, capturing attendee name, email, phone number, and dietary preferences."

What are some limitations to keep in mind for asking AI to setup a Form? 

At this time, you cannot change your Form language settings or your field settings(max/min character limits, calculations). In addition to those limits, you also can't add logic(show/hide fields) or update emails. All these adjustments/settings can still be made on the form after it's been generated from the AI prompt. 

How to Add an Image to a Form

You can use a Section or Description Area field to insert an image into a Formstack form. First, you would add either a Description Area field or Section.

Then click on the field itself and select the "Edit Description Area" option from the left. On this page, you can choose the "add image" icon in the toolbar to continue. 
 

From here you can upload an image by clicking on the dotted lined square as shown below or dragging and dropping the file in the dotted lined square. Another option is "By URL" which can be done by clicking on the hyperlink icon. This would allow you to insert a URL that links to the image. Also, if you want to use an image that you uploaded to another form you could click on the "Browse" (folder icon) option which will list all other pictures you have in sections and description areas throughout all the forms on your account. 
 

You should now see that your image has been uploaded. 

Section Conditional Logic

When building forms, you may have situations where you’d like multiple fields to show or hide based on the answer to one field. Instead of setting up a conditional logic rule on each field individually, you can save some time by grouping all of the fields into a section and then applying the logic rule to the section.

For example, when building an order form with multiple payment options, you may want the credit card field and address field to display when the payment method selected is ‘Credit Card.'

First, add a section to your form by double clicking or dragging and dropping the section option from the bottom left to the right.




Second, place the credit card field and the address field into the section on your form.
 

Next, click on the section header, then click the chevron next to Logic section settings. From here, click the + Add Rule button.
 

Then, add a logic rule based on how you'd like to hide or show the section. For example, we've setup our ‘Payment Method’ field to show the section when the ‘Credit Card’ option is chosen. 

After this, you should be all set. You’ve successfully applied logic to multiple fields at once!