Integration

Display Form Data in Webflow using the Xano SDK

Summary

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

Start by creating a simple form in Webflow with fields for name and email. Add a submit button to the form.
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'; });

Replace `'YOUR_API_GROUP_BASE_URL'` with the API group base URL from your Xano project.
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

Create a new page in Webflow for the success page.
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`).
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; });

Replace `'YOUR_API_GROUP_BASE_URL'` with the API group base URL from your Xano project.
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:

Add the new field to your Webflow form, and give it a unique name (e.g., `password`).
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 });

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

On the success page, add a new element with a unique ID to display the new field's value (e.g., `
`).
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.

This transcript was AI generated to allow users to quickly answer technical questions about Xano.

Was this helpful?

I found it helpful

I need more support