LogoLogo
Back to studio
  • Formsort documentation
  • โฉQuickstart
    • ๐ŸŸขGet started with Formsort
    • ๐ŸŽCore concepts
    • โ„น๏ธQuestion and content reference
    • ๐Ÿ“•Key terms
    • ๐Ÿž๏ธCreate your first flow
    • ๐Ÿ“–Add content and collect answers
      • ๐ŸคณCapture demographic data
      • โ„น๏ธAdd informational content
      • ๐Ÿ” Review your variable schema
    • ๐ŸŽจCreate a theme
      • Set brand guidelines
    • ๐ŸคนPersonalize your flow
      • ๐ŸŒŸTemplate your variables
      • ๐Ÿง Add conditional logic
      • ๐Ÿ’ซUsing conditional logic with Calculated and API variables
      • ๐Ÿ”šEnd the flow
    • ๐Ÿ”€Set up integrations
    • ๐Ÿš€Go live
      • Auditing your flow for content, functionality, and design
    • ๐Ÿ’ผCommon use cases
      • ๐Ÿ’”Disqualify responders
      • ๐Ÿ—“๏ธAdd a scheduling option
      • ๐Ÿ“„Allow responders to read and accept your company policies
  • ๐Ÿ—๏ธBuilding flows
    • Flows and variants
      • Flow starts
    • Adding content
      • Groups
      • Steps
        • Settings
        • Logic
        • Style
      • Questions
        • General Settings
        • Style
        • Address
        • Comparison
        • Confirmation
        • Date
        • Date & Time
        • Email address
        • File upload
        • Grid choice
        • Iframe
        • Image upload
        • Number
        • Payment
        • Phone number
        • Postal code
        • Question group
        • Region
        • Select
          • Providing choices via API or calculation
        • Signature
        • SSN
        • Text questions
        • Yes/No
      • Content
        • General Settings
        • Statement
        • Image
        • Video
        • Next button
        • Divider
        • Map
      • Endings
      • Using markdown
      • Using variable templating
        • Template formatting functions
      • Copy-pasting form content
      • Content library
    • Conditions and logic
      • Logical operator reference
      • Advanced logic
    • Variables (answers)
      • Variables from questions
      • Externally provided variables
      • Calculated variables
      • API lookups
      • System Library variables
      • Orphaned variables
    • Schemas
      • JSON Schemas
      • Validating flow schemas
    • Redirects
    • Styling and themes
      • CSS Reference
      • Overriding theme styling
      • Custom CSS overrides
      • Content area
      • Animations and transitions
      • Form Layout
      • Typography
        • Adobe Fonts
        • Hosting custom fonts
      • Color variables
      • Dimension variables
      • Question containers
      • Assets
      • Form Buttons
        • Select buttons
      • Inputs and dropdowns
      • Checkmarks
      • Tables
      • Sliders
      • Divider lines
      • Progress bar
      • Comparison cards
    • Variant settings
      • Form behavior for returning responders
      • Group ranking API
    • Publishing and versions
      • Preview window
      • Deploying
      • History
  • ๐Ÿ’พHandling data
    • Philosophy and data retention policy
    • Viewing form answers
    • Responder UUIDs
    • Environments
      • Loading different environments
    • Passing data in
      • URL parameters
      • POST body
      • Embed query parameters
    • Custom validators
    • Form answers and events
      • Analytics events
      • Signed requests
      • Event payload shape
      • Submission frequencies
      • Runtime error reporting
      • Admin API
      • Flow content data format
    • Integration reference
      • Amplitude
        • Amplitude cross domain tracking
      • BigQuery
      • FullStory
      • Google Analytics
        • Updating from Universal Analytics to GA4
      • Google Cloud Storage
      • Google Sheets
      • Google Tag Manager (GTM)
        • JavaScript triggered by flow events
      • Hubspot
      • Jornaya
      • Optimizely
      • PostgreSQL
      • Redshift
      • Rudderstack
      • S3
      • Salesforce
      • Segment
        • Segment Setup
        • Segment cross domain tracking
      • Stripe
      • TrustedForm
      • Webhooks
        • Zapier
  • ๐Ÿ“บGoing live
    • Custom domains
    • Built-in analytics
    • Embedding
      • Web-Embed API
        • React-embed
      • Adding authentication
      • Embedding forms in iOS and Android
      • Setting up a dev environment
    • Split testing
    • Preflight checklist
  • ๐ŸขTeams
    • Accounts
      • Roles and permissions
    • Events subscriptions
    • Workspace domain detection
