Advanced Form Features

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.

Here, you have the following options:

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.

After the form is submitted, you can either display a success message or take the user to a different page.

You can customize the message as well as configure styling and formatting.

Just select the page, and the user will be taken there after successful submission.

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

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

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.

For dropdowns, you can also toggle to enable users to add additional options if the one they are selecting does not exist yet. This is great for adding additional selection options. Note that this is not yet possible for linked records in a dropdown.

This form field allows users to either type or write their signature (using finger on a touch device or mouse on desktop). The signature is then saved as an image in an Attachment field in Airtable or as an image URL in Google Sheets.

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:

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.

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").

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:

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:

Below, you can see what we described in action.

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.

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

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

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

You can use a date like ?prefill_date=2024.10.25. But it’s not limited to this format; since we’re using JavaScript’s Date object, you have a broad range of formats to choose from, like 2024/10/25 or even October 25, 2024. You can also pre-fill with date and time, like prefill_date=2024.10.25 15:30. If the pre-filled date or datetime is invalid, nothing will be displayed. Some examples:

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

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.

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

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

In the next screen, you just need to copy the 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.

Conditional forms can be particularly powerful when used on details pages, where the form's behavior can depend on specific data from a list details record. To ensure that these forms operate correctly, special attention must be given to how data fields are mapped and utilized within the form.

When adding a conditional form to a details page in Softr, the form can interact dynamically with the data displayed on that page. This setup allows you to create forms that respond and adapt based on the specific details of the record being viewed.

To utilize record-specific data in your conditional logic: