Start a conversation

How to build a Form

The form component allows you to capture data from your users. It's used in almost every app as it's perfect for creating a questionnaire or an enquiry form. 

Setting up a form

  1. Drag and drop the form component to a screen
  2. Select to create your own form from scratch or work from a template
  3. Add your required fields to capture the data you want. Use the blue button at the top right corner of the configurations to add a view possible ways to capture data. We've documented the different options further down in this article
  4. Drag and drop the fields below where it says 'Your form' (not the device preview)
  5. When you've dropped it in the list, click on the field to specify your field settings. These settings include:  
    1. Field ID - this is the field identifying and needs to be unique per field. This will be used in data sources as the column name the data is saved to and used to create emails with the data. This won't be visible to any users, it's only for internal use
    2. Field label - this is the public name of the field, i.e what the user will see
    3. You can make the field required or optional
    4. Add default or placeholder values
    5. If you have a multiple/single choice field, you need to also enter the different options 
  6. Once you've built out the columns, head to the settings tab and choose what happens to the form once submitted
  7. You can store the data in a data source in Fliplet Studio, using an existing data source or a create a new one. 
  8.  You can also choose to automatically send an email whenever the form is submitted if you want to be notified of the submission. 
    1. Setting up the template for this uses something called handlebars to get the data. You will need the field ID's, and put them within these brackets {{field-ID}} to include any data in the email
  9. You can also select to generate an email on the device upon submission, this is useful if you want the user to be able to send an email to any recipient
  10. Finally select what happens to the user when the form is submitted, they can either go to a different screen or see a confirmation message and then go back to the form. 

Available data capture fields:

Text inputs - allow the user to write down their answer

  • Text input
  • Email input
  • Multiple line input

Multiple choices - pre-edit the answers and let a user choose

  • Select box
  • Single choice
  • Multiple choice

Files - let the user attach items to the form

  • Image upload
  • Attach a file

Formatting - styling the form

  • Title
  • Paragraph
  • Line breaker

Buttons - change the wording on the buttons if you want (e.g save instead of submit) 

  • Submit
  • Clear

Advanced

  • Star rating 
  • Signature field



Choose files or drag and drop files
Was this article helpful?
Yes
No
  1. Johanna Gustafsson

  2. Posted
  3. Updated

Comments