# Quickstart
Getting powerful forms embedded in your Canva website is simple with FluidForms.
## 1. Using the Canva app
You can use the [FluidForms Canva app](https://www.canva.com/apps/AAGFFkmnRaw/fluidforms) directly within Canva. This allows you to easily create quick and simple forms, and embed them within your Canva website in a few clicks.
{% hint style="info" %}
*Note: Some advanced functionality is not available in the Canva app. If you require further customization of your form, we recommend using the FluidForms website.*
{% endhint %}
## 2. Using FluidForms
You can also use the FluidForms web app to create and customize forms for your Canva websites.
1. Log in to the [FluidForms dashboard](/getting-started/quickstart)
2. Click the "Create Form" button\
3. Configure your [form settings](#form-configuration).
4. Click on the "Form Fields" tab and add your form fields.
5. Click "Save"
6. Share your form:
1. Copy the Form URL to share with any recipients, or link to from your website
2. Click "Embed in Canva" for instructions on how to embed the form in your Canva website.
### Form Configuration
* [**To Email**](#user-content-fn-1)[^1]**:** The email address where form submission notifications will be sent.
* **Logo:** An optional logo which will be displayed at the top of the form.
* **Background Color: T**he form background color
* **Button Color:** The color of the form's primary/submit buttons
* **Submit Button Text:** The text displayed in the submit button
* **Form Completion Page Text:** The message that will be displayed to the user after a form is submitted.
* **Question Display Style:** Your preferred style of how the form questions will be displayed.
[^1]:
# FluidForms Canva App
This guide will take you through creating a form in the FluidForms Canva app.
{% hint style="info" %}
To follow this guide, ensure you have your website design, and the FluidForms Canva app open. You can find the FluidForms app by clicking the "Apps" button on the left panel and searching for "FluidForms".
{% endhint %}
#### 1. Enter a form name. This is so you can easily identify the form (if you have multiple).
#### 2. Enter an email address to receive form submission notifications.
#### 3. Let's start adding some form fields/questions. Click on the "Questions" tab.
#### 4. For each question, pick the question type.
#### 5. Different types are useful for different inputs, for example, a Short Response is great for names, email addresses or phone numbers.
#### 6. Enter a field Title. This will be the label on your form.
#### 7. Select a Response Type. This will be used to validate the input entered by the user.
#### 8. If you require a user to complete the field, turn on the "Required" toggle. Users will only be able to submit the form if they have completed this field.
#### 9. Continue adding as many questions as you need and customize the fields.
#### 10. Once you've added all your fields, you can now start customizing the look and feel of your form. Note: Some customization features are only available to FluidForms Pro users.
#### 11. Once your form is ready, click "Add to design". This will add an embedded form to your Canva website.
#### 12. Drag the form into your desired position. Once satisfied, publish your website.
***
Created with [Tango.us](https://tango.us?utm_source=markdown\&utm_medium=markdown\&utm_campaign=workflow%20export%20links)
# Supported Form Fields
This document provides a comprehensive guide to all form field types available in FluidForms, their features, and configuration options.
## Basic Fields
### Short Answer
The Short Answer field is used for collecting brief text responses such as names, addresses, and other short pieces of information.
**Features:**
* Configurable placeholder text
* Input validation options:
* Text (default)
* Password
* Email
* Telephone
* Number
* Date
* Optional required validation
**Example Use Cases:**
* Name fields
* Address fields
* Phone numbers
* Single-line responses
***
### Email
The Email field is a specialized Short Answer field with built-in email validation to ensure the user enters a valid email address.
**Features:**
* Automatic email format validation
* Configurable placeholder text
* Optional required validation
**Example Use Cases:**
* Contact emails
* Newsletter subscriptions
* Account registration
***
### Long Answer
The Long Answer field provides a text area for collecting longer responses like comments, feedback, or detailed information.
**Features:**
* Multi-line text input
* Configurable placeholder text
* Optional required validation
* Resizable input area
**Example Use Cases:**
* Comments and feedback
* Detailed descriptions
* Cover letters
* Support requests
***
### Checkbox
Checkbox fields allow users to select multiple options from a list.
**Features:**
* Multiple selections allowed
* Customizable option list
* Optional "Other" choice with text input
* Optional required validation
**Example Use Cases:**
* Multiple choice questions
* Preference selection
* Terms and conditions acceptance
* Feature selection
***
### Radio Group
Radio Group fields allow users to select exactly one option from a list of choices.
**Features:**
* Single selection only
* Customizable option list
* Optional "Other" choice with text input
* Optional required validation
**Example Use Cases:**
* Single choice questions
* Gender selection
* Age range selection
* Account type selection
***
### Dropdown
Dropdown fields present a list of options in a compact dropdown menu format.
**Features:**
* Single selection from a dropdown list
* Space-efficient for large option lists
* Customizable option list
* Optional required validation
**Example Use Cases:**
* Country selection
* Product selection
* Category selection
* When space is limited and options are numerous
***
## Advanced Fields
### Rating
Rating fields allow users to provide feedback on a numerical scale.
**Features:**
* 1-5 star rating scale
* Visual rating display
* Optional required validation
**Example Use Cases:**
* Customer satisfaction surveys
* Product reviews
* Service quality feedback
* Experience ratings
***
### Yes/No
Yes/No fields provide a simple binary choice option.
**Features:**
* Simple toggle between two options
* Customizable labels for both options (defaults to "Yes" and "No")
* Optional required validation
**Example Use Cases:**
* Simple agreement questions
* Binary choice situations
* Opt-in/opt-out decisions
* Simple boolean decisions
***
### File Upload
File Upload fields allow users to upload files as part of their form submission.
**Features:**
* Configurable accepted file types (Images, Audio, Video, PDF)
* Maximum file size limit (10MB)
* Optional multiple file upload
* Preview support for image files
**Example Use Cases:**
* Resume uploads
* Document submission
* Image uploads
* Supporting documentation
***
### HTML
HTML fields allow form creators to insert custom HTML content into forms.
**Features:**
* Custom HTML content injection
* Rich text and formatting support
* Static non-input elements
**Example Use Cases:**
* Section dividers
* Instructions and help text
* Embedded content
* Custom formatting and layout
***
### Payment
Payment fields enable collection of payments directly through the form.
**Features:**
* Multiple currency support (USD, EUR, GBP, JPY, CAD, AUD)
* Fixed or user-defined amount options
* Configurable payment description
* Secure payment processing through Stripe
**Example Use Cases:**
* Product purchases
* Donations
* Service payments
* Event registrations with fees
##
## Need Help?
For additional assistance with form fields or other features, please contact .
# Creating Your First Form
This guide will walk you through the process of creating your first form with FluidForms. It's designed to be simple and get you started quickly.
## Starting a New Form
1. **Navigate to Forms:** From your FluidForms dashboard, ensure you are in the "Forms" section (this is often the default view).
2. **Initiate Form Creation:** Look for a button labeled "Create New Form" and click it.
3. **Choose Your Starting Point:** You'll have a couple of options:
* **Start with a Template:** FluidForms offers a variety of pre-designed templates tailored for common use cases such as "Contact Us," "Event Registration," "Feedback," etc. Selecting a template can give you a great head start.
* **Start from Scratch:** If you have a specific vision or unique needs, you can choose to build your form on a blank canvas.
## The Form Builder Interface
Once you've chosen your starting point, you will enter the Form Builder. This is where you'll design and configure your form. The interface generally includes:
* **Field Palette:** This is a sidebar or panel containing all the fields in your form. You can click the "Add field" button to add additional form fields.
* **Form Canvas:** The central area where you view your form preview.
* **Settings/Properties Panel:** When you select a field on the left panel, this panel will display its editable properties and configuration options.
## Adding and Editing Fields
### Adding a Field
1. **Find the Field:** In the Field Palette, click the "Add Field" button.
2. **Select your field:** Choose from a range of field types to add to your form. For example, Text, Email, Rating, Comment or Payment.
{% hint style="success" %}
FluidForms Pro users have access to all field types, including advanced fields such as payment and signature fields.
{% endhint %}
### Common Field Types
Here are some of the basic field types you'll frequently use when building forms:
* **Text Input:** Used for collecting single lines of text, such as names, subjects, or short answers.
* **Email Input:** Specifically designed for capturing email addresses. It often includes built-in validation to check if the input looks like a valid email format.
* **Text Area:** For collecting longer blocks of text, like comments, messages, or detailed feedback.
* **Multiple Choice (Radio Buttons):** Allows users to select only one option from a predefined list.
* **Checkboxes:** Enables users to select one or more options from a predefined list.
* **Dropdown Select:** Presents a list of options in a compact dropdown menu that expands when clicked, from which a user can select one option.
### Editing Field Properties
Customizing your fields is key to making your form effective:
1. **Select the Field:** Click on any field in the left-panel. This will activate it for editing.
2. **Use the Properties Panel:** The Settings/Properties Panel will now show all the configurable options for the selected field.
3. **Common Properties to Edit:**
* **Label:** This is the question or title for the field that users will see (e.g., "Your Full Name," "How did you hear about us?").
* **Placeholder Text:** Faint text that appears inside the input field before the user types anything. It can provide an example or hint (e.g., "e.g., John Doe").
* **Required Field:** A toggle or checkbox that makes filling out this field mandatory before the form can be submitted. Required fields are often marked with an asterisk (\*).
* **Options (for Multiple Choice, Checkboxes, Dropdown):** For these field types, you'll need to define the list of choices that users can select from. You can typically add, remove, and reorder these options.
## Saving Your Form
It's crucial to save your work as you build your form:
* Locate the "Save Form" button at the top-right of the screen.
* Click it to save your current progress. It's a good habit to save frequently, especially after making significant changes.
## Previewing Your Form
Before you share your form, you'll want to see how it looks and behaves:
* Look for a "Preview" button or icon. Clicking this will open a new tab or window showing you what your form will look like to your users.
* Use the preview to test the layout, check for typos, ensure all fields are working correctly, and verify that required fields are enforced.
Congratulations! You've now learned the basics of creating your first form in FluidForms. With these fundamentals, you can start collecting information. In subsequent guides, we'll cover more advanced features like styling, conditional logic, and integrations.
# Using Conditional Logic in Forms
Conditional Logic (also known as "skip logic" or "branching logic") makes your forms smarter and more interactive by showing or hiding fields, or making them required, based on a user's previous answers. This creates a more personalized and efficient experience, guiding users through your form in a way that's most relevant to them.
{% hint style="success" %}
*Note: Conditional Logic is a Pro feature.*
{% endhint %}
## Why Use Conditional Logic?
Implementing conditional logic in your forms offers several key benefits:
* **Personalized Experience:** Users are only presented with questions that are relevant to their specific situation and previous responses.
* **Shorter Forms:** By dynamically hiding unnecessary fields, forms appear less daunting and quicker to complete, which can significantly reduce form abandonment.
* **Improved Data Quality:** You collect more accurate and targeted information by guiding users down the correct path and asking only relevant follow-up questions.
* **Increased Conversion Rates:** A smoother, more relevant, and less cluttered form experience can lead to higher completion and conversion rates.
* **Streamlined Processes:** Automate parts of the information gathering process by tailoring the questions asked to the user's needs or choices.
## Common Use Cases for Conditional Logic
Here are some practical examples of how conditional logic can be applied:
* **Service/Product Interest:** If a user indicates interest in a specific service or product, show additional questions related to that service.
* *Example:* Question: "Which services are you interested in? (Checkbox)" Options: "Web Design," "SEO," "Content Writing." If "Web Design" is checked, show fields like "What is your current website URL?"
* **Consent and Opt-ins:** If a user agrees to terms or opts into a newsletter, reveal relevant fields.
* *Example:* Question: "Do you agree to the terms and conditions? (Checkbox)" If checked, the submit button becomes active or an email field for the newsletter appears.
* **User Segmentation:** Ask different questions based on user type.
* *Example:* Question: "Are you a Business or Individual?" If "Business" is selected, show fields like "Company Name" and "Number of Employees."
* **Event Registration:** Show different options based on attendance type.
* *Example:* Question: "Are you attending in-person or virtually?" If "In-person" is selected, show fields related to dietary restrictions.
## Setting Up Conditional Logic
Conditional Logic can be setup on the Logic page in the form builder. Click on the "Logic" button in the top navigation bar.
1. **Define a Rule:** Rules generally follow a structure like this:
* **IF:** Select the field that will trigger the logic (the "trigger field"). This is the field whose value will determine the action.
* **CONDITION (Operator):** Choose the comparison operator (e.g., Is, Is Not, Is Empty, Is Filled, Contains, Greater Than, Less Than).
* **VALUE:** Specify the value of the trigger field that needs to be matched for the condition to be met (e.g., a specific text, a selected option).
* **THEN (ACTION):** Choose what should happen when the condition is met (e.g., Show, Hide, Make Required, Make Optional).
* **TARGET FIELD(S):** Select the field or fields that will be affected by this action.
**Example Rule:**
* **IF** `Dropdown: "Are you interested in our newsletter?"`
* **IS** `Yes`
* **THEN** `Show`
* **TARGET FIELD** `Email Input: "Your Email Address"`
## Supported Fields
* **Trigger Fields:** Fields that can typically trigger conditions are those with distinct options or states, such as:
* Multiple Choice (Radio Buttons)
* Checkboxes
* Dropdown lists
* Sometimes, Text Inputs (e.g., "Is Filled" or "Contains a specific word")
* **Target Fields:** Most field types can usually be the target of a conditional logic rule, meaning they can be shown, hidden, or have their required status changed. This includes:
* Text Inputs (Single Line, Paragraph)
* Email, Number, Date, Time fields
* Multiple Choice, Checkboxes, Dropdowns
* Section Breaks or entire groups of fields (if supported)
## Multiple Conditions & AND/OR Logic
Complex forms might require more sophisticated logic:
* **Multiple Rules for One Target Field:** You can often apply several different logic rules that all affect the same target field. For example, one rule shows a field, and another rule (based on a different trigger) also shows the same field.
* **AND vs. OR Logic:** When a single action depends on multiple conditions:
* **AND Logic:** All specified conditions must be true for the action to occur. For example, "Show Field C IF Field A is 'Yes' AND Field B is 'Option 1'."
* **OR Logic:** If any one of the specified conditions is true, the action will occur. For example, "Show Field C IF Field A is 'Yes' OR Field B is 'Option 1'."
* The interface for setting up AND/OR logic varies. Some systems allow you to group conditions or select "Match all conditions (AND)" or "Match any condition (OR)."*Placeholder for image:*
## Testing Your Conditional Logic
Thorough testing is crucial:
* **Use Preview Mode:** Always use the form's "Preview" mode to test your conditional logic.
* **Test All Paths:** Try every possible combination of answers for your trigger fields to ensure the target fields appear, disappear, or change their required status exactly as intended.
* **Check for Conflicts:** Ensure different rules don't unintentionally override each other in unexpected ways.
## Troubleshooting Common Issues
If your conditional logic isn't working as expected, consider these points (and for more, refer to `docs/troubleshooting.md`):
* **Conflicting Rules:** Make sure you haven't set up rules that contradict each other (e.g., one rule says "Show Field X" and another says "Hide Field X" based on conditions that can be true simultaneously).
* **Incorrect Values:** Double-check that the values specified in your conditions (e.g., "Yes," "Option A") exactly match the actual values of your trigger fields. Case sensitivity can be a factor.
* **Logic on Hidden Fields:** Ensure that a field you are trying to use as a trigger isn't itself hidden by another preceding logic rule.
* **Typos:** Simple typos in values or field names within the logic setup can cause it to fail.
Conditional logic is a powerful feature that can dramatically enhance the user experience and efficiency of your FluidForms. By carefully planning and testing your logic paths, you can create truly dynamic and responsive forms.
# Embedding Your Forms
Once your form is designed and ready, FluidForms makes it easy to share it or embed it directly into your website, including your Canva designs. Choosing the right embedding method ensures your form is accessible and integrates well with your online presence.
## Finding Your Embed Code
To get the necessary code or link for embedding:
1. **Navigate to "Forms":** In your FluidForms dashboard, go to the main "Forms" section where all your forms are listed.
2. **Select Your Form:** Click on the specific form you wish to embed or share.
3. **Locate Embed/Share Options:** Within the form's management area, look for the "Share" button in the top navigation bar.
4. Choose your embed option (outlined in detail below).
## Common Embedding Methods
FluidForms provides a few ways to get your form onto your website:
### 1. iFrame Embedding
* **What it is:** An iFrame (Inline Frame) is an HTML element that loads another HTML page within a "frame" on your current webpage. It's a straightforward and widely supported method for embedding external content.
* **How to use:**
1. FluidForms will provide you with an iFrame code snippet.
2. Copy this entire snippet. It will look something like this:
```html
```
*(Note: The `src` URL, `width`, `height`, and other attributes will be specific to your form and FluidForms' implementation.)*
3. Paste this code into the HTML of your webpage where you want the form to appear. Most website builders offer an "HTML block," "Code block," or "Embed" widget for this.
### 2. Direct Link (URL)
* **What it is:** A unique web address (URL) that hosts your form directly on the FluidForms platform.
* **How to use:**
1. FluidForms will provide a shareable URL for your form.
2. Copy this URL. It might look like: `https://www.fluidforms.co/embed/form?id=your-unique-form-id`
3. Share this link directly via email, social media, or create a hyperlink from your website text or buttons.
* **Pros:**
* **Easiest to Share:** No coding or embedding knowledge required. Just share the link.
* **Full-Page Experience:** Users see the form in a dedicated, full-page view which can be less distracting.
* **Cons:**
* **Users Navigate Away:** Users will leave your website to fill out the form, which might not be ideal for all scenarios.
## Embedding in Canva
FluidForms offers a dedicated Canva integration:
* **FluidForms App in Canva:** The best way to use FluidForms with Canva is by searching for and adding the "FluidForms" app from the Canva app marketplace directly within your Canva editor.
* **Seamless Integration:** This allows you to select your forms and embed them as elements within your Canva designs (websites, presentations, etc.) without needing to copy-paste external code.
* **For Detailed Instructions:** Please refer to our comprehensive guide: [Using FluidForms with Canva](#embedding-in-canva).
## Embedding on Other Website Platforms
The general process for embedding using iFrame or JavaScript code on most website builders is similar:
* **WordPress:**
* For iFrame or simple HTML: Use the "Custom HTML" block in the Gutenberg editor.
* For JavaScript: You can also use the "Custom HTML" block. Some themes or plugins might offer specific sections for adding scripts to the header or footer.
* **Squarespace:** Use the "Code Block" element. You can choose to embed HTML or display iFrames.
* **Wix:** Use the "Embed HTML" element or "Embed a Widget" option.
* **Shopify:** You can edit the HTML of your theme's Liquid files (for advanced users) or add HTML sections to pages/posts through the theme customizer if available. Many page builder apps also support HTML embedding.
* **General Tip:** Most platforms that allow content creation have a way to add custom HTML, iFrames, or JavaScript. Look for options like "Embed," "Code," "HTML," "Source," or "+" (Add Block) in your editor. Consult your specific platform's help documentation for the most accurate steps.
## Troubleshooting Embedding Issues
If you encounter problems with your embedded form:
* **Form Not Displaying:**
* Ensure you've copied the *entire* embed code snippet correctly.
* Clear your website's cache and your browser's cache.
* If using JavaScript, check your browser's developer console for any error messages.
* **Form Cut Off:**
* If using an iFrame, try increasing the `height` value in the iFrame code (e.g., `height="800px"`).
* Ensure the container element on your page where you're placing the form has enough space.
* **Styling Conflicts:**
* Your website's CSS might override some of the form's styles. This is less common with iFrames but can happen with JavaScript embeds. You might need to use more specific CSS selectors or adjust your site's styles.
* **Functionality Issues (e.g., submit button not working):**
* This could be due to JavaScript conflicts on your page or issues with the form configuration itself.
* **For more detailed solutions and specific error messages, please refer to our comprehensive** [**Troubleshooting Guide**](#troubleshooting-embedding-issues)**.**
By following these guidelines, you should be able to effectively embed your FluidForms on various platforms and provide a seamless experience for your users.
# Form Builder Elements
FluidForms offers a wide variety of field elements to build powerful and versatile forms. This guide details each element and its common configuration options.
## Basic Elements
### Single Line Text
* **Description:** Used for short text inputs like names, titles, subjects, etc.
* **Configuration:** Label, Placeholder Text, Required Field (Yes/No), Maximum character limit (if applicable).
* *Placeholder for Single Line Text example image*
### Paragraph Text
* **Description:** For longer text inputs like comments, messages, or detailed descriptions.
* **Configuration:** Label, Placeholder Text, Required Field (Yes/No), Maximum character or word limit (if applicable).
* *Placeholder for Paragraph Text example image*
### Email
* **Description:** Specifically designed for collecting email addresses. Often includes built-in validation to check for a valid email format.
* **Configuration:** Label, Placeholder Text, Required Field (Yes/No).
* *Placeholder for Email example image*
### Multiple Choice (Radio Buttons)
* **Description:** Allows users to select only one option from a predefined list. Each option is typically presented with a radio button.
* **Configuration:** Label, Options (add, remove, edit, and reorder choices), Required Field (Yes/No), Layout (e.g., vertical, horizontal, inline - if available).
* *Placeholder for Multiple Choice example image*
### Checkboxes
* **Description:** Allows users to select one or more options from a predefined list. Each option is presented with a checkbox.
* **Configuration:** Label, Options (add, remove, edit, and reorder choices), Required Field (Yes/No), Minimum/Maximum number of selections allowed (if applicable).
* *Placeholder for Checkboxes example image*
### Dropdown
* **Description:** Presents a list of options in a compact dropdown menu. Users can select one option from this list.
* **Configuration:** Label, Options (add, remove, edit, and reorder choices), Required Field (Yes/No), Default selected option (if applicable).
* *Placeholder for Dropdown example image*
## Advanced & Specialized Elements
### Number
* **Description:** For collecting numeric input, such as age, quantity, or scores.
* **Configuration:** Label, Placeholder Text, Required Field (Yes/No), Minimum and/or Maximum value, Allow decimal places (Yes/No), Step increment (if applicable).
* *Placeholder for Number example image*
### Date
* **Description:** Allows users to pick a specific date from a calendar-style picker.
* **Configuration:** Label, Required Field (Yes/No), Date format (e.g., MM/DD/YYYY, DD/MM/YYYY), Default date (e.g., today's date), Date range restrictions (min/max selectable dates).
* *Placeholder for Date example image*
### Time
* **Description:** Allows users to select a specific time, often using a time picker interface.
* **Configuration:** Label, Required Field (Yes/No), Time format (e.g., 12-hour with AM/PM, 24-hour), Minute step (e.g., 15-minute intervals).
* *Placeholder for Time example image*
### File Upload
* **Description:** Allows users to upload files (e.g., documents, images, videos) through the form. *(Note: This may be a Pro/Premium feature as suggested by `troubleshooting.md` and `features.tsx`.)*
* **Configuration:** Label, Required Field (Yes/No), Allowed file types (e.g., .jpg, .png, .pdf, .docx), Maximum file size limit (e.g., 5MB, 10MB), Maximum number of files allowed per field.
* *Placeholder for File Upload example image*
### Rating
* **Description:** Allows users to provide a rating, typically using a series of icons like stars or hearts.
* **Configuration:** Label, Required Field (Yes/No), Number of icons (e.g., 5 stars, 10 stars), Icon type (e.g., star, heart, thumbs up - if customizable), Custom labels for rating values (e.g., "Poor" to "Excellent").
* *Placeholder for Rating example image*
### Payment Field
* **Description:** Used to collect payments or donations directly within the form. Requires integration with a payment gateway (e.g., Stripe, PayPal). *(Note: This is often a Pro/Premium feature.)*
* **Configuration:** Label, Item Name/Description, Amount (can be fixed, user-defined, or selected from options), Currency, Link to payment gateway setup and management.
* *Placeholder for Payment Field example image*
### Section Break / Header
* **Description:** A non-input element used to visually organize the form into logical sections. It can include a title and descriptive text to guide the user.
* **Configuration:** Main Heading Text, Sub-heading or Descriptive Text, Visual styling options (if available).
* *Placeholder for Section Break example image*
### Hidden Field
* **Description:** A field that is not visible to the end-user filling out the form. It's used to store and submit data that you don't want the user to see or edit, such as tracking codes, pre-filled information from URL parameters, or user IDs.
* **Configuration:** Field Name/ID (for internal reference), Default Value (can be static text or dynamically populated via URL parameters or other logic).
* *Placeholder for Hidden Field example image*
***
*This list covers many common form elements available in FluidForms. The specific options and availability might vary, so always refer to the form builder interface for the most up-to-date elements and their configurations.*
# Configuring Your Form Settings
Once you've designed your form, you can configure various settings to control its behavior, notifications, and what happens after submission. These settings are typically found in a "Settings," "Setup," or "Actions" tab within the form builder or form management area for a specific form.
*Placeholder for image:*
## General Form Information
### Form Name
* **Purpose:** Set an internal name for your form. This name is used for your reference within the FluidForms dashboard, helping you easily identify and manage your forms.
* **How to:** This is configurable in the Form Settings page in the form builder. For example, you might name it "Website Contact Form" or "Spring Event Registration."
## Email Notifications
Stay informed about new submissions by configuring email notifications. This feature is crucial for timely follow-ups.
### Enabling and Configuring Notifications
* **How to Enable/Disable:** Look for a toggle switch or checkbox, often labeled "Enable Email Notifications" or "Send email notifications for new responses."
* **Recipient Email Addresses:** Specify one or more email addresses that should receive a notification when a form is submitted.
* You can typically add your own email or the email of a team member.
* *Pro users can configure up to 5 notification email addresses.*
* **Troubleshooting:** If you're not receiving notifications, check your spam folder and ensure the notification feature is enabled and the recipient email addresses are correct.
### Customizing Notification Emails
* Depending on your plan and FluidForms' capabilities, you might be able to customize the notification emails:
* **Subject Line:** Set a custom subject for the notification email to make it easier to identify and filter (e.g., "New Submission: \[Form Name]").
* **Email Body:** Customize the notification email body to include additional information for your notification recipients.
## After Submission Actions
Control what happens immediately after a user successfully submits your form. This is key for user experience and providing clear feedback.
### On-Screen Confirmation Message
* **Purpose:** Display a message directly on the page (or within the form area) immediately after the user clicks "Submit."
* **How to:** Enter your desired message in a text box. Examples:
* "Thank you for contacting us! We'll be in touch within 24 hours."
* "Your registration is confirmed. We've sent details to your email."
* **Best Practice:** Keep the message concise and informative.
### Redirect to a URL
* **Purpose:** Automatically send users to a different webpage after they submit the form. This is highly effective for:
* Directing users to a dedicated "Thank You" page on your website.
* Providing further information or resources.
* Offering a download or next steps.
* **How to:** Enter the full URL (e.g., `https://yourwebsite.com/thank-you`) of the page you want to redirect users to.
* *Custom redirects is a Pro feature.*
### Close Form on a Specific Date/Time
* **Purpose:** Automatically stop accepting submissions after a set date and time. Useful for deadlines, event registrations, or limited-time offers.
* **How to:** Look for the "Close form" options in the Form Settings page.
### What Happens When Limits Are Reached or Form is Closed
* Typically, the form will become inactive, and a message will be displayed to users attempting to access it (e.g., "This form is no longer accepting submissions.").
## Saving and Publishing Your Form
Ensure your form and its settings are live and active.
* **Saving Settings:** After making any changes to your form's settings, be sure to click the "Save form" button regularly.
By carefully configuring these settings, you can enhance your form's functionality, streamline your workflow for handling submissions, improve user experience, and protect against spam.
# Managing Form Submissions
Once your form starts collecting responses, FluidForms provides tools to view, manage, and export this valuable data. Effectively managing your submissions is key to making the most of the information you collect.
## Accessing Your Submissions
To view the data submitted through a specific form:
1. **Navigate to the "Forms" Section:** From your main FluidForms dashboard, go to the "Forms" area where all your created forms are listed.
2. **Select Your Form:** Locate the form for which you want to see the submissions.
3. **Click the Submissions Link:** The submissions tab is available in the top navigation bar.
This action will take you to the submissions dashboard for that particular form, where all its collected entries are displayed.
## The Submissions Dashboard
The submissions dashboard provides an overview of all entries received for your form. It typically features:
* **Submissions Table/List:** A grid or list view where each row represents a single submission.
* **Key Information Columns:** You'll see columns displaying essential information at a glance, such as the submission date/time, and often a few key fields from the form itself (e.g., Name, Email).
* **Pagination:** If your form has a large number of submissions, they will be broken down into multiple pages for easier navigation.*Placeholder for image:*
## Managing Submissions
FluidForms provides tools to help you organize and maintain your submission data:
### Archive Submissions
* **Purpose:** Archive test entries, spam, or irrelevant submissions.
* **How to:**
1. In the submissions list, select one or more submissions you wish to archive (using checkboxes next to each entry).
2. Click the Actions > Archive button.
* **Important Note:** **Archiving submissions does not delete them.** You can always view archived submissions by toggling the "View archived submissions" button.
## Exporting Submissions
Exporting submission data is a crucial feature, allowing you to use your collected information in other applications like spreadsheet software (Excel, Google Sheets), CRM systems, or for backup purposes.
1. **Choose which submissions to export.** By default, all submissions will be exported.
2. **Click Export to CSV button:** In the submissions dashboard for your form, look for an "Export to CSV" button.
3. The system will process your request, and the file will be downloaded to your computer.
## Email Notifications for Submissions
Remember that you can configure email notifications to be alerted immediately when new submissions are received. This is set up within each form's specific settings.
* For detailed instructions, please refer to: [Configuring your form settings](/basics/configuring-your-form-settings).
By utilizing these submission management features, you can effectively track, organize, and leverage the data you gather through FluidForms.
# Creating Multi-Page Forms
For longer forms, or to organize questions into logical sections, FluidForms allows you to create multi-page (or multi-step) forms. This can significantly improve the user experience and form completion rates by making complex forms feel less daunting.
{% hint style="success" %}
*Multi-page forms are a Pro feature.*
{% endhint %}
## Why Use Multi-Page Forms?
Breaking a long form into multiple smaller pages offers several advantages:
* **Improved User Experience:** Users are presented with fewer questions at a time, making the form feel less overwhelming and easier to digest.
* **Increased Completion Rates:** By reducing initial perceived effort, users are more likely to start and complete the form.
* **Better Organization:** You can group related questions into logical sections or steps, creating a clearer flow for the user.
* **Progress Indication:** Users can often see how far they've progressed (e.g., "Step 2 of 4"), which can motivate them to continue and finish.
* **Reduced Abandonment:** When users see a clear path forward and their progress, they are less likely to abandon the form midway.
## Creating Pages in Your Form
The process of creating multiple pages usually involves adding specific elements within the form builder:
1. **Access the Form Builder:** Open the form you wish to edit or start a new one.
2. **Adding a Page**
* In the form builder's fields list, click the "Add Page" button to add a new page.
* Add relevant form fields to this page as desired.
## Navigation Between Pages
FluidForms typically handles the basic navigation for multi-page forms automatically:
* **"Next" and "Previous" Buttons:** Standard "Next" (or "Continue") and "Previous" (or "Back") buttons are usually automatically added at the bottom of each page to allow users to move through the form.
## Conditional Page Logic (Advanced)
Conditional logic can also extend to page navigation in advanced scenarios, creating a more dynamic form experience:
* **Concept:** Based on a user's response to a specific question, you can direct them to a different subsequent page, skipping irrelevant pages. For example:
* If a user answers "Yes" to "Are you applying for a specific grant?", they might be taken to Page 3 (Grant Details).
* If they answer "No," they might skip Page 3 and go directly to Page 4 (General Information).
* **Setup (if available):**
* You can configure conditional page logic in the Logic tab of the form builder.
* You would define a rule: "If \[Field X] has \[Value Y], then jump to \[Page Z]."
Multi-page forms are a powerful tool for making complex data collection processes more user-friendly and efficient. By breaking your form into logical, manageable steps, you can significantly improve the experience for your users and likely see better completion rates.
# Styling and Customizing Your Forms
FluidForms provides several options to customize the look and feel of your forms, ensuring they integrate seamlessly with your website and brand. A well-styled form can improve user experience and reinforce your brand identity.
## Accessing Customization Options
Form styling options are typically found within the form builder interface. Look for the Design tab in the navigation bar.
## Key Customization Areas
FluidForms allows you to tailor various aspects of your form's appearance:
### Colors
Colors play a crucial role in branding and visual appeal. You can often customize:
* **Background Color:** Set the overall background color for the form container.
* **Text Color:** Define the color for labels, descriptions, help text, and user input text.
* **Button Color:** Customize the background and text color of the submit button and potentially other interactive buttons.
### Fonts
Consistent typography helps maintain brand identity. FluidForms offers options like:
* **Font Size:** Adjust the size of various text elements like labels, input text, and button text.
### Button Styling
The submit button is a critical call to action. Customization options often include:
* **Button Text:** Easily change the text displayed on the button (e.g., "Submit," "Send Your Message," "Register Now").
* **Button Colors:** Set distinct background and text colors for the button in its normal, hover, and active states.
* **Button Shape:** Options for rounded corners (border-radius) or square corners.
* **Button Size:** Adjust the button's height, width (e.g., full-width, auto), and internal padding.*Placeholder for image:*
By thoughtfully utilizing these styling and customization options, you can create forms that are not only functional for data collection but also visually appealing, user-friendly, and perfectly aligned with your brand's aesthetic.
# Link Canva Account
Linking your Canva account to your FluidForms account allows you to access forms and settings across the both the FluidForms dashboard and the FluidForms Canva app.
To do so:
1. Open the FluidForms Canva app
2. Click the Upgrade link at the bottom of the app
3. On the page that is opened, click the "**Link Canva Account**" button:
4. Login with your FluidForms account. If you are already logged in, this step won't be required.
5. Once complete, refresh Canva.
