December 5, 2022

How to use Reactive

In this quick tutorial, we'll use the Reactive feature to create a dynamic field in our Smart Form that pops up whenever the client fits a certain criteria.

We're building a User Registration form that must fit brand-new users and also new users from a paying organization. So while most of the Form's flow remains the same, if the user's company is already a client, we'll add in a Client ID field to their registration.

The only extra step is building the reactive function before our regular Page: if the current_client  is marked as “Yes”, we'll return the new Client ID field. Then just add the function into our Page:

def render(partial):
    if partial["current_client"] == "Yes":
        return Page().read("Enter client ID:")

onboarding = Page().display("Welcome to new user registration.") \
            .read_email("Enter the user's email:", key = "email") \
            .read_date("Enter creation date:", key = "date") \
                "Is this user from a company that's already a client?", 
                ["Yes", "No"],
                key = "current_client") \
            .reactive(render) \

After this easy registration flow, you can do almost anything with the info: send it to your CRM, to a database, or send a personalized welcome email, for example. Check out our use cases page for more.

As we've seen, with Reactive you can make your pages respond according to user input. This means widgets being added, removed or having it's validation type changed within the Form's flow. That's less code and logic to get in your way.

Start building right now.

Schedule a 15-min chat with us for a kick-start in your project + free credits here.