The form-building experience on CodeDesign.ai has undergone a significant revamp, making it easier and more intuitive to create and manage forms on your website. Previously, setting up forms involved a lot of technical steps, like creating databases and connecting fields—tasks that could be time-consuming and complex. But with the latest update, CodeDesign has streamlined the entire process, allowing you to build and customize forms without the technical hassle.
Let’s dive into how this new and improved form experience works.
Getting Started with the New Form Experience
To demonstrate the new features, we’ll use the ‘Pro Portfolio’ template from the CodeDesign template library. This template includes an email subscription form and a general contact form—perfect examples to showcase the updated functionalities.
Select a Template: Start by selecting the template for your project. After clicking the ‘Use Template’ button, give your project a name—let’s say “demo form a”—and launch the project.
Selecting the template for the demo
Naming the project
Update to the Latest Form Component: If you’re using an older template or a custom design, you might see an option to "Update to Latest Component." Clicking this will ensure that you’re working with the newest form features available.
Customizing Your Form
Once your form is ready on the page, you’ll see all the form elements displayed in the right sidebar. These include fields like text, email, long text, and a submit button.
Here’s how to make the most of the new customization options:
Naming Your Form: The first step is to give your form a name—such as "Contact Form." Naming your form is crucial because it helps organize and manage the data collected.
Editing Fields: Click on any form field to edit its name and placeholder text. For example, you can change "Full Name" to just "Name," and it will update instantly on your form.
Adding New Fields: Need more fields? Click the "Plus" button to add additional fields, like a website URL. Once added, you can style and reposition these fields by dragging and dropping them to the desired location.
Styling Your Form: Match new fields to the existing design by tinkering with the 'Style Settings'. You can tweak aspects like border radius to ensure a consistent look across all fields.
Introducing the Data Hub
One of the standout features in this update is the Data Hub which can be accessed from the footer of the builder.
This tool automatically creates a database for your forms, eliminating the need for manual setup. After publishing your project, try going to the webpage and then enter and submit some sample data like as shown in the screenshot.
The form submission process is seamless. Once a data is submitted via the form on your webpage, all the collected data is stored in a new table within the Data Hub, named after your form.
Managing Multiple Forms
If your website includes multiple forms—like a contact form and a subscription form—each form’s data is organized in separate tables within the Data Hub. This makes it easy to manage and review submissions from different forms independently.
Video Guide | The Revamped Form Experience
We've put together this extended video guide on CodeDesign Academy if you prefer visual learning.
In a nutshell, the new form experience on CodeDesign.ai simplifies the process of creating and managing forms, making it more accessible for everyone, regardless of technical skill. Whether you’re setting up a single contact form or managing multiple forms across your website, the updated features ensure a smooth, efficient workflow.
Stay tuned for our upcoming guide on the newly launched funnel feature. If you have any questions or need further assistance, feel free to reach out through our support channels or community forum. Happy designing!