Display Form Data in Webflow using the Xano SDK

Do you want to add advanced functionality to your Webflow forms, like storing form data in a database or displaying it on a success page? With Xano, you can do this and more, without writing a single line of code. In this step-by-step guide, we'll show you how to use Xano's JavaScript SDK to create a seamless user experience for your Webflow forms.

Setting up the Form Page

1. Start by creating a simple form in Webflow with fields for name and email. Add a submit button to the form.

1. In Webflow's custom code editor, paste the following code:

javascript
 // Get the Xano SDK
 import * as Xano from 'https://elements.xano.io/xano.js';
 
 // Define the Xano client
 const client = new Xano.Client({
  baseUrl: 'YOUR_API_GROUP_BASE_URL'
 });
 
 // Get the form and submit button elements
 const form = document.querySelector('form');
 const submitButton = form.querySelectorAll('input')[form.querySelectorAll('input').length - 1];
 
 // Prevent default form submission
 form.addEventListener('submit', (e) => e.preventDefault());
 submitButton.addEventListener('click', async () => {
  // Post form data to Xano
  const res = await client.post('/Webflow', {
  name: form.elements.name.value,
  email: form.elements.email.value
  });
 
  console.log(res);
 
  // Store the record ID in local storage
  localStorage.setItem('id', res.data.id);
 
  // Redirect to the success page
  window.location.href = '/success';
 });
 

1. Replace `'YOUR_API_GROUP_BASE_URL'` with the API group base URL from your Xano project.

1. This code listens for the form submission, stops the default Webflow behavior, sends the form data to Xano using the JavaScript SDK, stores the record ID in the browser's local storage, and redirects the user to the success page.

Setting up the Success Page

1. Create a new page in Webflow for the success page.

1. Add elements to display the user's name, email, and the record ID from Xano's database. Give them unique IDs (e.g., `name`, `email`, and `recordId`).

1. In the custom code editor for the success page, paste the following code:

javascript
 // Get the Xano SDK
 import * as Xano from 'https://elements.xano.io/xano.js';
 
 // Define the Xano client
 const client = new Xano.Client({
  baseUrl: 'YOUR_API_GROUP_BASE_URL'
 });
 
 // Get the user's record from Xano
 window.addEventListener('load', async () => {
  const res = await client.get(`/Webflow/${localStorage.getItem('id')}`);
 
  // Populate the elements with the user's data
  document.getElementById('name').textContent = res.data.name;
  document.getElementById('email').textContent = res.data.email;
  document.getElementById('recordId').textContent = res.data.id;
 });
 

1. Replace `'YOUR_API_GROUP_BASE_URL'` with the API group base URL from your Xano project.

1. This code retrieves the user's record from Xano using the record ID stored in the browser's local storage, and then populates the elements on the success page with the user's data.

That's it! You've now integrated Xano with your Webflow forms, allowing you to store form data in a database and display it on a success page. Publish your changes, and your Webflow site will have this new functionality.

Adding New Fields

If you want to add a new field to your form, follow these steps:

1. Add the new field to your Webflow form, and give it a unique name (e.g., `password`).

1. In the custom code for the form page, add the new field to the `client.post` function:

javascript
 const res = await client.post('/Webflow', {
  name: form.elements.name.value,
  email: form.elements.email.value,
  password: form.elements.password.value // Add the new field
 });
 

1. If you added a new input field, increment the index for the submit button:

javascript
 const submitButton = form.querySelectorAll('input')[form.querySelectorAll('input').length - 2]; // Increment the index
 

1. On the success page, add a new element with a unique ID to display the new field's value (e.g., `
   `).

1. In the custom code for the success page, add a line to populate the new element:

javascript
 document.getElementById('password').textContent = res.data.password; // Add the new field
 

Publish your changes, and your new field will be integrated with Xano!

Conclusion

With Xano's JavaScript SDK and this guide, you can quickly add advanced functionality to your Webflow forms, such as storing data in a database and displaying it on a success page. Xano's no-code approach empowers you to build and deploy backend services without writing code, allowing you to focus on creating stunning user experiences with Webflow.

Explore Xano's documentation and examples to unlock even more possibilities for your Webflow projects. If you have any questions or need further assistance, reach out to the Xano community or support team.