CustomJS allows you to conect custom HTML forms directly into Airtable. For example, you can build your own custom HTML contact form and submit entries directly into Airtable. In this way, you can collect and manage contact information directly in Airtable while having the freedom to design and implement your forms according to your own design requirements.
First we have to generate a "Personal access token", for this you have to go to the Airtable Builder Hub. After getting the Airtable token keep it somewhere save will will use it later.
For example you want to create a contact form. Simply create contact form in HTML with you favourite css library and just put CustomJS link as action. see example below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
<div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-lg">
<h2 class="text-2xl font-bold mb-6 text-gray-800 text-center">Contact Us</h2>
<form action="<CUSTOM_JS_LINK>" method="POST" class="space-y-4">
<div>
<label for="firstname" class="block text-sm font-medium text-gray-700">First Name</label>
<input type="text" id="firstname" name="firstname" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" required>
</div>
<div>
<label for="lastname" class="block text-sm font-medium text-gray-700">Last Name</label>
<input type="text" id="lastname" name="lastname" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" required>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" id="email" name="email" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" required>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700">Message</label>
<textarea id="message" name="message" rows="4" class="mt-1 block w-full p-2 border border-gray-300 rounded-md"></textarea>
</div>
<div>
<label for="website" class="block text-sm font-medium text-gray-700">Website</label>
<input type="url" id="website" name="website" class="mt-1 block w-full p-2 border border-gray-300 rounded-md">
</div>
<div class="flex justify-center">
<button type="submit" class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700">Submit</button>
</div>
<input type="hidden" name="redirectToSuccess" value="https://www.customjs.io/success-page">
<input type="hidden" name="redirectToError" value="https://www.customjs.io/error-page">
</form>
</div>
</body>
</html>
Below we have simple Custom JS function which will run and save a new record in Airtable. You can fully customized your Custom JS function to add more fields.
Please note: You need to create a static variable named AIRTABLE_PAT with your Airtable token and set the Reponse Type to HTML.
We also want to store the "BaseId" and the "TableName" in static variables.
Also you have to adjust the hidden fields redirectToSuccess and redirectToError and define your success and error page to which the redirect should take place.
const Airtable = require("airtable");
const base = new Airtable({ apiKey: variables.AIRTABLE_PAT }).base(variables.BaseId);
if(await checkIfRecordExists(variables.TableName, 'Email', input.email)){
return `<html><head><meta http-equiv="refresh" content="0; url=${redirectToError}?error=Email_Already_Exists" /></head></html>`;
}
const res = await base(variables.TableName).create([
{
fields: {
Email: input.email
Firstname: input.firstname
Lastname: input.lastname
},
},
]);
return `<html><head><meta http-equiv="refresh" content="0; url=${redirectToSuccess}" /></head></html>`;
////////////
async function checkIfRecordExists(table, field, value) {
const records = await base(table)
.select({
filterByFormula: `{${field}} = '${value}'`,
})
.firstPage();
return records.length > 0 ? true : false;
}