Xano - Contact Form Template Demo

Hey there! In this blog post, we'll walk you through the process of installing and using the Contact Form extension on Xano, a no-code platform that allows you to build and deploy backend services for web and mobile applications without writing a single line of code. Let's get started!

Installing the Contact Form Extension

1. Head over to the Xano Marketplace and locate the Contact Form extension.
2. On the right side of the extension page, click the green "Install Extension" button.
3. A blue window will pop up. Click the green "Install" button at the bottom to complete the installation process.

Unlike some other third-party extensions, you don't need to configure anything for the Contact Form extension. It's ready to use right out of the box!

Exploring the Contact Form Extension

1. After installation, you'll notice a new table called "lead" in your Xano database. This table is associated with the Contact Form extension and will store the leads submitted through the contact form.
2. Navigate back to the Contact Form extension page in the Marketplace and click the "View Demo" button.
3. The demo page will provide you with information about the extension and allow you to test it out. On the right side, you'll find the source code, which can be handy for reference or customization.
4. Click the "Test with your Xano account" button to proceed with testing the extension.
5. You'll be prompted to enter your Xano base URL. Go to the API page in your Xano account, and you'll see a new API group named "Contact Form." Click the "Explore" button, and you'll find the base request URL on the right side. Copy this URL to your clipboard.
6. Return to the demo page, paste the copied URL into the provided field, and click the "Update Settings" button.

Testing the Contact Form Extension

Now that you've set up the demo, let's test the Contact Form extension!

1. The demo page will display a "Lead Submission" and a "Lead List" section. In a real-world scenario, the person submitting the lead will not see the list of leads. The demo includes a few fake leads for demonstration purposes.
2. In the "Lead Submission" section, fill out the form with your name, email address, company name, and a message (e.g., "Hello, I want more information").
3. Click the "Submit" button, and you'll see your lead added to the top of the "Lead List" section, complete with a timestamp.
4. You can even go back to your Xano database and check the "lead" table to see your submitted lead stored there.

That's it! You've successfully installed and tested the Contact Form extension on Xano. This extension saves you the hassle of engineering a contact form from scratch, making it a valuable tool for quickly building and deploying web and mobile applications.