How to Integrate On2Air Forms with Softr

🔴 On2Air Forms has been shutdown to focus on our On2Air Backups Airtable app Learn more about automated Airtable backups - on2air.com

In this tutorial, you’ll learn how to integrate On2Air Forms with Softr for Airtable.

In this tutorial

• Create Your Form in On2Air
• Embed Your Form on Your Softr Page
• 📽 Use On2Air Forms in Softr for Logged In Users
• How to Pass Logged-in Softr User Data such as the Record ID into an On2Air Embedded Form

Create Your Form in On2Air

You need to first create your form in On2Air and use the same Table source in both your On2Air Form and Softr page.

⚙

Getting Started with On2Air Forms

Embed Your Form on Your Softr Page

• Open your On2Air Form and click Share Form
• Choose Create or Update depending on what you need
• Click the Embed option
• Click Copy Embed code

• Add a Custom Code block to your Softr page
• The Custom Code is in Blocks => Static => Custom Code

• Open the block settings

• Paste the On2Air Forms embed code into the block settings in Softr
• If you need Dynamic records with data per logged-in user, please go to the next section to learn how to pass logged in user data to the form

📽 Use On2Air Forms in Softr for Logged In Users

How to Pass Logged-in Softr User Data such as the Record ID into an On2Air Embedded Form

If you need to display the specific Softr logged in user’s Airtable information and allow them to view, create, or edit their data, you can use the code below. This will allow you to pass the Record ID into your On2Air Form that’s embedded on a Softr page.

You’ll just need to replace INSERT ON2AIR FORM ID HERE with your unique On2Air Form ID.

To find your On2Air Form ID:

• Open your Form
• Click Settings
• Copy the ID next to Form ID

• Add a Custom Code block to your Softr page where you want the form to be
• The Custom Code is in Blocks => Static => Custom Code
• Open the block settings
• Paste the following code into the block settings in Softr, replacing INSERT ON2AIR FORM ID HERE with your unique Form ID

<script>
let formCode = 'INSERT ON2AIR FORM ID HERE'
let formUrl = `https://on2air.com/form/${formCode}/`;

function getUrlParam(name) {
const url = new URL(window.location.href);
let param;
name = name.toLowerCase()

for (var key of url.searchParams.keys()) {
if (key.toLowerCase() === name) {
param = url.searchParams.get(key);
break;
}
}

if (!param && name === 'recordid') {
param = getRecordIdFromPath();
}
return param;
}

function getRecordIdFromPath() {
let pathName = window.location.pathname;
if (pathName.indexOf('/r/rec') !== -1) {
pathName = pathName.substr(pathName.indexOf('/r/rec') + 3);
if (pathName.indexOf("/") !== -1) {
pathName = pathName(0, pathName.indexOf('/'))
}
return pathName;
}
return undefined;
}

formUrl = formUrl + getUrlParam('recordId')

document.write('<iframe src="' + formUrl + '" width="100%" height="1500" frameborder="0" marginheight="0" marginwidth="0" title="My Application"></iframe>');

</script>

• At first, you won’t be able to see the form while in Softr Edit mode as they don’t render any code in Edit Mode. However, you can open your Softr website to see the final outcome and what the form will look like to your users.

With On2Air Forms