Build LARGE Multi Step Forms for Onboarding in Bubble FAST! Part 2

Enhance User Experience and Data Management Effortlessly

Building intuitive and efficient onboarding processes is crucial for the success of any application. If you're using Bubble to develop your app, integrating multi-step forms can be daunting. However, utilizing third-party form builders like Tally simplifies this process significantly. In this post, we’ll dive into how you can leverage Tally with Bubble to create seamless onboarding forms.

Why Use Tally for Multi-Step Forms?

Multi-step forms guide users through complex workflows, making them more likely to complete the entire form. While Bubble offers robust native tools, third-party platforms like Tally enhance functionality and offer a more streamlined approach to creating and editing forms.

Benefits of Using Tally

• Simplified Editing
• : Making adjustments to your forms in Tally is quicker compared to modifying multiple group elements in Bubble.
• Ease of Integration
• : Tally integrates smoothly with Bubble via webhooks, allowing effortless data transfer.
• Advanced Features
• : Take advantage of Tally’s integrations with platforms like Slack and Zapier for robust notifications and actions.

Step-by-Step Integration Guide

Let’s break down how you can integrate Tally with Bubble to create powerful multi-step onboarding forms.

Setting Up Your Form in Tally

1. Create Your Form: Start by building your form in Tally. Include all necessary fields, and keep in mind how you want the user experience to flow. Tally allows for various input types, including text areas, linear scales, and more.
2. Publish Your Form: Once you’re satisfied with the design, publish your form. This action provides you with various settings, including integrations.

Connecting Tally with Bubble Via Webhooks

Adding a New Workflow in Bubble

1. Create an API Workflow: Navigate to the backend workflows in your Bubble app and add a new API workflow. This is where the data from Tally will be received.
2. Set Workflow to Public: Ensure the workflow can run without authentication since the user data will be submitted from Tally, not Bubble directly.
3. Detect Request Data: Set the workflow to detect incoming data. This mode allows Bubble to understand the structure of the incoming data from Tally.

Configuring Webhooks in Tally

1. Copy Webhook URL: Copy the webhook endpoint provided by Bubble and paste it into Tally’s webhook integration field.
2. Send a Test Event: Test the integration by sending a test event from Tally. Ensure the data appears correctly in your Bubble workflow.

Handling Different Bubble Versions

Remember that webhooks are version-specific in Bubble. If you’re working with both a dev and live version, either duplicate the form for each version or update the webhook endpoint accordingly.

Example: Sending Email Data

To match form submissions with corresponding users in your Bubble app, you need to include a hidden field in your Tally form, such as an email field. This step ensures the user’s email is included in the data sent to Bubble.

Saving and Utilizing Form Data

Once the Tally form data reaches Bubble, split and save it into the appropriate fields in your Bubble app. This will be covered comprehensively in part three of our tutorial series.

1. Register Page: Create a clear flow where users register and then are directed to your Tally form with the email parameter attached.
2. Dividing Data: In your Bubble workflow, parse the JSON data from Tally and save it in the relevant Bubble database fields.

Advantages and Disadvantages

Advantages

• Flexibility
• : Easily adapt and modify forms as your MVP evolves.
• Efficiency
• : Quicker adjustments without reworking multiple Bubble elements.

Disadvantages

• Additional Steps
• : Each new field added to your Tally form requires reinitializing the data detection in Bubble.

Conclusion

Integrating Tally with Bubble for creating multi-step onboarding forms vastly improves the user experience and streamlines the data collection process. Although there are some intricacies involved, the efficiency gained in form management and the enhanced flexibility make it a worthwhile endeavor.

Stay tuned for part three, where we’ll walk you through saving and categorizing your form data into Bubble seamlessly!

‍