[SOLVED] Sending Wix Form / JS Variable Data to Airtable

Ask the community
, ,
1

I have a form on my website that collects data from a user, and when they click a button, I would like to run some calculations on this data and then create a record in an Airtable. However, when I copy and paste the code to create a record from airtable . com / api for my base and test in Wix, it doesn’t get past the require(‘airtable’) command.

I have installed Airtable using npm in Wix. Here is my code, placed under the $w.onReady module:

$w ( ‘#UpdateAirtable’ ). onClick ( () => {
var Airtable = require ( ‘airtable’ );
var base = new Airtable ({ apiKey : ‘(key omitted for security)’ }). base ( ‘appQqG6KnvRqZ365H’ );

    base ( 'Test Table' ). create ([ 
    { 
        "fields" : { 
        "Name" :  "Test Record" , 
        "Notes" :  "Created automatically" , 
        "Status" :  "In progress" 
        } 
    } 
    ],  **function** ( err ,  records ) { 
    **if**  ( err ) { 
        console . error ( err ); 
        **return** ; 
    } 
    records . forEach ( **function**  ( record ) { 
        console . log ( record . getId ()); 
    }); 
    }); 
})

Any thoughts? Thank you in advance!

2

SOLVED. For posterity:

  1. Open the developer menubar on the left side of the screen

  2. Select “Public and Backend” (the Braces “{ }” icon)

  3. At the bottom of the menu, find “npm” and click the “+” icon next to it

  4. Search for “Airtable” and install the package

  5. Once again in the “Public and Backend” menu, look halfway down for the “Backend” section. Click the “+” icon next to it and select “New Web Module”

  6. The default name will be “aModule.jsw.” This is fine, but you will have to change the reference to “aModule” later on if you change this name.

  7. In this module, paste the following code:

export function SendToAirtable ( datastruc ) {
let Airtable = require ( ‘airtable’ );
let base = new Airtable ({ apiKey : ‘’ }). base ( ‘’ ); // The API key and Base ID can be found on the airtable webpage

base ( '<enter your table name>' ). create ( 
    [ datastruc ], 
    **function** ( err ,  records ) { 
        **if**  ( err ) { 
            console . error ( err ); 
            **return** ; 
        } 
    } 
)

}

  1. In Wix, go to the webpage with your code structure that sends data to airtable

  2. Open the code editor for the page and enter the following code:

import { SendToAirtable } from ‘backend/aModule’ ; // If you changed the name of the *.jsw file earlier, you’ll have to change this reference here

$w . onReady ( function () {
const dataStruct = {
“fields” : {
// Modify the field name (from airtable) and the datavalue1 variable (Wix JavaScript variable, form data, etc.):
“airtable field 1” : datavalue1 ,
“airtable field 2” : datavalue2 ,
}
};
SendToAirtable ( dataStruct ). then ( function (){
console . log ( ‘Airtable send was successful’ );
}, function ( err ){
console . log ( err );
}
);

});

In my case, the user filled out a form that I created on my webpage manually using Wix. When the user clicked a Submit button (using *.onClick, not shown here), I collected the data from the form inputs into my JavaScript code, performed some calculations on some of the input data, combined all of the data into the dataStruct variable above, and sent it over to my backend function which delivered it to my Airtable.