Powered by GitBook
On this page
  • Capturing demographic data
  • Add a step
  • Capture name
  • Capture phone and email
  • Capture date of birth
  • Capture address

Was this helpful?

  1. Quickstart
  2. Add content and collect answers

Capture demographic data

Learn how to capture the most common types of demographic data from your responder.

PreviousAdd content and collect answersNextAdd informational content

Last updated 1 year ago

Was this helpful?

Capturing demographic data

Itโ€™s likely that youโ€™ll want to capture some demographic information from your users, such as first and last name, contact information, and any other identifying information that may be relevant to your business. Letโ€™s build a couple steps that will capture basic information from your users.

Add a step

To start, weโ€™ll want to add a . A step can be thought of as a container for questions, and will render as a single โ€œpageโ€ that the responder will see.

Capture name

The next two steps will apply to every question you create:

  • Add a title to the question so the responder understands what the question is asking. As you can see in the gif below, this will automatically update the โ€œQuestion Labelโ€ and the โ€œVariableโ€ sections in the question Settings.

  • Be sure to provide a useful variable name in the Variable section. This will be the name of the data value when an answer payload is sent. As a default measure, this box will automatically copy whatever youโ€™ve put as the question title -- itโ€™s probably necessary to rewrite this.

In the text componentโ€™s settings, you have the option to add placeholder text for the input box, to provide more clarity and direction for your users.

Capture phone and email

Phone

Add a phone component and, same as the text component, be sure to title the question and rename the variable.

Since the user is entering information into an input box, placeholder text can also be used here. Input mask will be on by default, which will automatically format the userโ€™s response as (123)456-7890 . This setting can be turned off.

Email

Now, add an email.

โ€œWarn about common domain typosโ€ is a setting that will be on by default, and will provide a warning for users if it detects an error in the email domain (e.g. gnail.com vs gmail.com).

Capture date of birth

It's up to you where in the flow you'd want to put this question: you can add it to the list of demographic questions on the first step, or - if you'd like the flow to feel more conversational - you can add it to it's own step.

There are a number of options to be toggled with this component, and the list may be worth experimenting with if a date component is going to be used for any other reason. For the purposes of capturing someone's date of birth, it is suggested to at least toggle on "Only allow dates in the past?".

Capture address

First, weโ€™ll probably want to create a new step for this, since the address component may take up some real estate if "Use single field?" is not enabled. It also helps the user feel the progression in the flow, and helps to break up the sense of monotony that comes with filling out a long list.

Now that we have the question container, letโ€™s add some questions to it. The first thing weโ€™ll want to know about a user is their name. are the perfect tool for this since they allow users to enter text freely.

Check out of how others capture first and last name in their flows.

Next, we may want to capture their phone number and/or email. There are two components we can use for this: and . Pretty simple!

It is generally good practice to give context as to why contact information is being collected, and what you plan to do with this information. A is a great way to add this additional context to a question, without adding more components to a page. Simply toggle "Has info text?" on, and add the text required to inform your users.

Oftentimes we may need to capture a user's date of birth - either to follow up for a birthday, or to tailor an experience using a . The is the tool of choice here, which can be used for capturing more than just dates of births!

Since we've already captured some of the basic contact information for our responder, we might want to capture their address. The can be used for this, and will automatically provide the fields required for a complete address.

There are several options for an address component, like formatting for , or using a USPS integration. It is worth reviewing the to get a better understanding of what you can do here.

โฉ
๐Ÿ“–
๐Ÿคณ
Text components
some examples
phone
email
tooltip
based on the user's age
calculated variable
date component
address component
International addresses
Validating US addresses
docs page
step
Click "add step"
Add a question in the question title
Add a placeholder for the input box
Create a phone component
Add an email component. Be sure to rewrite the variable
Adding a Date component to a new step
Add a Step, and an Address component