Use Render State to Switch Between Forms in JetFormBuilder

Use Render State to Switch Between Forms in JetFormBuilder and streamline user experiences by integrating multiple forms into a singular interface. This functionality not only simplifies the design but also enhances user engagement by offering a seamless transition between forms based on specific conditions.

Prerequisites

Please make sure you have the following installed and activated:

• JetFormBuilder

Additional Knowledge

Integrating switched render states into your forms can be highly versatile. Here are a few use cases to consider:

• User Authentication
  Toggle between login and sign-up forms based on whether the user is new or returning.
• Content Access
  Change the form displayed based on user selections, such as different access levels or subscription plans.
• Feedback Forms
  Switch between different forms based on the type of feedback the user selects (e.g., service, product, general).
• Dynamic Surveys
  Present different sets of questions based on previous answers to tailor the survey as it progresses.
• Profile Management
  Allow users to switch between viewing their profile information and editing it, enhancing user experience with a clean, uncluttered interface.

Instructions to Use Render State to Switch Between Forms in JetFormBuilder

1. Navigate to JetFormBuilder > Add New or edit an existing form.
2. Insert a Conditional Block by clicking on the + Add Block button and searching for “Conditional Block”.
   
3. Set the operator to “Is render state” and add a render state, e.g. “Default State” to determine when this form should be displayed.
   
4. Repeat steps 2 and 3 for your registration form, ensuring to set a different condition for the render state (e.g. Operator = Render state, Reder state = Register.Form).
5. Add an action button within each conditional block and configure it to change the render state upon click, facilitating the switch between your forms.
   

Official Documentation

• JetFormBuilder Documentation

Use Render State to Switch Between Forms – Conclusion

By leveraging the render state feature in JetFormBuilder, WordPress site owners can enhance user interaction through efficient form management. This tutorial demonstrates a straightforward approach to implementing a dual-form mechanism, encouraging a smooth and engaging user experience.