Bypass Webflow Form Submission Limit with Xano!

In this guide, we'll explore how to bypass Webflow's form submission limit and connect your forms directly to your Xano database. By following these steps, you can ensure that user submissions go straight to Xano without counting against your Webflow form limits, giving you more flexibility and scalability for your web applications.

Why Bypass the Form Submission Limit?

Webflow is a powerful no-code platform that allows you to build stunning websites and web applications. However, one limitation is the form submission limit, which can be a bottleneck for projects that require a high volume of form submissions.

By connecting your Webflow forms directly to your Xano database, you can overcome this limitation and enjoy the following benefits:

1. Unlimited Form Submissions: Your form submissions will no longer count against your Webflow limit, allowing you to collect data at scale.
2. Seamless Data Integration: Store and manage your form data directly in your Xano database, simplifying data management and integration with other applications.
3. Increased Flexibility: Customize and extend your form functionality by leveraging Xano's no-code backend development capabilities.

Step 1: Set Up Your Xano Project

Before we begin, make sure you have a Xano account and a project set up. If you're new to Xano, follow these steps:

1. Sign up for a free Xano account at https://xano.io/.
2. Create a new project or select an existing one from your dashboard.
3. Inside your project, create a new table to store your form submissions. For example, you could create a table called "FormData" with fields like "Name," "Email," and any other relevant fields based on your form.

Step 2: Create Your Webflow Form

In Webflow, design your form as you normally would. Ensure that the field IDs in your form match the field names in your Xano table. For example, if you have a "Name" field in your Xano table, your form field ID should also be "Name."

Step 3: Set Up Your Xano API Endpoint

In Xano, navigate to your project's API section and create a new API endpoint. This endpoint will receive the form data from your Webflow site.

1. Click "Create New API" and select "POST."
2. Name your API endpoint (e.g., "FormSubmission").
3. Under "Input Fields," add fields that match your Xano table and Webflow form field IDs.
4. In the "Function Stack," add the following code to create a new record in your table:

javascript
 const formData = await tables.FormData.createRecord(input);
 

Replace "FormData" with the name of your table.

Step 4: Integrate Webflow with Xano

Now it's time to integrate your Webflow form with your Xano API endpoint. You'll need to add some custom JavaScript code to your Webflow project.

1. In Webflow, navigate to the page with your form.
2. Add a new "Custom Code" element to the page.
3. Copy and paste the following code into the "Custom Code" element:

javascript
 // Stop Webflow from handling form submission
 window.addEventListener("load", function() {
  document.getElementById("FORM_ID").addEventListener("submit", handleSubmit);
 });
 
 const handleSubmit = async (event) => {
  event.preventDefault();
 
  // Get form data
  const formData = new FormData(event.target);
 
  // Get submit button
  const submitButton = event.target.querySelector("input[type='submit']");
 
  // Update submit button text
  submitButton.value = "Submitting...";
 
  // Get form method and action
  const method = event.target.getAttribute("method");
  const action = event.target.getAttribute("action");
 
  // Get redirect URL
  const redirectURL = event.target.getAttribute("redirect");
 
  try {
  // Send form data to Xano API
  const response = await fetch(action, {
  method: method,
  body: formData,
  });
 
  // Handle response
  if (response.ok) {
  submitButton.value = "Submit";
  alert("Form submitted successfully!");
  if (redirectURL) {
  window.location.href = redirectURL;
  }
  } else {
  submitButton.value = "Submit";
  alert("Error submitting form. Please try again later.");
  }
  } catch (error) {
  submitButton.value = "Submit";
  alert("Error submitting form. Please try again later.");
  }
 };
 

1. Replace `"FORM_ID"` with the ID of your form element in Webflow.
2. Update the `action` URL with your Xano API endpoint URL.
3. Save and publish your Webflow site.

Now, when a user submits your form, the data will be sent directly to your Xano database without counting against your Webflow form submission limit.

Step 5: Test and Verify

To ensure everything is working correctly, test your form by submitting some sample data. Then, check your Xano table to verify that the new records have been created.

Bonus: Updating Existing Records

In addition to creating new records, you can also use Xano to update existing records in your database. To do this, you'll need to modify your Xano API endpoint and the JavaScript code in your Webflow project.

1. In your Xano API endpoint, add an "ID" input field to match the ID field in your table.
2. Update the "Function Stack" code to update an existing record instead of creating a new one:

javascript
 const formData = await tables.FormData.updateRecord(input.ID, input);
 

1. In your Webflow project, update the JavaScript code to include the record ID in the form data:

javascript
 const formData = new FormData(event.target);
 formData.append("ID", "YOUR_RECORD_ID");
 

Replace `"YOUR_RECORD_ID"` with the ID of the record you want to update.

Now, when a user submits the form, it will update the existing record in your Xano database instead of creating a new one.

By following these steps, you can build and deploy web applications without worrying about Webflow's form submission limits. Enjoy the power of Xano's no-code backend development capabilities combined with Webflow's intuitive design tools to create robust and scalable web applications.