Softr Docs
Search…
Custom Form
Advanced form layout with customizable fields
Custom Form
The Custom 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

Here, you can choose how the Title/Subtitle block and form fields are positioned.
Changing Form Position

Form Fields

Field Settings
All the field types (apart from Hidden Field, which we'll consider separately), have the following common settings:
  • Label – a label for the field
  • Placeholder – placeholder text for the field
  • Tag – a unique identifier for the field, which can be used when mapping fields to Airtable for instance
You can also set any of the fields as required/not required.
Disabling Required
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
  • Phone number – here users can provide their 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
  • Checkbox – A checkbox field that should be mapped to a Checkbox type field in Airtable
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
This field type allows sending hidden data that the user doesn't see. Let's find out what values can be set for the field.

1. Logged-In User's Email

You'd need to enter the following value to collect the email address of the logged-in user: {LOGGED_IN_USER:EMAIL}

2. Logged-In User's Name

You'd need to enter the following value to collect the email address of the logged-in user: {LOGGED_IN_USER:NAME}

3. Logged-In User's Record ID

If you've connected an Airtable base with users in the Data section, you can enter the following value to collect the Record ID of the user: {LOGGED_IN_USER:AT_RECORD_ID}

4. Logged-In User's Airtable Field

If you've connected an Airtable base with users in the Data section, you can enter the following value to collect any of the field values corresponding to the user: {LOGGED_IN_USER:AIRTABLE_FIELD:'field name'}
You just need to replace 'field name' with the actual name of the field exactly as it is (it's case-sensitive). Let's say you have a Status field in your users base as shown below.
Users table with Status field
So, if you set your hidden field's value as {LOGGED_IN_USER:AIRTABLE_FIELD:Status}, the values of the Status field will be collected for each user submitting the form (e.g. for Andrea it will be "Active").

5. URL Parameters

You can collect the value of the specified URL parameter using the following format: {URL_PARAM:a_name_of_param}
Instead of the a_name_of_param bit you'll need to specify the name of the parameter you wish to get. 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 in its page URL, indicating the Airtable 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 {URL_PARAM:recordId}, it will collect the value of recordId ("rec7HcXAgKmlk8inf" in this case).

6. Page URL

The {PAGE} parameter allows to get the URL of the page the form has been submitted from.
{PAGE} parameter
​

Actions after Submission

This works the same way is 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
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
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&[email protected]
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.
Last modified 14d ago