TLDR: How can I monitor a number field in form submissions and add that number to a field in a collection list with code, plugins, or other background processes?
My client is offering free local classes and they wanted to display these classes on their website and allow students to sign up online. I built that part pretty quickly; it was easy.
Now I’m being presented with the problem of implementing a class size limit, so that no more than 15 students can sign up for each class.
I’ve gotten pretty far with custom code. Here’s how it works right now:
Each class is added manually to a collection list with basic info like class name, location, time, and summary of the course. This collection list also has a field called “number-of-students” which is a dropdown list of numbers 0-15.
All classes are displayed in a collection list and each class has a sign-up button that leads to a CMS collection page.
On each collection page, custom code checks to see whether the current number of students is greater than or equal to the number 15.
If it is less than 15:
The user sees a message stating “This class has X spots available.” The user also sees a sign-up form containing the question “How many people will be in your party?” above a dropdown which allows the user to sign up no more than X people (the available number of spots for the class)
If it is greater than 15:
The user sees a message stating that the class is full and is directed back to the list of all classes.
Each sign-up form has a bit of code that includes the name of the class with the form submission.
A person behind the scenes of this website (whether me or an employee of my client) must monitor these form submissions and manually update the number-of-students. This is the step I need help with.
I’ve gotten this far with my existing knowledge and the help of ChatGPT. This worked well until I got to step 5 and was led down a confusing API rabbit hole full of things I’m unfamiliar with like webhooks and destination URLs. I’ve read Webflow’s Getting Started guide on Webhooks and I’m feeling like I’m in over my head.
I am willing to dig deeper into this guide, learn all about webhooks, and how to use Airtable. However, before I invest this time, I was wondering if anyone can tell me:
Do I really need to do all this?
Has anyone created similar functionality in Webflow before, and if so how?
To be clear, what I am trying to do at this point is monitor form submissions and automatically update the “number-of-students” field in the collection. Sending a confirmation email to the user would be nice, but we aren’t there yet.
I’ve learned how to use Webhooks, and I’m quite capable with Airtable now, if I do say so myself.
I’ve created a structure within Airtable to monitor form submissions and add up the number of students enrolled with each form submission, updating a field called “Total Students” in a table called “Total Student Numbers.”
I also created an automation that sends an email with the latest total number of students enrolled for the class when a record is updated (which occurs when a form is submitted).
All of the above is working perfectly.
However…
Within the automation that sends an email with the updated number of students, I am also running a script that is supposed to:
Check to see if there’s a Webflow collection item with a name identical to the corresponding Airtable field exists (these are named “Class-Name”)
Update the Webflow collection field with the record data from Airtable.
Here’s the script:
// Set Airtable and Webflow API URLs
const airtableUrl = 'https://api.airtable.com/v0/TvaKwgFOKkPmYv/Total%20Student%20Numbers';
const webflowUrl = 'https://api.webflow.com/collections/641987064ab11c355a797756/items';
// Set Airtable and Webflow API keys
const airtableApiKey = 'patBCSgnDWURwjWMu.f7779257db7fce9daa5c9445fb79ca965aa8ccc5a5042ff2ae1cb9bc11ba6002';
const webflowApiKey = '3276fc9cba6e0fdf376d8e046161c64575da613addbbb869062ccef916b15e01';
// Set Airtable field and Webflow field IDs
const airtableFieldId = 'fldNo3oz1yd6nDfku';
const webflowFieldId = 'number-of-students-text';
// Define Airtable update function
async function updateAirtableRecord(recordId, fieldValue) {
try {
const response = await fetch(`${airtableUrl}/${recordId}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${airtableApiKey}`
},
body: JSON.stringify({ fields: { 'Total Students': fieldValue } })
});
if (!response.ok) {
throw new Error(`Failed to update Airtable record: ${response.status} - ${response.statusText}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Error updating Airtable record:', error);
throw error;
}
}
// Define Webflow update function
async function updateWebflowItem(itemId, fieldValue) {
try {
const response = await fetch(`${webflowUrl}/${itemId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${webflowApiKey}`
},
body: JSON.stringify({ fields: { [webflowFieldId]: fieldValue } })
});
if (!response.ok) {
throw new Error(`Failed to update Webflow item: ${response.status} - ${response.statusText}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Error updating Webflow item:', error);
throw error;
}
}
// Main function to run the script
async function main() {
try {
// Fetch Airtable data
const airtableResponse = await fetch(airtableUrl, {
headers: {
'Authorization': `Bearer ${airtableApiKey}`
}
});
if (!airtableResponse.ok) {
throw new Error(`Failed to fetch Airtable data: ${airtableResponse.status} - ${airtableResponse.statusText}`);
}
const airtableData = await airtableResponse.json();
const records = airtableData.records;
// Loop through each record and update Webflow item
for (const record of records) {
const recordId = record.id;
const fieldValue = record.fields['Total Students'];
// Call Webflow update function here
await updateWebflowItem(recordId, fieldValue);
}
} catch (error) {
console.error('Error in main():', error);
throw error;
}
}
If you’re following along, you will have guessed correctly that I had ChatGPT write this.
Here’s the current status:
All tests in Airtable on this script and automation are running successfully.
No data appears in the execution log.
The webflow collection item fields are not updating when I test this.
ChatGPT is very good as solving problems without understanding what’s needed to Solve Problems.
It can write the javascript needed to access an API, without understanding that you cannot access most APIs from javascript due to CORS restrictions. I’m pretty sure that’s what you’re seeing here, but it depends on exactly where you’re running this script.
My first recommendation for this type of need would be to use a third party tool. It’s far simpler to administer, offers your client a much more usable admin interface, and tools like Calendly are quite cheap.
But, in the interests of the home-grown approach, and the direction you’ve already taken with Airtable, I’d probably just complete that connection using automation.
Tools like Make or Zapier, they integrate well with Webflow’s CMS API and make it relatively easy to update that number as your Airtable is change. It’s probably important to trigger off of the Airtable changes directly since your customer might want to add-remove students manually outside of the form-submit-enrollment process.
Wow, I sure do wish you’d chimed in sooner! I had no idea Calendly offered group events. It’s not the most beautiful solution, but it sure does beat shelling out for multiple tool subscriptions or beating my head against a wall.