📋 Building powerful & elegant forms in your Bubble SaaS app. - Issue #15

Happy Friday!

If you’re building a SaaS application, it’s likely you’re going to use forms throughout your app.

Whether it’s in your signup process, settings or in your actual app’s features - forms have a powerful part to play in how users interact with your app.

Fortunately, it’s possible to build very complex form experiences using Bubble.

Whether with conditional logic, error handling, jump logic or styling - you have the power to build very complex form experiences without any code.

This week, I’m going to cover a few key form experiences and share some examples of how I handle complex forms in my own application, UserLoop.

Conditional Logic

Sometimes, you might need to build forms where fields are only shown in certain circumstances.

For example, if the user checks a checkbox saying they would like to use a coupon code, you would want to show the coupon code text entry field.

Here’s how it would look in our app…

Using conditional logic to show and hide a form field... with animation!

To achieve this effect, we need to do a few things. In this example, I am going to use the Ionic Checkbox plugin to add a checkbox that shows and hides a form field.

1 - Place all your form field elements inside a group.

To show and hide a specific form field, it needs to be inside it’s own group. I typically have 4 elements inside my group…

• Field title.

• Text entry field

• Container for the text entry field to apply styling

• An overall group containing all of the above to allow me to show and hide the whole group.

Here’s an example of all the elements for a single form field…

Add all your form field elements inside a group.

2- Apply conditional logic to show and hide

Next, we need to apply the rules to our form field group to tell it when to show and hide.

First of all, we need to make sure the form field group is not shown by default on page load.

To do this, highlight the top-level group for your field and make sure the ‘This element is visible on page load’ box is unchecked.

Make sure the group is not shown by default on page load

3 - Apply some simple styling & animation rules.

When the checkbox isn’t ticked, we want the group to fully collapse so there isn’t a big empty space where the field would be.

To do this we need to check the ‘Collapse this element’s height when hidden’ field.

It’s also nice to apply a little bit of animation here, so when the user checks the box, the field slides in to view nicely.

Collapse the form field's group when hidden + apply animation

4 - Apply the rules to tell the field when to appear

To this, you need to flip over to the ‘Conditional’ tab on your master field group.

Here we will need to create a new condition to tell the form field when to show…

Add conditional logic to the master field to tell it when to show.

As you can see, we’ve added a rule which says…

When IonicCheckbox Coupon Code is checked, the element should be visible.

This will mean whenever the coupon code checkbox is checked, this field will animate and be visible to the user.

Handling Errors Gracefully

While Bubble has a ton of built-in form validation options, these aren’t always super flexible and you might want to provide a more refined experience for your users.

In the below example of the UserLoop homepage signup form, you can see I have used some custom logic to shake the input field and show an error toast message when the field is blank.

When a user doesn't enter a value, the form shakes and an error is shown.

You can use this technique to highlight really important text entry fields, probably things which are part of your signup process.

Here’s how it works…

Firstly, we need to make sure the form field we are using is inside it’s own group with styling applied to allow us to animate it.

We’re going to use workflows to decide whether the data inputted to the form is valid or not, and trigger different actions based on that.

Firstly, let’s look at the workflow which is triggered when the user’s input is not valid.

Run this workflow when the user's input is not valid

As you can see, we have a workflow which will only run when the following condition is met…

Run the workflow when… Input Your Email’s value is empty

This means this workflow will run whenever the field is empty.

In that workflow we can then trigger two actions to tell the user there is a problem…

• Pop a toast message (using this great Toast message plugin) telling the user they need to enter data into the field in order to proceed.

• Animate the text entry field. We want to shake the group containing the text entry field to show

Use the animate action to 'callout shake' the group containing your form field.

Conversely, we need another workflow which will run when the user’s input IS valid, so they can continue signing up!

Second workflow which only runs when the input is valid.

Universal Styling

As you’re likely going to use form fields in multiple places throughout your app, I highly recommend setting up universal styles which you apply to all your form fields across your app.

Not only does this help keep your app fast through minimising inline styles, it also means if you want to make a change to the look and feel of your form fields or groups, you can do it from the ‘Styles’ tab and it will update them throughout your app.

For example, I have a default style for all my text input container groups (which I put my text entry fields inside) to keep everything looking uniform and the same.

Create a default style for your form field container groups

That's it for this week!

Hope you found this issue interesting, making your forms look great is one of the most important things you can do to make your app look professional so it’s worth spending some time to make them look uniform.

Huge thanks to Felix for suggesting this week’s topic - do you have any topics you’d like me to cover? Drop me a reply!

In the next few weeks, I’m going to be covering….

• The best UI templates and kits - which one is right for your app.

• How to set up the Postmark API to let your app send beautiful transactional email

• Building a custom Slack, Zapier and Webhooks integration for your application.

Have a great weekend and happy building!

James