Layout: Customizable Form

Advanced form layout with customizable fields.

Notion image

The Customizable Form layout is a fully customizable form layout, where you can have any number of fields, specifying the type of each field. We'll examine each type shortly, but let's first see what other settings are present.

Form Position

In the Features tab, below title and background image (discussed here), you have the Form Position option, where you can choose how the Title/Subtitle block and form fields are positioned.

Changing form position
Changing form position

Form

In this section, you customize the form and set where it's going to be sent. To start configuring the form fields, you first need to set the form's Destination.

Form destination
Form destination

Here, you have the following options:

  • Forward to your email

You can learn more about each option under its respective article (links added above). And you also have the Forward to your email option, which simply sends the submission to the specified email address. So, let's select the Forward to your email option and go over the fields types and their settings.

Field settings

Field settings
Field settings

All the field types (apart from Hidden Fields, which we'll consider separately), have the following common settings:

  • Label – a label for the field (appears above or next to the field depending on the form layout)
  • Placeholder – placeholder text for the field
  • Field – a unique identifier (i.e. name) for the field
  • Required - is the user required to fill in the field or not

Now, let's see what field types are available:

  • Email – a field where users can enter their email address
  • Single line text/Long text – for single/multiple line texts
  • URL – for submitting a URL
  • Dropdown – a dropdown where users can select one of the provided options. Here, you also have the Options parameter, where you can list all the options separated by a semicolon (without spacing).
    • Dropdown field type
      Dropdown field type

If you’ve mapped the dropdown field to a single- or multi-select field in Airtable, a Sync options with data source will appear, which lets you sync all the values from Airtable automatically instead of adding them manually.

“Sync options with data source” toggle
“Sync options with data source” toggle
  • Phone number – here users can provide their phone numbers. Please, note that validation is applied on entered phone numbers.
  • Multiselect Dropdown – similar to Dropdown but with the possibility to select more than one option
  • File – a field where users can upload files
  • Date – a date field where users can choose a date from a calendar pop-up
  • DateTime – allows providing date and time within a single field. Can be mapped to any text type field in Airtable (e.g. Single Line Text)
    • DateTime field
      DateTime field
  • Checkbox - a checkbox field with a yes/no value. If you are mapping the field to Airtable, you need to use a "Checkbox" field type there as well.
  • Rating - allows submitting a rating (1-5 stars). If you are mapping the field to Airtable, you need to use a "Rating" field type there as well.
  • Address - this is a regular text field, where users can enter their address, but it also has address autocomplete. However, to enable autocomplete, you first need to integrate Google Maps in Settings => Integrations => Google MAP. Follow the instructions here, to get the map API key.

Lastly, you have the Hidden type, which is a bit different from the other types. Let's see how it can be used and configured.

Hidden field

Hidden field settings
Hidden field settings
 

This field type allows sending hidden data that the user doesn't see (you can find a use case here). There are 4 categories, so let's examine them one by one.

1. Logged-in user

By default, here, you have the following options:

  • Email. Collects the email address of the logged-in user.
  • Name. Collects the name of the logged-in user.

2. URL Parameter

Using this option, you can collect any of the page’s URL parameters. Let's consider a specific example to see how that works. For instance, if you've created a job board with Softr, each job announcement will have a recordId (you can learn about Airtable Record IDs here, and learn how those work for Google Sheets here) in its page URL, indicating the data source record corresponding to that particular job. So, if you have a form on that page to receive job applications, you can set a hidden field to collect the recordId to identify which job announcement the application has been submitted for.

Your page URL will look something like yoursite.com/job-details/senior-product-manager?recordId=rec7HcXAgKmlk8inf, so if you set your hidden field value as “recordId,” it will collect the value of recordId ("rec7HcXAgKmlk8inf" in this case).

3. Page URL

This parameter allows to get the full URL of the page the form has been submitted from.

4. Custom value

Here’ you can collect any custom value that you’re not able to collect using the previous options. For instance, you can use it to collect a custom text along with the submission. This can be useful is you have the same form on different pages, and want to mark each of the forms distinctively.

Another important use case is collecting additional logged-in user parameters. If you've synced your users database with a data source, you can use this option to collect any of the field values corresponding to the user. Here, the value has the following format:{LOGGED_IN_USER:FIELD:'field name'} ('field name' is replaced with the actual name of the field).

Let's say you have connected an Airtable data source and have a Status field in your users base as shown below.

Users Base on Airtable
Users Base on Airtable

So, if you set your hidden field's value as Status, the values of the Status field will be collected for each user submitting the form (e.g. for Elise it will be "Active").

Actions after Submission

This works the same way as in the Simple Contact Form.

Form Prefill

Using this feature, you can send your Softr form to others with one or more fields prefilled with values. Let's see how that works.

Let's say your form URL is yourdomain.com/form. To prefill a certain field for this form, you need to add a parameter to your form URL and assign a value to it in the following format:

?prefill_tagname=value
💡
If it's the first parameter in your URL (e.g. you could already have other parameters not related to the prefill), it needs to start with "?." However, if you already have other parameters in the form URL, attach the new ones using "&" at the beginning: &prefill_tagname=value

For instance, if you have a text field with a Tag "NAME," and you want to prefill it with "John," your URL will look as follows:

yourdomain.com/form?prefill_NAME=John
Text field settings
Text field settings
💡
Please, note that the Tag value is case-sensitive and should match exactly the value in your field settings.

Below, you can see what we described in action.

Prefilling the name field
Prefilling the name field

If the field type receives a single value and doesn't have any special formatting involved, it can be prefilled in a similar way. Hidden fields work the same way as well.

💡
Please, note that the File field type is not supported.

Further on, if you need to prefill multiple fields, just add the new values next to each other as shown below:

?prefill_NAME=John&prefill_Email=john@softr.io

Now, let's see how prefill works for the field types that receive their values differently.

Multiselect Dropdown

Here, you need to list all the preselected values separated by a comma:

?prefill_multiselect=value1,value3

Date and DateTime

The format for Date and DateTime fields is the following:

?prefill_datefield=mm-dd-yyyy (e.g. 08-24-2021) ?prefill_datetimefield=mm-dd-yy/HH:MM (e.g. 08-24-2021/01:30)
💡
Since the time picker has fixed values available for selection (e.g. 01:30 or 16:00), you should use the same values when setting the prefill for the DateTime field.

Checkbox

For the checkbox type, you can set the value as "true" (use lowercase only) if you want it to be pre-checked:

?prefill_checkbox=true

That's it. Now, you should be able to send your form URL to your users with any of the fields prefilled with your preferred values.

💡
Email marketing services (e.g. Mailchimp) often provide variables that you can use as values in your prefill configuration to be able to send the form URL to a group of users at once so that each user has his/her own info (e.g. Name, Email, etc.) prefilled.

Enable reCaptcha

By adding reCaptcha authentication to your form, you'll protect it from getting spammed or misused.

💡
Please, note that Softr only supports reCaptcha v3.

To set up reCaptcha, you need to go to https://www.google.com/recaptcha/admin/create and enter your site details as shown below.

reCaptcha setup
reCaptcha setup

In the next screen, you just need to copy the Site Key and Secret Key.

Getting Site Key and Secret Key
Getting Site Key and Secret Key

To finalize the setup, paste the Site Key and Secret Key in your Softr app's Settings => Integrations => Google reCaptcha.

Adding reCaptcha keys
Adding reCaptcha keys
Did this answer your question?
😞
😐
🤩

Last updated on December 6, 2022