Ask AI
All Categories
Building Blocks
Basic Forms

Basic Forms

Learn how to build a basic form.

Basic forms in Softr provide a straightforward solution for gathering information from users. They are essential for tasks such as contact forms, registrations, surveys, and more. This document covers how to effectively set up these forms, configure their layout, and customize their appearance.

Building a Basic Form

To begin using basic forms in Softr, follow these steps:

  1. Add a form block preset: From your Softr app, add a new form block to your page.
  1. Select a destination: A destination can be a data source, email or a tool like Zapier or Make.
  1. Add questions: Add and map the required fields into your form such as Name, Email, Message, etc

Sending responses to a data source

Ensure that the data collected through your forms is systematically stored and easy to access:

  1. Select data source: Choose where to send the form responses, such as Google Sheets, Airtable, SmartSuite or HubSpot.
  1. Configure input fields: Map form fields to the corresponding columns in your selected data source.
  1. Test data submission: Fill out the form as a user would, and check the data source to ensure the information is captured correctly.

Steps and sections

Organizing your form effectively can enhance user experience and increase the completion rate:

  • Single vs. Multi-step Forms: Decide if the form should be a single page or broken into multiple steps. Multi-step forms are useful for longer surveys to avoid overwhelming users.
  • Sections: Use sections to group related fields together, making the form easier to navigate. For example, separate user personal details from payment information.

Form layouts and styling

Softr provides various styling options to ensure your form aligns with your site’s aesthetics:

  1. Form layouts: Choose from Big text, Image, Video and more layouts!
  1. Themes and colors: Select a theme and customize the colors to match your brand.
  1. Display fields: Add Heading 1, 2, 3, Text or Divider display fields to give your form structure.
  1. Fonts and text styling: Choose fonts and adjust sizes for headings, labels, and input text.
  1. Button styling for multi-steps: Customize the design of navigation buttons in multi-step forms to make them stand out.
Did this answer your question?
😞
😐
🀩

Last updated on May 6, 2024

Form Block Overview Conditional Forms