Select Page
How to Integrate On2Air Forms with Softr

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.

image

In this tutorial

💡
Note: This method uses custom code we provide to you so you’ll need to use the Custom Code Block in Softr. The Custom Code Block in Softr is only available on their Basic Plan and higher plans.

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.

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

image

  • 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

image

  • 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.

image

With On2Air Forms

image

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

    if(window['logged_in_user'] && window['logged_in_user']['airtable_record_id']) {
        formUrl = formUrl + window['logged_in_user']['airtable_record_id'];
    }
 
    document.write('<iframe src="' + formUrl + '" width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0" title="My Application"></iframe>');
</script>
```
<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(name);
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="500" frameborder="0" marginheight="0" marginwidth="0" title="My Application"></iframe>');

</script>
```