Blog
How To Send Your Framer Form Data to a Custom Backend With Buildship
Tutorial
·
Apr 24, 2024
Mufassir Kazi
Product Marketing
There's a wave of excitement in the tech world with frontend no-code tools changing the game for website creation. These tools let you launch dynamic, interactive websites on a large scale without needing to know a single line of code.
One such platform is Framer. It's become a go-to platform for business owners worldwide diving into the no-code trend to get their businesses online in a snap.
But, as awesome as Framer is, sometimes it doesn't have everything you need. A largely requested wishlist of most users is to build beyond the static logic that Framer natively offers. For instance, maybe you want to send user data to another app, store it in a database, or trigger notifications in your customer's app.
That's where our blog comes in! We're going to show you how to take your website from just looking pretty to being super interactive. Imagine easily sending information from Framer across tools, services, and more—visually with no-code. Let's dive in!
What is Framer?
Let’s first understand what Framer is and what all you can do in it. Framer helps you convert your most expressive Figma designs into full fledged websites with no-code. It offers a sleek interface, animations, and even custom code options for realistic and high-fidelity designs.
As a top-notch design and prototyping tool for creating interactive web and mobile app prototypes, Framer comes with its own suite of collaboration features, design layouts and a built-in code editor. It is the go-to choice for designers and developers aiming to create polished and interactive prototypes in no time.
Building a Backend With No-Code in Framer
Framer hits a limitation if you want to go beyond your frontend. Many a website collect user data, form submissions and analytic events information to build out great user experiences for their website visitors. This is usually done by sending this information to a backend client for further processing.
This is where BuildShip comes in. BuildShip is a low-code AI powered visual backend builder that lets you connect with any tool or service with absolutely zero code required. Gone are the days of hand-coding with NodeJS, setting up a REST API server, and navigating through manual integrations. This means you no longer compromise on the limitations often associated with no-code tools; instead, you have the code accessibility to modify as needed, ensuring unparalleled flexibility.
Connecting to External APIs in Framer Using Low-Code
One of the standout features of BuildShip is its ability to help you ship powerful APIs at scale. This means you can automate workflows triggered by actions like form submissions or specific interactions on your Framer website.
In this blog, we'll dive into how to set up a workflow that captures your Framer form data and securely saves it to your preferred database. Framer Forms, powered by Framer and BuildShip, allows you to create dynamic and customizable forms. Whether it's a simple subscription form, a contact form, or a more complex workflow-based form, you'll learn how to seamlessly integrate and manage your data. Let's get started!
To get started, imagine you're building a website using Framer and you want to add a simple form to collect user information. With Framer Forms, you're not limited to standard form options. Instead, you can create forms with custom fields and tailor them to your specific needs. Whether it's adding additional fields, modifying the form title, or changing the button call-to-action, Framer Forms make it super simple to customize every aspect.
Let's walk through the steps of adding and customizing a form on Framer.
Step 1: Adding the Framer form
First, navigate to your Framer website and add a new code block. Give it a title, such as "Newsletter Sign-Up." You don't need to have any coding expertise to make this happen.
Next, simply copy and paste the code snippet provided here in place of the existing content. Once saved, you'll see the form appear on your website.
Step 2: Customising the Framer form
What if you want to collect additional information or modify the form further? It's as easy as editing the code snippet. Find the relevant sections in the code, such as the form title or button text, and make the necessary changes. Adding new input fields is just as straightforward. Copy and paste the existing input field code, configure it to your needs, and voila! You have a fully customized form.
For those unfamiliar with coding, you can use the power of ChatGPT to do the heavy lifting. Simply provide ChadGPT with your requirements, such as adding a new field, and it will generate the corresponding code snippet. Copy and paste it into Framer, and your new field will be integrated into the form.
Now importantly, you have to submit a form url. This is where the submitted form information is sent to via an API. We’ll be building this API with BuildShip.
Step 3: Processing Framer form submissions using BuildShip
In order to process the form submissions, we'll be using BuildShip to build a low-code visual API. This API will handle the data sent from the submitted form. On BuildShip, you can set up your project and start building workflows. Whether you want to store the form data in a database, send a message to a Discord channel, or even trigger your own custom actions, BuildShip empowers you to design your desired workflow with ease.
To configure these actions, simply set up your workflow nodes on BuildShip. You can choose from a variety of pre-built nodes for common actions like sending messages or storing in a database.
Let’s start by adding a trigger node. You can add a REST API trigger node and specify its path as /newslettersubmission with type set to POST.
Now let's consider a typical scenario where someone submits their email to sign up for a newsletter. Using BuildShip, you can connect the form submission to various actions. For example, you can store the email in a database table, send the subscriber a confirmation email using SendGrid, or even notify your team members of a new sign-up via Slack. Let’s see this one by one.
To add a Discord Webhook click on add node and search for Discord and simply add the node.
Or perhaps, since you are collecting newsletter signups, you’d want to send them an email at some point. With BuildShip, we've got you covered on that front too. Simply integrate any email client node, such as Sendgrid or Mailchimp, to easily add them to your relevant campaigns.
Even if a specific node isn't readily available, you can easily create your own node using BuildShip's AI capabilities.
Alternatively you can store the submission to a database like Firestore or Supabase.
For the purpose of this article, we'll demonstrate storing the data in BuildShip's database. We'll create a Collection named "Product Newsletter," which will serve as the table name within BuildShip. The Document ID can be sequential, a specific ID, or left blank as optional. The incoming request's Body will serve as the data to be stored.
To wrap it up, we include the return node to confirm the successful saving of information in the database and to send back a 200 OK response.
Step 4: Generate a URL endpoint
Once your workflow is set up with the desired actions, simply click on the Ship button. BuildShip will then generate a URL endpoint for your API.
Copy this endpoint and paste it into the form URL field in Framer as discussed earlier. Now, whenever a user submits the form, their data will be securely sent to your BuildShip API, triggering the predefined actions.
Step 5: Testing the Form
Go to Framer, enter your email and click "Sign Up." You'll receive a confirmation message, and on BuildShip, you can see the logs of all form submissions. The data is saved and processed according to your defined actions, ensuring easy integration between Framer and BuildShip.
You can now insert this form in any part of your Framer page to start collecting and processing your Framer form submissions.
With your fully functioning form in place, you have unlocked a world of possibilities. From simple contact forms to intricate marketplace workflows, Framer Forms and BuildShip allow you to interact with your users and take action based on their submissions. As a low-code solution, you can easily customize and iterate on your forms and workflows without being slowed down by complex coding requirements.
For a full step-by-step video tutorial, refer the video below:
Conclusion
We learned how to use BuildShip to create a truly interactive and dynamic web experience in Framer. You can build your own custom forms today and explore the endless possibilities of easy integration with your preferred databases and workflow automation in your static Framer web pages.
There's a wave of excitement in the tech world with frontend no-code tools changing the game for website creation. These tools let you launch dynamic, interactive websites on a large scale without needing to know a single line of code.
One such platform is Framer. It's become a go-to platform for business owners worldwide diving into the no-code trend to get their businesses online in a snap.
But, as awesome as Framer is, sometimes it doesn't have everything you need. A largely requested wishlist of most users is to build beyond the static logic that Framer natively offers. For instance, maybe you want to send user data to another app, store it in a database, or trigger notifications in your customer's app.
That's where our blog comes in! We're going to show you how to take your website from just looking pretty to being super interactive. Imagine easily sending information from Framer across tools, services, and more—visually with no-code. Let's dive in!
What is Framer?
Let’s first understand what Framer is and what all you can do in it. Framer helps you convert your most expressive Figma designs into full fledged websites with no-code. It offers a sleek interface, animations, and even custom code options for realistic and high-fidelity designs.
As a top-notch design and prototyping tool for creating interactive web and mobile app prototypes, Framer comes with its own suite of collaboration features, design layouts and a built-in code editor. It is the go-to choice for designers and developers aiming to create polished and interactive prototypes in no time.
Building a Backend With No-Code in Framer
Framer hits a limitation if you want to go beyond your frontend. Many a website collect user data, form submissions and analytic events information to build out great user experiences for their website visitors. This is usually done by sending this information to a backend client for further processing.
This is where BuildShip comes in. BuildShip is a low-code AI powered visual backend builder that lets you connect with any tool or service with absolutely zero code required. Gone are the days of hand-coding with NodeJS, setting up a REST API server, and navigating through manual integrations. This means you no longer compromise on the limitations often associated with no-code tools; instead, you have the code accessibility to modify as needed, ensuring unparalleled flexibility.
Connecting to External APIs in Framer Using Low-Code
One of the standout features of BuildShip is its ability to help you ship powerful APIs at scale. This means you can automate workflows triggered by actions like form submissions or specific interactions on your Framer website.
In this blog, we'll dive into how to set up a workflow that captures your Framer form data and securely saves it to your preferred database. Framer Forms, powered by Framer and BuildShip, allows you to create dynamic and customizable forms. Whether it's a simple subscription form, a contact form, or a more complex workflow-based form, you'll learn how to seamlessly integrate and manage your data. Let's get started!
To get started, imagine you're building a website using Framer and you want to add a simple form to collect user information. With Framer Forms, you're not limited to standard form options. Instead, you can create forms with custom fields and tailor them to your specific needs. Whether it's adding additional fields, modifying the form title, or changing the button call-to-action, Framer Forms make it super simple to customize every aspect.
Let's walk through the steps of adding and customizing a form on Framer.
Step 1: Adding the Framer form
First, navigate to your Framer website and add a new code block. Give it a title, such as "Newsletter Sign-Up." You don't need to have any coding expertise to make this happen.
Next, simply copy and paste the code snippet provided here in place of the existing content. Once saved, you'll see the form appear on your website.
Step 2: Customising the Framer form
What if you want to collect additional information or modify the form further? It's as easy as editing the code snippet. Find the relevant sections in the code, such as the form title or button text, and make the necessary changes. Adding new input fields is just as straightforward. Copy and paste the existing input field code, configure it to your needs, and voila! You have a fully customized form.
For those unfamiliar with coding, you can use the power of ChatGPT to do the heavy lifting. Simply provide ChadGPT with your requirements, such as adding a new field, and it will generate the corresponding code snippet. Copy and paste it into Framer, and your new field will be integrated into the form.
Now importantly, you have to submit a form url. This is where the submitted form information is sent to via an API. We’ll be building this API with BuildShip.
Step 3: Processing Framer form submissions using BuildShip
In order to process the form submissions, we'll be using BuildShip to build a low-code visual API. This API will handle the data sent from the submitted form. On BuildShip, you can set up your project and start building workflows. Whether you want to store the form data in a database, send a message to a Discord channel, or even trigger your own custom actions, BuildShip empowers you to design your desired workflow with ease.
To configure these actions, simply set up your workflow nodes on BuildShip. You can choose from a variety of pre-built nodes for common actions like sending messages or storing in a database.
Let’s start by adding a trigger node. You can add a REST API trigger node and specify its path as /newslettersubmission with type set to POST.
Now let's consider a typical scenario where someone submits their email to sign up for a newsletter. Using BuildShip, you can connect the form submission to various actions. For example, you can store the email in a database table, send the subscriber a confirmation email using SendGrid, or even notify your team members of a new sign-up via Slack. Let’s see this one by one.
To add a Discord Webhook click on add node and search for Discord and simply add the node.
Or perhaps, since you are collecting newsletter signups, you’d want to send them an email at some point. With BuildShip, we've got you covered on that front too. Simply integrate any email client node, such as Sendgrid or Mailchimp, to easily add them to your relevant campaigns.
Even if a specific node isn't readily available, you can easily create your own node using BuildShip's AI capabilities.
Alternatively you can store the submission to a database like Firestore or Supabase.
For the purpose of this article, we'll demonstrate storing the data in BuildShip's database. We'll create a Collection named "Product Newsletter," which will serve as the table name within BuildShip. The Document ID can be sequential, a specific ID, or left blank as optional. The incoming request's Body will serve as the data to be stored.
To wrap it up, we include the return node to confirm the successful saving of information in the database and to send back a 200 OK response.
Step 4: Generate a URL endpoint
Once your workflow is set up with the desired actions, simply click on the Ship button. BuildShip will then generate a URL endpoint for your API.
Copy this endpoint and paste it into the form URL field in Framer as discussed earlier. Now, whenever a user submits the form, their data will be securely sent to your BuildShip API, triggering the predefined actions.
Step 5: Testing the Form
Go to Framer, enter your email and click "Sign Up." You'll receive a confirmation message, and on BuildShip, you can see the logs of all form submissions. The data is saved and processed according to your defined actions, ensuring easy integration between Framer and BuildShip.
You can now insert this form in any part of your Framer page to start collecting and processing your Framer form submissions.
With your fully functioning form in place, you have unlocked a world of possibilities. From simple contact forms to intricate marketplace workflows, Framer Forms and BuildShip allow you to interact with your users and take action based on their submissions. As a low-code solution, you can easily customize and iterate on your forms and workflows without being slowed down by complex coding requirements.
For a full step-by-step video tutorial, refer the video below:
Conclusion
We learned how to use BuildShip to create a truly interactive and dynamic web experience in Framer. You can build your own custom forms today and explore the endless possibilities of easy integration with your preferred databases and workflow automation in your static Framer web pages.
There's a wave of excitement in the tech world with frontend no-code tools changing the game for website creation. These tools let you launch dynamic, interactive websites on a large scale without needing to know a single line of code.
One such platform is Framer. It's become a go-to platform for business owners worldwide diving into the no-code trend to get their businesses online in a snap.
But, as awesome as Framer is, sometimes it doesn't have everything you need. A largely requested wishlist of most users is to build beyond the static logic that Framer natively offers. For instance, maybe you want to send user data to another app, store it in a database, or trigger notifications in your customer's app.
That's where our blog comes in! We're going to show you how to take your website from just looking pretty to being super interactive. Imagine easily sending information from Framer across tools, services, and more—visually with no-code. Let's dive in!
What is Framer?
Let’s first understand what Framer is and what all you can do in it. Framer helps you convert your most expressive Figma designs into full fledged websites with no-code. It offers a sleek interface, animations, and even custom code options for realistic and high-fidelity designs.
As a top-notch design and prototyping tool for creating interactive web and mobile app prototypes, Framer comes with its own suite of collaboration features, design layouts and a built-in code editor. It is the go-to choice for designers and developers aiming to create polished and interactive prototypes in no time.
Building a Backend With No-Code in Framer
Framer hits a limitation if you want to go beyond your frontend. Many a website collect user data, form submissions and analytic events information to build out great user experiences for their website visitors. This is usually done by sending this information to a backend client for further processing.
This is where BuildShip comes in. BuildShip is a low-code AI powered visual backend builder that lets you connect with any tool or service with absolutely zero code required. Gone are the days of hand-coding with NodeJS, setting up a REST API server, and navigating through manual integrations. This means you no longer compromise on the limitations often associated with no-code tools; instead, you have the code accessibility to modify as needed, ensuring unparalleled flexibility.
Connecting to External APIs in Framer Using Low-Code
One of the standout features of BuildShip is its ability to help you ship powerful APIs at scale. This means you can automate workflows triggered by actions like form submissions or specific interactions on your Framer website.
In this blog, we'll dive into how to set up a workflow that captures your Framer form data and securely saves it to your preferred database. Framer Forms, powered by Framer and BuildShip, allows you to create dynamic and customizable forms. Whether it's a simple subscription form, a contact form, or a more complex workflow-based form, you'll learn how to seamlessly integrate and manage your data. Let's get started!
To get started, imagine you're building a website using Framer and you want to add a simple form to collect user information. With Framer Forms, you're not limited to standard form options. Instead, you can create forms with custom fields and tailor them to your specific needs. Whether it's adding additional fields, modifying the form title, or changing the button call-to-action, Framer Forms make it super simple to customize every aspect.
Let's walk through the steps of adding and customizing a form on Framer.
Step 1: Adding the Framer form
First, navigate to your Framer website and add a new code block. Give it a title, such as "Newsletter Sign-Up." You don't need to have any coding expertise to make this happen.
Next, simply copy and paste the code snippet provided here in place of the existing content. Once saved, you'll see the form appear on your website.
Step 2: Customising the Framer form
What if you want to collect additional information or modify the form further? It's as easy as editing the code snippet. Find the relevant sections in the code, such as the form title or button text, and make the necessary changes. Adding new input fields is just as straightforward. Copy and paste the existing input field code, configure it to your needs, and voila! You have a fully customized form.
For those unfamiliar with coding, you can use the power of ChatGPT to do the heavy lifting. Simply provide ChadGPT with your requirements, such as adding a new field, and it will generate the corresponding code snippet. Copy and paste it into Framer, and your new field will be integrated into the form.
Now importantly, you have to submit a form url. This is where the submitted form information is sent to via an API. We’ll be building this API with BuildShip.
Step 3: Processing Framer form submissions using BuildShip
In order to process the form submissions, we'll be using BuildShip to build a low-code visual API. This API will handle the data sent from the submitted form. On BuildShip, you can set up your project and start building workflows. Whether you want to store the form data in a database, send a message to a Discord channel, or even trigger your own custom actions, BuildShip empowers you to design your desired workflow with ease.
To configure these actions, simply set up your workflow nodes on BuildShip. You can choose from a variety of pre-built nodes for common actions like sending messages or storing in a database.
Let’s start by adding a trigger node. You can add a REST API trigger node and specify its path as /newslettersubmission with type set to POST.
Now let's consider a typical scenario where someone submits their email to sign up for a newsletter. Using BuildShip, you can connect the form submission to various actions. For example, you can store the email in a database table, send the subscriber a confirmation email using SendGrid, or even notify your team members of a new sign-up via Slack. Let’s see this one by one.
To add a Discord Webhook click on add node and search for Discord and simply add the node.
Or perhaps, since you are collecting newsletter signups, you’d want to send them an email at some point. With BuildShip, we've got you covered on that front too. Simply integrate any email client node, such as Sendgrid or Mailchimp, to easily add them to your relevant campaigns.
Even if a specific node isn't readily available, you can easily create your own node using BuildShip's AI capabilities.
Alternatively you can store the submission to a database like Firestore or Supabase.
For the purpose of this article, we'll demonstrate storing the data in BuildShip's database. We'll create a Collection named "Product Newsletter," which will serve as the table name within BuildShip. The Document ID can be sequential, a specific ID, or left blank as optional. The incoming request's Body will serve as the data to be stored.
To wrap it up, we include the return node to confirm the successful saving of information in the database and to send back a 200 OK response.
Step 4: Generate a URL endpoint
Once your workflow is set up with the desired actions, simply click on the Ship button. BuildShip will then generate a URL endpoint for your API.
Copy this endpoint and paste it into the form URL field in Framer as discussed earlier. Now, whenever a user submits the form, their data will be securely sent to your BuildShip API, triggering the predefined actions.
Step 5: Testing the Form
Go to Framer, enter your email and click "Sign Up." You'll receive a confirmation message, and on BuildShip, you can see the logs of all form submissions. The data is saved and processed according to your defined actions, ensuring easy integration between Framer and BuildShip.
You can now insert this form in any part of your Framer page to start collecting and processing your Framer form submissions.
With your fully functioning form in place, you have unlocked a world of possibilities. From simple contact forms to intricate marketplace workflows, Framer Forms and BuildShip allow you to interact with your users and take action based on their submissions. As a low-code solution, you can easily customize and iterate on your forms and workflows without being slowed down by complex coding requirements.
For a full step-by-step video tutorial, refer the video below:
Conclusion
We learned how to use BuildShip to create a truly interactive and dynamic web experience in Framer. You can build your own custom forms today and explore the endless possibilities of easy integration with your preferred databases and workflow automation in your static Framer web pages.
