# Table of Contents - [Quickstart | Feathery Docs](#quickstart-feathery-docs) - [How to Set Field Values | Feathery Docs](#how-to-set-field-values-feathery-docs) - [Form Fields | Feathery Docs](#form-fields-feathery-docs) - [Hidden Fields | Feathery Docs](#hidden-fields-feathery-docs) - [Custom Field Input Format | Feathery Docs](#custom-field-input-format-feathery-docs) - [Link Fields Across Forms | Feathery Docs](#link-fields-across-forms-feathery-docs) - [Elements | Feathery Docs](#elements-feathery-docs) - [Build Forms | Feathery Docs](#build-forms-feathery-docs) - [PDF Viewer | Feathery Docs](#pdf-viewer-feathery-docs) - [Button | Feathery Docs](#button-feathery-docs) - [Progress Bar | Feathery Docs](#progress-bar-feathery-docs) - [Container | Feathery Docs](#container-feathery-docs) - [Image | Feathery Docs](#image-feathery-docs) - [Text | Feathery Docs](#text-feathery-docs) - [Video | Feathery Docs](#video-feathery-docs) - [Basic | Feathery Docs](#basic-feathery-docs) - [Tooltip | Feathery Docs](#tooltip-feathery-docs) - [(Optional) Require Auth for Onboarding Steps | Feathery Docs](#-optional-require-auth-for-onboarding-steps-feathery-docs) - [Purchase Products | Feathery Docs](#purchase-products-feathery-docs) - [Connect to Stripe | Feathery Docs](#connect-to-stripe-feathery-docs) - [Build a Payment Flow | Feathery Docs](#build-a-payment-flow-feathery-docs) - [Collect Payment Method | Feathery Docs](#collect-payment-method-feathery-docs) - [Email Protection | Cloudflare](#email-protection-cloudflare) --- # Quickstart | Feathery Docs ### [](https://docs.feathery.io/#creating-your-form) Creating your form #### [](https://docs.feathery.io/#id-1.-create-a-form) 1\. Create a form After signing up for your free [Feathery](https://www.feathery.io/) account, you can choose a template to create your first form. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FBp1MMydLmULhGcP4hrld%252Fdocs_start2.gif%3Falt%3Dmedia%26token%3D78bcc51d-c041-49c2-b8e2-cecdf9676b3a&width=768&dpr=4&quality=100&sign=fe4df03b&sv=2) Check out the **Sample Guide** form in your new organization to learn your way around. #### [](https://docs.feathery.io/#id-2.-customize-your-form) 2\. Customize your form Next, you'll be redirected into the editor. You can add form elements from the left side panel, and by clicking on the elements in your form template, you'll be able to edit their properties and styles on the right side panel. You can also update your form layout by adding, removing, and splitting cells. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252Fvv3dejwQ8UsQEUEPzfcr%252Fdocs_customize2.gif%3Falt%3Dmedia%26token%3D6f0a318b-1ca5-4abf-acec-d68cca5f1df2&width=768&dpr=4&quality=100&sign=63d96ef7&sv=2) #### [](https://docs.feathery.io/#id-3.-publish) 3\. Publish The editor autosaves your form for you as a working draft. You can make changes to it over multiple sessions until you're ready to publish by pressing the `Publish` button in the upper right of your screen. To share, click `Live Form`, which will open a new tab with a unique URL for your form that you can copy and paste. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FHoC2LcG7Oa49NG6H2yVX%252Fdocs_publish3.gif%3Falt%3Dmedia%26token%3D81864fa8-a5dc-4114-b1c5-be979537ded2&width=768&dpr=4&quality=100&sign=3f75b754&sv=2) #### [](https://docs.feathery.io/#browse-our-templates) Browse our templates [](https://www.feathery.io/templates/signup-login-flow) ![Cover](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FJOENfZMnS55UIUXvrj7m%252FSign%2520In%2520and%2520Up.jpg%3Falt%3Dmedia%26token%3D8fb17642-a548-4ef5-9bdb-f4b85caa71ef&width=490&dpr=4&quality=100&sign=f658e8cb&sv=2) **Sign In & Sign Up** [](https://www.feathery.io/templates/customer-onboarding-flow) ![Cover](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FOMDzxxNPEh1jZQta8iP0%252FSimple%2520Onboarding.png%3Falt%3Dmedia%26token%3Da78fe1d8-9a51-4342-9191-d0bbf006f345&width=490&dpr=4&quality=100&sign=1f52369b&sv=2) **Onboarding** [](https://www.feathery.io/templates/waitlist-signup) ![Cover](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252Fq31xph6T8HnD4iIIxpgc%252FSimple%2520Waitlist.png%3Falt%3Dmedia%26token%3D49d40a91-864e-4453-ba96-7cf8cb170528&width=490&dpr=4&quality=100&sign=ef006f10&sv=2) **Waitlist Signup** ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FS32ATbHEGlpvlS5KUepn%252Ffeathery-slack-community3.png%3Falt%3Dmedia%26token%3Df6fd6d0e-b7a5-43c9-aca3-209f1f0c6dc3&width=40&dpr=4&quality=100&sign=15381717&sv=2) Join our [community](https://community.feathery.io/) to get support from the Feathery team. [NextForm Fields](https://docs.feathery.io/platform/form-fields) Last updated 1 year ago Was this helpful? Was this helpful? --- # How to Set Field Values | Feathery Docs Aside from the user manually entering values for form fields, there are a variety of ways you can automatically set the values for both form and hidden fields. [](https://docs.feathery.io/platform/form-fields/set-field-values#default-value) Default Value --------------------------------------------------------------------------------------------------- You can set the default value of your field by selecting it in the `Designer`, going to the `Properties` tab, and setting a value under `Default Value`. [](https://docs.feathery.io/platform/form-fields/set-field-values#url-parameters) URL Parameters ----------------------------------------------------------------------------------------------------- If you chose to send your users to your Feathery-hosted form rather than embed your form, you can pre-populate fields in your form by adding the values to your URL. The structure of field values set from our hosted form URLs looks like `form.feathery.io/to/
/?=`. To specify multiple values for a given field, you can specify the query parameter in the URL multiple times. [](https://docs.feathery.io/platform/form-fields/set-field-values#custom-logic) Custom Logic ------------------------------------------------------------------------------------------------- Using Feathery's [custom logic](https://docs.feathery.io/platform/build-forms/advanced-logic) feature, you can update field values without writing code or with basic Javascript. [](https://docs.feathery.io/platform/form-fields/set-field-values#embed-library) Embed Library --------------------------------------------------------------------------------------------------- If you've embedded your form via Feathery's [embed library](https://docs.feathery.io/develop/react) , you can use [a function](https://docs.feathery.io/develop/react/api-guide/setfieldvalues) to easily set field values for that user. [](https://docs.feathery.io/platform/form-fields/set-field-values#public-api) Public API --------------------------------------------------------------------------------------------- You can send requests to Feathery's [public API](https://api-docs.feathery.io/#create-field-value-for-user) to update field values for any of your users. [](https://docs.feathery.io/platform/form-fields/set-field-values#third-party-integrations) Third-Party Integrations ------------------------------------------------------------------------------------------------------------------------- A number of our data enrichment integrations, such as [Plaid](https://www.feathery.io/integrations/plaid) , will automatically populate the fields that you map to their data properties when the user activates them. [PreviousHidden Fields](https://docs.feathery.io/platform/form-fields/hidden-fields) [NextLink Fields Across Forms](https://docs.feathery.io/platform/form-fields/link-fields-across-forms) Last updated 1 year ago Was this helpful? * [Default Value](https://docs.feathery.io/platform/form-fields/set-field-values#default-value) * [URL Parameters](https://docs.feathery.io/platform/form-fields/set-field-values#url-parameters) * [Custom Logic](https://docs.feathery.io/platform/form-fields/set-field-values#custom-logic) * [Embed Library](https://docs.feathery.io/platform/form-fields/set-field-values#embed-library) * [Public API](https://docs.feathery.io/platform/form-fields/set-field-values#public-api) * [Third-Party Integrations](https://docs.feathery.io/platform/form-fields/set-field-values#third-party-integrations) Was this helpful? --- # Form Fields | Feathery Docs Fields are the fundamental unit of data in Feathery. A field can be used to collect a piece of information from one of your end users. Field IDs must be unique across all fields and across forms. Make sure to give your field a readable name so you can easily identify it. The max length of a form or hidden field ID is 128 characters. [](https://docs.feathery.io/platform/form-fields#form-vs-hidden-field) Form vs Hidden Field ------------------------------------------------------------------------------------------------ Feathery supports two types of fields, **form fields** and **hidden fields**. ### [](https://docs.feathery.io/platform/form-fields#form-fields) [Form Fields](https://docs.feathery.io/platform/build-forms/elements/fields) Form fields are the fields visible to your end users who fill them out. These are added to your form from the visual editor as [text fields](https://docs.feathery.io/platform/build-forms/elements/fields/text-field) , [dropdowns](https://docs.feathery.io/platform/build-forms/elements/fields/dropdown) , [file uploads](https://docs.feathery.io/platform/build-forms/elements/fields/file-upload) , and more. ### [](https://docs.feathery.io/platform/form-fields#hidden-fields) [Hidden Fields](https://docs.feathery.io/platform/form-fields/hidden-fields) Hidden fields are fields that your end users don't directly fill out, but they can be used to control the behavior of your form and run custom logic. [Learn more](https://docs.feathery.io/platform/form-fields/hidden-fields) [](https://docs.feathery.io/platform/form-fields#resources) Resources -------------------------------------------------------------------------- * Different ways to set a field value * [Link a field across multiple forms](https://docs.feathery.io/platform/form-fields/link-fields-across-forms) They can be populated via an integration like [Plaid](https://www.feathery.io/integrations/plaid) , set via our [API](https://api-docs.feathery.io/#create-field-value-for-user) or [embed SDK](https://docs.feathery.io/develop/react) , and even passed in through Feathery-hosted form URLS. The structure of field values set from our hosted form URLs looks like `form.feathery.io/to//?=`. To specify multiple values for a given field, you can specify the query parameter in the URL multiple times. [PreviousQuickstart](https://docs.feathery.io/) [NextHidden Fields](https://docs.feathery.io/platform/form-fields/hidden-fields) Last updated 1 year ago Was this helpful? * [Form vs Hidden Field](https://docs.feathery.io/platform/form-fields#form-vs-hidden-field) * [Form Fields](https://docs.feathery.io/platform/form-fields#form-fields) * [Hidden Fields](https://docs.feathery.io/platform/form-fields#hidden-fields) * [Resources](https://docs.feathery.io/platform/form-fields#resources) Was this helpful? --- # Hidden Fields | Feathery Docs Hidden fields are fields that aren't visible to your end users and can't be directly filled out from the form. However, you can use them to control the behavior of your form and run custom logic. [](https://docs.feathery.io/platform/form-fields/hidden-fields#example) Example ------------------------------------------------------------------------------------ You might want to pre-populate a hidden field that sets the industry of your end user accessing the form. Based on the industry, you create [conditional logic](https://docs.feathery.io/platform/build-forms/logic/navigate-steps-conditionally) in your form that takes them to different questions that are industry specific. [](https://docs.feathery.io/platform/form-fields/hidden-fields#creating-hidden-fields) Creating Hidden Fields ------------------------------------------------------------------------------------------------------------------ To create a hidden field, go to your form settings and click the `Data Tracking`tab. Then, select `Edit Hidden Fields` button to access the field selector interface. Click `Create New` to create a new hidden field that you can use. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FyDx90HxuRqwPf9dyj462%252FScreenshot%25202025-02-11%2520at%252012.23.04%25E2%2580%25AFPM.png%3Falt%3Dmedia%26token%3D9cf8dc33-d973-4aa9-8612-16fc96abafc3&width=768&dpr=4&quality=100&sign=1e49009c&sv=2) They can be populated via an integration like [Plaid](https://www.feathery.io/integrations/plaid) , set via our [API](https://api-docs.feathery.io/#create-field-value-for-user) or [embed SDK](https://docs.feathery.io/develop/react) , and even passed in through Feathery-hosted form URLS. The structure of field values set from our hosted form URLs looks like `form.feathery.io/to//?=`. To specify multiple values for a given field, you can specify the query parameter in the URL multiple times. Hidden fields starting with the text "feathery." are reserved. You will not be able to create a field named this way nor modify one of the existing fields named this way. [](https://docs.feathery.io/platform/form-fields/hidden-fields#view-hidden-field-results) View Hidden Field Results ------------------------------------------------------------------------------------------------------------------------ Your hidden field results can be viewed the same way as your form field results, within the `Results` tab of the Feathery dashboard. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252F1mcnmzw2TIXcIw7l0WdA%252FScreenshot%25202023-05-23%2520at%25203.13.58%2520PM.png%3Falt%3Dmedia%26token%3D97cd62f3-62c4-4370-93d6-6f6d85d471a1&width=768&dpr=4&quality=100&sign=f7223eae&sv=2) [PreviousForm Fields](https://docs.feathery.io/platform/form-fields) [NextHow to Set Field Values](https://docs.feathery.io/platform/form-fields/set-field-values) Last updated 11 months ago Was this helpful? * [Example](https://docs.feathery.io/platform/form-fields/hidden-fields#example) * [Creating Hidden Fields](https://docs.feathery.io/platform/form-fields/hidden-fields#creating-hidden-fields) * [View Hidden Field Results](https://docs.feathery.io/platform/form-fields/hidden-fields#view-hidden-field-results) Was this helpful? --- # Custom Field Input Format | Feathery Docs To customize the allowed input for a field, you can use the [Text Field](https://docs.feathery.io/platform/build-forms/elements/fields/text-field) , which allows you to configure properties like max and min length, allowed characters, custom prefix & suffix, and more. [PreviousLink Fields Across Forms](https://docs.feathery.io/platform/form-fields/link-fields-across-forms) [NextBuild Forms](https://docs.feathery.io/platform/build-forms) Last updated 9 months ago Was this helpful? Was this helpful? --- # Link Fields Across Forms | Feathery Docs Each Feathery field is available across all forms and integrations. If you want to use a field across multiple forms, look for the same field ID. The ID of a field doesn't change across forms. [](https://docs.feathery.io/platform/form-fields/link-fields-across-forms#form-fields) Form Fields ------------------------------------------------------------------------------------------------------- Any field you add to a form can be linked to any other form field, whether it's on the current form or a different form. If two fields are linked, they share the same data but can be styled separately. This means if one of your linked fields is filled out, the data will show up for your user on the other linked field too. Linked form fields also share the same data properties, such as max length, allowed characters, etc. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252Fc2zekdIduRlHvqq5Peym%252FScreenshot%25202023-05-03%2520at%25203.03.34%2520PM.png%3Falt%3Dmedia%26token%3Dcdb292d4-fb78-4e18-a705-ebb647d22acf&width=768&dpr=4&quality=100&sign=e5c3538a&sv=2) [](https://docs.feathery.io/platform/form-fields/link-fields-across-forms#hidden-fields) Hidden Fields ----------------------------------------------------------------------------------------------------------- Hidden fields are by default available across all of your forms. Just look for the relevant field when choosing your hidden field to use. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252F215Fyj72yhFFKbOeprht%252FScreenshot%25202023-05-03%2520at%25202.59.00%2520PM.png%3Falt%3Dmedia%26token%3Dae6506f3-0595-4f31-a632-f806760b0542&width=768&dpr=4&quality=100&sign=46e6c001&sv=2) [PreviousHow to Set Field Values](https://docs.feathery.io/platform/form-fields/set-field-values) [NextCustom Field Input Format](https://docs.feathery.io/platform/form-fields/custom-field-input-format) Last updated 9 months ago Was this helpful? * [Form Fields](https://docs.feathery.io/platform/form-fields/link-fields-across-forms#form-fields) * [Hidden Fields](https://docs.feathery.io/platform/form-fields/link-fields-across-forms#hidden-fields) Was this helpful? --- # Elements | Feathery Docs **Elements** are the components that make up your form. They include: * Basic Elements * These components do not collect data but have other uses such as improving its visual presentation, triggering actions like navigation, or showing form progression. * Fields * Something on your form that the user can interact with to input data. They can be dragged and dropped in from the left selection panel. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FmHoDmpxueAKS29mekYW1%252Fdocs_elements-overview.gif%3Falt%3Dmedia%26token%3D7066131a-fbea-4db4-aeaa-d605e3c1db3a&width=768&dpr=4&quality=100&sign=24ef8480&sv=2) [PreviousBuild Forms](https://docs.feathery.io/platform/build-forms) [NextBasic](https://docs.feathery.io/platform/build-forms/elements/basic) Last updated 1 year ago Was this helpful? Was this helpful? --- # Build Forms | Feathery Docs [](https://docs.feathery.io/platform/build-forms#design) Design -------------------------------------------------------------------- The Design tab is where you can: * Create responsive page layouts * Add and style your form elements * Create new steps * Set up conditional show/hide logic & navigation rules * Preview & publish your form Easily `**Undo**` and `**Redo**` changes with the buttons in the top right corner next to `**Publish**` #### [](https://docs.feathery.io/platform/build-forms#how-do-form-layouts-work) How do form layouts work? For simple forms, just drag elements in directly below and above each other. For more complex layouts, use containers to group elements together and edit the container styles to control alignment, gaps, margin, & padding. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FUtb0F5FXvggaHYHPDOUv%252Fdocs_gaps-element.gif%3Falt%3Dmedia%26token%3D371bc22f-ec3e-49bb-91f4-9a4468642980&width=768&dpr=4&quality=100&sign=295c927a&sv=2) Containers can also be nested in other containers to create hierarchical structures for more complex layouts. Two designers can simultaneously edit different steps of the form, but they cannot edit the same step at the same time. [Design](https://docs.feathery.io/platform/build-forms/design) [](https://docs.feathery.io/platform/build-forms#flow) Flow ---------------------------------------------------------------- In the Flow tab, you can: * Add and edit step connections * Customize your form navigation rules * Add conditional logic for navigation Create a new connection by dragging from the + on the step. This will create an arrow to the step you need to connect. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FoT4HyjFSug4f74GqX4MT%252Fbuilding-flow.gif%3Falt%3Dmedia%26token%3D4b0df12c-0bbc-4b14-b147-ce4fc7d9405a&width=768&dpr=4&quality=100&sign=f840a9c1&sv=2) [](https://docs.feathery.io/platform/build-forms#logic) Logic ------------------------------------------------------------------ The `Logic` tab is where you can set up advanced behavior for your form, including calculations, custom Javascript, API connections, and more. Two designers can simultaneously edit different logic rules, but they cannot edit the same logic rule at the same time. [Logic](https://docs.feathery.io/platform/build-forms/logic) [](https://docs.feathery.io/platform/build-forms#results) Results ---------------------------------------------------------------------- The Results tab is where you can: * View and manage all form submissions * Review individual user submissions * Download submissions as a CSV file * Upload submissions from a CSV file * Locate user IDs ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FR3TzXB9B2dKr7lolQYkr%252Fbuilding-results.gif%3Falt%3Dmedia%26token%3Dbd558d7b-3c9f-4b50-810b-94cf299bcd31&width=768&dpr=4&quality=100&sign=71742c5a&sv=2) #### [](https://docs.feathery.io/platform/build-forms#upload-submissions-from-csv-file) Upload Submissions From CSV File Feathery supports the ability to bulk upload submission data from a CSV file: ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252Fwj4LnRCP99VtzKMLWVSq%252FScreenshot%25202024-10-16%2520at%252010.47.24%25E2%2580%25AFAM.png%3Falt%3Dmedia%26token%3D00c9a849-062f-49b2-a7ef-9425c5d996c4&width=768&dpr=4&quality=100&sign=142cfd34&sv=2) * In your CSV file, the first row must contain a 'User ID**'** (case-insensitive) column along with Feathery field IDs from your form. Each subsequent row represents a submission entry. * If an existing User ID is specified, the existing submission for that user will be updated. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252F2V0ENWMxbr3sphOjbJ6Y%252FScreenshot%25202024-10-16%2520at%252010.36.13%25E2%2580%25AFAM.png%3Falt%3Dmedia%26token%3D7f6070c1-6ebf-4c63-a420-b9c0f200dc84&width=768&dpr=4&quality=100&sign=8acee08e&sv=2) [](https://docs.feathery.io/platform/build-forms#settings) Settings ------------------------------------------------------------------------ The Settings tab is where you can: * Edit the form name * Switch your form theme * Edit the URL the form redirects to upon completion * Find the form ID, used to embed your form * Configure how form validation errors are displayed to the user * [Built In](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation) : browser-native, non-stylable error messages that float on the form * Inline: Feathery-styled error messages that appear within the form flow * Toggle general user tracking * If on, users will automatically be tracked from one session to another, including across different forms. All of their submitted data will appear as one submission. If off, each session will count as a separate submission. * If user tracking is on, you can optionally configure location tracking * If on, users will automatically start from the step they left off when they leave the form and come back. * If user tracking is on, you can optionally configure data tracking * If on, users will automatically see their previously filled-in form data when they leave the form and come back. * **Note that the user tracking config applies across all forms but location and data tracking can be configured per-form.** * Change the theme associated with the form * And much more. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FPfdebIY4V1jWpftI0Y5v%252Fbuilding-settings.gif%3Falt%3Dmedia%26token%3Df0a1d904-f7e6-487d-a43f-81b24872483e&width=768&dpr=4&quality=100&sign=7bcabd86&sv=2) [PreviousCustom Field Input Format](https://docs.feathery.io/platform/form-fields/custom-field-input-format) [NextElements](https://docs.feathery.io/platform/build-forms/elements) Last updated 7 months ago Was this helpful? * [Design](https://docs.feathery.io/platform/build-forms#design) * [Flow](https://docs.feathery.io/platform/build-forms#flow) * [Logic](https://docs.feathery.io/platform/build-forms#logic) * [Results](https://docs.feathery.io/platform/build-forms#results) * [Settings](https://docs.feathery.io/platform/build-forms#settings) Was this helpful? --- # PDF Viewer | Feathery Docs Use an [Image](https://docs.feathery.io/platform/build-forms/elements/basic/image) element to show the PDF that users upload to a file upload field. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252Fv95VWn7dEgsgJtDPcTmf%252Fimage.png%3Falt%3Dmedia%26token%3Dcd7d7e84-ed4f-44ff-9924-805da1262adc&width=768&dpr=4&quality=100&sign=94c543ae&sv=2) An image element, mapped to and conditionally rendered by, a file upload field. [PreviousImage](https://docs.feathery.io/platform/build-forms/elements/basic/image) [NextVideo](https://docs.feathery.io/platform/build-forms/elements/basic/video) Last updated 1 year ago Was this helpful? Was this helpful? --- # Button | Feathery Docs The `Button` component provides a clickable button for [triggering actions](https://docs.feathery.io/platform/build-forms/actions) . You can also set various behaviors on it like showing loaders, triggering a CAPTCHA, setting disabled / error / selected / hover styles, and more. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FXwmG0rOoldu5y1YXhDEf%252Fdocs_element-button.png%3Falt%3Dmedia%26token%3D346fbc4c-2c91-4b29-84a8-7800feea8b0e&width=768&dpr=4&quality=100&sign=be2d1460&sv=2) **Creating a back button** Set the button click action to `**Go to Previous Step**` ### [](https://docs.feathery.io/platform/build-forms/elements/basic/button#example) For Developers The Feathery SDK and API reference button components with `type` equal to `button` [PreviousContainer](https://docs.feathery.io/platform/build-forms/elements/basic/container) [NextText](https://docs.feathery.io/platform/build-forms/elements/basic/text) Last updated 2 years ago Was this helpful? Was this helpful? --- # Progress Bar | Feathery Docs The `Progress Bar` component displays a progress bar and a percentage indicating how much of the form has been completed. The percentage defaults to an automatic value based on the user's progress, but it can also be manually set in the Properties panel. ![Screenshot of a progress bar element selected.](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FS50ysx0ynIcLbVGP56XU%252Fdocs_element-progress.png%3Falt%3Dmedia%26token%3D15ca56fb-04e5-4e82-aeec-8ded343e4208&width=768&dpr=4&quality=100&sign=69673ef1&sv=2) ### [](https://docs.feathery.io/platform/build-forms/elements/basic/progress-bar#example) For Developers The Feathery SDK and API reference progress bar components with `type` equal to `progress_bar` [PreviousText](https://docs.feathery.io/platform/build-forms/elements/basic/text) [NextImage](https://docs.feathery.io/platform/build-forms/elements/basic/image) Last updated 2 years ago Was this helpful? Was this helpful? --- # Container | Feathery Docs The `Container` component provides a container for organizing elements, styling and triggering actions. It can be clicked to trigger a wide variety of [form actions](https://docs.feathery.io/platform/build-forms/actions) . You can give it a non-unique ID, to be sent back in [callback functions](https://docs.feathery.io/develop/react/api-guide/form/event-handlers) that it triggers or used in locating [custom components](https://docs.feathery.io/develop/react/api-guide/form/custom-jsx-components#customcomponents) . ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FF1LfbPCboSHNAsTWL3jM%252Fdocs_element-container.png%3Falt%3Dmedia%26token%3D2ea0d0ea-e236-41fa-baa1-a6681d2b64e5&width=768&dpr=4&quality=100&sign=80588ef3&sv=2) [PreviousBasic](https://docs.feathery.io/platform/build-forms/elements/basic) [NextButton](https://docs.feathery.io/platform/build-forms/elements/basic/button) Last updated 2 years ago Was this helpful? Was this helpful? --- # Image | Feathery Docs The `Image` component displays an uploaded image in your form. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252F9ZxMBZZMAAL1D99LnMve%252Fdocs_element-image.png%3Falt%3Dmedia%26token%3D3cd0dcf7-27e2-4b5c-9454-cb31c8300521&width=768&dpr=4&quality=100&sign=74f55fc0&sv=2) ### [](https://docs.feathery.io/platform/build-forms/elements/basic/image#example) Image Source You may directly upload the image to be displayed or you can have the image be dynamically pulled from a form or hidden field. The image can be pulled from any field containing either an image file or a URL to an image file. This element also supports [displaying PDF files](https://docs.feathery.io/platform/build-forms/elements/basic/pdf-viewer) . ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252F7thHVqxqfvAjtNAORidu%252FScreenshot%25202024-07-12%2520at%25207.23.08%25E2%2580%25AFPM.png%3Falt%3Dmedia%26token%3Dddae84a2-0916-4b1c-a4bc-5b14ceb99525&width=768&dpr=4&quality=100&sign=3aaffb38&sv=2) ### [](https://docs.feathery.io/platform/build-forms/elements/basic/image#example-1) Repeating Images If the image element is repeating and is pulling its source image from either a repeating field or a hidden field containing an array of URLs, each repeat of the image element will pull its image from the corresponding value in the repeating field. ### [](https://docs.feathery.io/platform/build-forms/elements/basic/image#example-2) For Developers The Feathery SDK and API reference image components with `type` equal to `image` [PreviousProgress Bar](https://docs.feathery.io/platform/build-forms/elements/basic/progress-bar) [NextPDF Viewer](https://docs.feathery.io/platform/build-forms/elements/basic/pdf-viewer) Last updated 22 days ago Was this helpful? * [Image Source](https://docs.feathery.io/platform/build-forms/elements/basic/image#example) * [Repeating Images](https://docs.feathery.io/platform/build-forms/elements/basic/image#example-1) * [For Developers](https://docs.feathery.io/platform/build-forms/elements/basic/image#example-2) Was this helpful? --- # Text | Feathery Docs The `Text` element allows you to add custom text to your form. [Text variables](https://docs.feathery.io/platform/build-forms/logic/display-dynamic-text) can also be included to show dynamic, custom text. `Text` can also be clicked to trigger a wide variety of [form actions](https://docs.feathery.io/platform/build-forms/actions) . ![Screenshot of text element selected.](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FqjZIeK2nJJuBVD43gAyJ%252Fdocs_element-text.png%3Falt%3Dmedia%26token%3Df56d35d5-a64f-4620-9eb0-6667727f90e6&width=768&dpr=4&quality=100&sign=caa4f81a&sv=2) ### [](https://docs.feathery.io/platform/build-forms/elements/basic/text#example) For Developers The Feathery SDK and API reference text components with `type` equal to `text` [PreviousButton](https://docs.feathery.io/platform/build-forms/elements/basic/button) [NextProgress Bar](https://docs.feathery.io/platform/build-forms/elements/basic/progress-bar) Last updated 2 years ago Was this helpful? Was this helpful? --- # Video | Feathery Docs The `Video` component displays a video from a provided URL of either * A third-party hosted video, like a Youtube or Vimeo video * Your own custom-uploaded video, hosted somewhere like Amazon S3 For a custom-uploaded video, you can configure its autoplay/loop settings, video controls, and sound. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252Ffm0PkoDTyQznax2e0hC1%252FScreenshot%25202023-04-05%2520at%252010.01.27%2520PM.png%3Falt%3Dmedia%26token%3Dfa272ee9-29a5-4d0d-bf04-dd4742bbfd6c&width=768&dpr=4&quality=100&sign=a2a256b5&sv=2) ### [](https://docs.feathery.io/platform/build-forms/elements/basic/video#example) For Developers The Feathery SDK and API reference video components with `type` equal to `video` [PreviousPDF Viewer](https://docs.feathery.io/platform/build-forms/elements/basic/pdf-viewer) [NextTable](https://docs.feathery.io/platform/build-forms/elements/basic/table) Last updated 2 years ago Was this helpful? Was this helpful? --- # Basic | Feathery Docs Design your form with customizable components. ![Screenshot of button element selected.](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252F8pVG4hHOoS7vyxueRGeO%252Fdocs_element-basic.png%3Falt%3Dmedia%26token%3D243c7b57-6797-4d11-82f7-853a846d786e&width=768&dpr=4&quality=100&sign=b3f5d39&sv=2) ### [](https://docs.feathery.io/platform/build-forms/elements/basic#how-to-use-basic-elements) How to Use Basic Elements Drag your element to an empty container to customize it. #### [](https://docs.feathery.io/platform/build-forms/elements/basic#styles) **Styles** Modify the element padding, scale, typography, and color styles. Scroll to the bottom of the style menu to set Hover and Selected styles. #### [](https://docs.feathery.io/platform/build-forms/elements/basic#properties) **Properties** Customize element behaviors like click actions and more. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252F9uZAGzETUKrDvaQseh0m%252Fdocs_props2.png%3Falt%3Dmedia%26token%3De080723f-5ae3-476f-b94b-d9b88153228d&width=768&dpr=4&quality=100&sign=412edc0&sv=2) [Button](https://docs.feathery.io/platform/build-forms/elements/basic/button) [Image](https://docs.feathery.io/platform/build-forms/elements/basic/image) [Progress Bar](https://docs.feathery.io/platform/build-forms/elements/basic/progress-bar) [Text](https://docs.feathery.io/platform/build-forms/elements/basic/text) [PreviousElements](https://docs.feathery.io/platform/build-forms/elements) [NextContainer](https://docs.feathery.io/platform/build-forms/elements/basic/container) Last updated 1 year ago Was this helpful? Was this helpful? --- # Tooltip | Feathery Docs Tooltips are not discrete elements in Feathery. Instead, once you've added a field like a [text field](https://docs.feathery.io/platform/build-forms/elements/fields/text-field) to your form, you can edit its tooltip text in the `Style` tab. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FY309T9QZWoifd8t6E6K0%252FScreenshot%25202023-04-25%2520at%25209.58.47%2520AM.png%3Falt%3Dmedia%26token%3D261f7fbd-9d81-4b98-9693-e2c43fe38fd9&width=768&dpr=4&quality=100&sign=37a1211d&sv=2) [PreviousTable](https://docs.feathery.io/platform/build-forms/elements/basic/table) [NextFields](https://docs.feathery.io/platform/build-forms/elements/fields) Last updated 2 years ago Was this helpful? Was this helpful? --- # (Optional) Require Auth for Onboarding Steps | Feathery Docs Feathery's [integrations](https://www.feathery.io/integrations) provide support for multiple auth providers, but we will use Stytch for our examples here. Once you have set up your login and signup flow, you can revisit your auth integration settings to configure which steps in the form are only accessible after the user has logged in. Do **not** make your login and signup steps inaccessible. The common use case for this pattern is to protect onboarding steps you want the user to see after logging in. You can easily build a single Feathery form for login, signup, AND post-signup onboarding. We recommend using one of our [auth integrations](https://docs.feathery.io/guides/login-flow/connect-auth-integration) to disallow logged-out users from accessing your onboarding steps. In the `Integrations` tab, open Stytch to configure the settings for: 1. `Authentication required for...` lets you select which form steps require authentication. Following this example, you would select all steps containing your onboarding questions. 2. `Login Start Step` lets you configure which step the user is directed to after logging in. Following this example, you would select the first onboarding step. 3. `Logout Start Step` lets you configure which step the user is directed to after logging out. Following this example, you would select the `Sign In` step. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252F8WSfOANm4vqJgFjpGfOb%252Fauth3.png%3Falt%3Dmedia%26token%3Dd19f648b-8192-4f9e-aff7-12d16d62bfd4&width=768&dpr=4&quality=100&sign=7ed8530d&sv=2) In the `Flow` tab, you can see which steps are locked and protected by your authentication gate. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FwAUqQuRYKbKqUV5RtBln%252Fdocs_auth-gate.png%3Falt%3Dmedia%26token%3D166c5a85-10f1-49f7-b7e1-2c142c8d35a6&width=768&dpr=4&quality=100&sign=e66e8f1d&sv=2) [PreviousTwitter](https://docs.feathery.io/guides/login-flow/add-fields-actions/social-logins/twitter) [Next(Optional) Add Login Flow to Your Site](https://docs.feathery.io/guides/login-flow/add-login-to-site) Last updated 6 months ago Was this helpful? Was this helpful? --- # Purchase Products | Feathery Docs Once you have set up a [product selection interface](https://docs.feathery.io/guides/payment-flow/select-products-or-plans) and have your user choice(s) in hidden fields, you may use a button or container to trigger the payment/checkout. This is configured by adding a `Checkout Cart` action to the button (or container) as illustrated below. This action will cause the previously selected products to be purchased. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FgpfHb9sUgvrjSjdM2Ne7%252Fimage.png%3Falt%3Dmedia%26token%3D2a535f80-c527-4b73-92f6-23c9232c7571&width=768&dpr=4&quality=100&sign=811924ac&sv=2) Configuring a Purchase Products button in Feathery The `Checkout Cart` action triggers either a direct payment in Stripe or a redirect to a Stripe checkout page. This is determined by the previously configured Stripe integration setting for [How to collect payments](https://docs.feathery.io/guides/payment-flow/connect-to-stripe#toggle-payment-collection-method) . All Stripe products must be configured in the Stripe dashboard with a **default price** and currency. Products with both one-time and recurring price structures (i.e. subscriptions) are supported and may be purchased together. Feathery will auto-create a subscription in Stripe when products with a recurring price are purchased. [](https://docs.feathery.io/guides/payment-flow/purchase-products#promotion-codes) Promotion Codes ------------------------------------------------------------------------------------------------------- Currently, promotion codes are only available and supported when using Stripe checkout. Promotion codes are not supported on an in-form custom payment flow. [](https://docs.feathery.io/guides/payment-flow/purchase-products#tax) Tax ------------------------------------------------------------------------------- Feathery supports Stripe auto-calculation and charging for tax when integrating using Stripe checkout only. Set up all relevant tax registrations and tax codes in your Stripe dashboard in order to properly charge for tax. Your customer's address information is used in the Stripe tax calculation. Therefore, you may optionally setup your customer's address information in Stripe using [customer field mapping](https://docs.feathery.io/guides/payment-flow/connect-to-stripe#configure-stripe-customer-metadata-optional) . If you decide not to do this or your customers have incomplete address information in Stripe at checkout time, Feathery will configure the Stripe checkout to collect a complete customer billing address in order to accurately compute the tax. [PreviousCollect Payment Method](https://docs.feathery.io/guides/payment-flow/collect-payment-method) Last updated 1 year ago Was this helpful? * [Promotion Codes](https://docs.feathery.io/guides/payment-flow/purchase-products#promotion-codes) * [Tax](https://docs.feathery.io/guides/payment-flow/purchase-products#tax) Was this helpful? --- # Connect to Stripe | Feathery Docs After you create a form to add your payment flow into, your first step will be to configure the Stripe integration for the form. Follow these steps: [](https://docs.feathery.io/guides/payment-flow/connect-to-stripe#add-stripe-keys) Add Stripe Keys ------------------------------------------------------------------------------------------------------- Navigate to the Feathery form that you want to connect to Stripe. Click on the **Integrations** tab and find the Stripe integration. Open the Stripe integration by clicking on it. To configure, you must provide your Stripe test and live publishable and secret keys from an _activated_ Stripe account. The Stripe configuration screen is shown below. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252F8MhjYoTWJ2yVAtt366db%252Fimage.png%3Falt%3Dmedia%26token%3D4f192d4e-41ef-4746-8e09-9c38cc5c8e91&width=768&dpr=4&quality=100&sign=24e969c5&sv=2) Feathery's Stripe keys configuration The test keys will only be used while you're previewing / testing your Feathery form. The production keys are used on your live form. You can find the keys in your Stripe dashboard (dashboard.stripe.com) by searching for “api keys”. After entering all of the keys, you may connect the integration. Feathery will validate your connection at this time. [](https://docs.feathery.io/guides/payment-flow/connect-to-stripe#toggle-payment-collection-method) Toggle Payment Collection Method ----------------------------------------------------------------------------------------------------------------------------------------- Feathery offers [two ways of handling checkout and payment](https://docs.feathery.io/guides/payment-flow/collect-payment-method) . Choose your preferred method via the "How do you want to collect payments?" dropdown. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FRhOjxGDt5IY5mTh3GxCR%252Fimage.png%3Falt%3Dmedia%26token%3Dbcf53da8-0fe5-46db-9edc-958acb0f7dd6&width=768&dpr=4&quality=100&sign=4a62d972&sv=2) The Feathery-Stripe payment flow selection [](https://docs.feathery.io/guides/payment-flow/connect-to-stripe#configure-stripe-customer-metadata-optional) Configure Stripe Customer Metadata (Optional) ----------------------------------------------------------------------------------------------------------------------------------------------------------------- Feathery forms always perform Stripe operations such as save a payment method or make a purchase using a customer record in Stripe. If a Stripe customer record is not yet associated with the current form submission (and Feathery user) then one will be created by the Feathery Stripe integration. Perform some or all of the following only if you wish to customize how Feathery finds and configures Stripe customer records. 1. If you already have customer records in Stripe that you want your Feathery payment data to update, you may pass some type of identifier (Stripe Lookup Attribute) to your embedded Feathery form via the [embed library](https://docs.feathery.io/develop/react) . Typically the lookup attribute is passed as a hidden field value. This attribute is used to look up the existing Stripe customer record to use for the current user's payment activity. There are two options for the Stripe Lookup Attribute. It may either be the standard Stripe customer ID or it may be the value of a custom (metadata) field that has been previously configured into Stripe for each customer record. Your system would have previously assigned a unique value to this custom field. With either Stripe Lookup Attribute type, the value is derived from some Feathery form or hidden field. For the custom option, you must also configure the name of the custom field in Stripe. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FLtlBAydq5969oLcIIrYw%252Fimage.png%3Falt%3Dmedia%26token%3D052fb113-0712-44e0-aa55-7997d89e214b&width=768&dpr=4&quality=100&sign=243652ec&sv=2) Configuring Feathery to lookup an existing Stripe customer record using the Stripe Customer ID ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FLCHq15j4EDa8wVeXmDSo%252Fimage.png%3Falt%3Dmedia%26token%3D40d07d51-df44-4be7-bce4-ef96a2521c16&width=768&dpr=4&quality=100&sign=98dc8ceb&sv=2) Configuring Feathery to lookup an existing Stripe customer record using a custom field 1. You can update your Stripe customer record metadata with collected form information. Feathery supports updating a variety of Stripe fields such as the name, phone, address information, shipping information and address, etc. Map any applicable fields and save changes to the mapping as illustrated below. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252F3giELWu2GZ7R2vr19QnJ%252Fimage.png%3Falt%3Dmedia%26token%3D78aff178-7f62-407c-9ffd-974e357b2fc1&width=768&dpr=4&quality=100&sign=b70bc841&sv=2) Configuring Feathery-Stripe customer field mappings ### [](https://docs.feathery.io/guides/payment-flow/connect-to-stripe#using-a-new-stripe-customer) Using A New Stripe Customer Feathery’s integration with Stripe is designed so that there is always one-to-one between a Feathery form user submission and a Stripe customer. If the user resubmits the form, the same Stripe customer record will be used by default. The only way to end up with a new Stripe customer record is to also create a new feathery form submission. Feathery offers a “Start New Submission” action on buttons, etc. that you can use to start a new submission and therefore create a new customer record in Stripe for any subsequent payment method entries or payment. Another option is to turn off user tracking (remember user) in your form settings if you don’t want each new session in the same browser to track the same user. This will result in new submissions, each with a new associated Stripe customer record. [](https://docs.feathery.io/guides/payment-flow/connect-to-stripe#additional-stripe-fields) Additional Stripe Fields ------------------------------------------------------------------------------------------------------------------------- Additional Stripe payment fields may also be optionally mapped to Feathery fields that will update their values. * **Receipt Email** – Email address to send the payment receipt from Stripe. Note that receipts will **not** be sent out in test mode. Also, make sure to turn on receipts in your Stripe dashboard. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252F5E08oFcNyeEkmjpMnaME%252Fimage%2520%2827%29.png%3Falt%3Dmedia%26token%3Da6d71d4f-648a-48e6-8f8e-eaa075ea993b&width=768&dpr=4&quality=100&sign=4854b0e8&sv=2) * ‍**Payment Indicator** – A field that will be set true once the user has paid. You can use this field in conditional navigation or element-hide rules to do things like skipping the payment step if the user has already paid. This will typically only be used for more complex custom payment flows. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FYodtgq8Gg9d7zdluVN3k%252Fimage.png%3Falt%3Dmedia%26token%3Da63c1113-ebc4-47f6-bae0-7b3e60f1ee5b&width=768&dpr=4&quality=100&sign=e59d3dc0&sv=2) Always remember to save your changes using "Save Changes" button at the bottom. [PreviousBuild a Payment Flow](https://docs.feathery.io/guides/payment-flow) [NextSelect Products or Plans](https://docs.feathery.io/guides/payment-flow/select-products-or-plans) Last updated 1 year ago Was this helpful? * [Add Stripe Keys](https://docs.feathery.io/guides/payment-flow/connect-to-stripe#add-stripe-keys) * [Toggle Payment Collection Method](https://docs.feathery.io/guides/payment-flow/connect-to-stripe#toggle-payment-collection-method) * [Configure Stripe Customer Metadata (Optional)](https://docs.feathery.io/guides/payment-flow/connect-to-stripe#configure-stripe-customer-metadata-optional) * [Using A New Stripe Customer](https://docs.feathery.io/guides/payment-flow/connect-to-stripe#using-a-new-stripe-customer) * [Additional Stripe Fields](https://docs.feathery.io/guides/payment-flow/connect-to-stripe#additional-stripe-fields) Was this helpful? --- # Build a Payment Flow | Feathery Docs Stripe is a leading payments provider. Use Feathery’s Stripe integration for any or all of the following: * Collect payment methods from users (e.g. a credit card) * Allow users to choose products to purchase * Accept online payments for selected products ### [](https://docs.feathery.io/guides/payment-flow#what-you-need) What you need * An active [Feathery](https://feathery.io/) account and form * An active [Stripe](https://stripe.com/) account ### [](https://docs.feathery.io/guides/payment-flow#implementing-payments) Implementing Payments Determine how you plan to integrate Stripe with Feathery. You can choose to only collect payment info (credit cards) for future charges or you can collect an actual payment as well. Your implementation will have up to 4 steps: 1. [Turn on your Stripe integration](https://docs.feathery.io/guides/payment-flow/connect-to-stripe) 2. [Add your payment collection method](https://docs.feathery.io/guides/payment-flow/collect-payment-method) 3. [Build your product selector and selections confirmation or cart (optional](https://docs.feathery.io/guides/payment-flow/select-products-or-plans) ) 4. [Charge the user's payment method (optional)](https://docs.feathery.io/guides/payment-flow/purchase-products) [PreviousLogin Embed Tutorial](https://docs.feathery.io/guides/login-flow/add-login-to-site/embed-login-flow/login-embed-tutorial) [NextConnect to Stripe](https://docs.feathery.io/guides/payment-flow/connect-to-stripe) Last updated 2 years ago Was this helpful? * [What you need](https://docs.feathery.io/guides/payment-flow#what-you-need) * [Implementing Payments](https://docs.feathery.io/guides/payment-flow#implementing-payments) Was this helpful? --- # Collect Payment Method | Feathery Docs Once you've turned on your Stripe integration, you can collect payments from your users in one of two ways. 1. **Custom Feathery Design -** Your entire checkout experience is in your Feathery flow. 2. **Stripe Checkout -** Once your user has selected products or plans to purchase in your Feathery flow, they're automatically redirected to a [Stripe Checkout](https://stripe.com/docs/payments/checkout) page that presents a purchase summary, collects their payment information, and enables them to pay. [](https://docs.feathery.io/guides/payment-flow/collect-payment-method#stripe-checkout) Stripe Checkout ------------------------------------------------------------------------------------------------------------ If you choose to collect payments through an embedded Stripe checkout session, all Stripe payment methods will be available to use and [configurable in Stripe](https://stripe.com/docs/payments/dashboard-payment-methods) . ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FP7Kz20iWdKFguH4navho%252FScreenshot%25202023-05-17%2520at%25208.36.08%2520AM.png%3Falt%3Dmedia%26token%3D02f803f2-cbe6-46e6-9160-53283ca973a6&width=768&dpr=4&quality=100&sign=b22f1b61&sv=2) Once you set your Stripe integration settings to `Stripe Checkout`, you can go back to your form and create a button with the `Checkout Cart` action. When this button is clicked, it'll automatically redirect your user to a `Stripe Checkout` session that has the products & quantities pre-populated. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FDVBLk2nffxsFBO4a8d5e%252Fimage.png%3Falt%3Dmedia%26token%3Dc699101c-9b64-43ee-91b0-04e4bcc95b53&width=768&dpr=4&quality=100&sign=5796be0f&sv=2) [](https://docs.feathery.io/guides/payment-flow/collect-payment-method#custom-feathery-design) Custom Feathery Design -------------------------------------------------------------------------------------------------------------------------- If you configure your Stripe settings to collect payments natively in your Feathery form, the `Payment Method` field will become available to use. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252FtleGTLaaGzNCeubIZG21%252FScreenshot%25202023-05-17%2520at%25208.37.14%2520AM.png%3Falt%3Dmedia%26token%3D465fa629-791d-4370-8451-e642c6a8d44f&width=768&dpr=4&quality=100&sign=572a64df&sv=2) This payment method field may be dragged anywhere onto your form and is the only way to enter payment/card information into your form to be passed securely to Stripe. The payment method field collects the card number, CVC, expiration month/year and postal code. It supports standard styling in Feathery. ![](https://docs.feathery.io/~gitbook/image?url=https%3A%2F%2F640450274-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHAVngDAEk3s8Bw7P6Ntz%252Fuploads%252F2VOwqogM6q38weRPJqbj%252Fimage.png%3Falt%3Dmedia%26token%3D604ca0d5-79fe-4080-8810-1a80d5ab5b40&width=768&dpr=4&quality=100&sign=7f24d7b9&sv=2) A payment method field in a Feathery form Once your end user fills the field and submits the step that holds it, the payment method will be automatically saved into your Stripe account for that customer. Also, if the payment method is on the same step that triggers a payment via the `Checkout Cart` click action, Feathery will first save the payment method into Stripe and then use it for the payment. Note that it is not always necessary to collect new payment information when designing a custom checkout flow in Feathery. Feathery will use existing payment methods previously set up in Stripe for the customer. However, if you're unsure if a user has an existing payment method saved in Stripe, it is safer to require them to input it again. [PreviousSelect Products or Plans](https://docs.feathery.io/guides/payment-flow/select-products-or-plans) [NextPurchase Products](https://docs.feathery.io/guides/payment-flow/purchase-products) Last updated 2 years ago Was this helpful? * [Stripe Checkout](https://docs.feathery.io/guides/payment-flow/collect-payment-method#stripe-checkout) * [Custom Feathery Design](https://docs.feathery.io/guides/payment-flow/collect-payment-method#custom-feathery-design) Was this helpful? --- # Email Protection | Cloudflare Please enable cookies. Email Protection ================ You are unable to access this email address docs.feathery.io ------------------------------------------------------------ The website from which you got to this page is protected by Cloudflare. Email addresses on that page have been hidden in order to keep them from being accessed by malicious bots. **You must enable Javascript in your browser in order to decode the e-mail address**. If you have a website and are interested in protecting it in a similar way, you can [sign up for Cloudflare](https://www.cloudflare.com/sign-up?utm_source=email_protection) . * [How does Cloudflare protect email addresses on website from spammers?](https://developers.cloudflare.com/waf/tools/scrape-shield/email-address-obfuscation/) * [Can I sign up for Cloudflare?](https://developers.cloudflare.com/fundamentals/setup/account/create-account/) Cloudflare Ray ID: **9bb896b788b82057** • Your IP: Click to reveal 54.237.218.47 • Performance & security by [Cloudflare](https://www.cloudflare.com/5xx-error-landing) ---