Introduction
In today's digital landscape, collecting data through online forms is crucial for businesses and organizations. With CodeDesign's powerful website builder, you can easily create and connect forms to a database, allowing you to collect and manage valuable user information. In this article, we will walk you through the step-by-step process of setting up forms with CodeDesign Database, empowering you to efficiently gather and utilize data for your projects.
Step 1: Open CodeDesign and Select Your Project:
Start by logging into your CodeDesign account and accessing the project in which you want to add forms. If you don't have a project yet, create a new one based on your requirements.
Step 2: Adding Forms to Your Project:
To incorporate a form into your project, there are two methods you can choose from.
The first method involves dragging and dropping a "Form Block" component from the elements tab in the sidebar.
Alternatively, the second method allows you to select a pre-designed form component from the design library and customize it according to your needs.
Let's go with a prebuilt form that contains input fields for Name, Email and Phone Number.
Step 3: Connecting Forms to CodeDesign Database:
After adding the form to your project, select the outer form element and navigate to the "Functions" tab. Look for the "Element's form is submitted" option under the "Choose an event" button. Click on it and then select the "Connect Database to form" option from the dropdown menu.
Step 4: Creating and Configuring Your Database:
If you haven't already created a database for your project, you will see an error message indicating the absence of a database. Click on the "Create a database" button to create a new database. If you already have a database, select it from the dropdown menu.
Step 5: Designing Your Database Table:
Once the database is selected, click on the "Create Table" option. Provide a table name, description, and define the primary field (e.g., email) with its corresponding field type. You can add additional fields such as name and phone number with their respective field types (text or phone number) to capture relevant information.
Step 6: Mapping Form Fields to Database Fields:
Return to the design workspace and access the functions option. Here, map the form input fields to their corresponding fields in the database. This ensures that the data entered in the form is correctly stored in the designated database table.
Step 7: Configuring Form Submission Redirect:
In the "Redirect" section, specify the URL or page where users will be directed after submitting the form. Update the settings to save your changes.
Step 8: Deploy and Test Your Project:
Once you have completed the setup process, deploy your project to make it live. Test the form by entering data and submitting it. You can review the collected data in the "App Data" tab of the Database Workspace in the CodeDesign Builder.
Setting up forms with CodeDesign Database enables you to efficiently collect, manage, and utilize valuable user data. By following these steps, you can seamlessly connect forms to databases, ensuring that the information submitted through your website is securely stored and easily accessible. Leverage the power of CodeDesign's intuitive platform to streamline your data collection processes and make informed business decisions based on accurate and valuable insights.
Note: You can directly save data from your form to a Google Sheet using 'Webhooks' integration on CodeDesign. Click here to learn more.