Manually Setting Form State

Technical Questions
, , ,
1

Builder content link

Builder public api key
4223f1175d6e41279d7e7df3f0e4a45b

What are you trying to accomplish
I have a bit of a unique layout on my page due to some business requirements where I have two forms, Form A and Form B.
Both forms are configured with Send submissions to set to Custom and Send with js is enabled for both of them.
Form A is visible to the client and is where they fill out all of their information before hitting Submit.
Form B is hidden from the client and is being used with a Third-Party library (Marketo).
Behind the scenes, when the user clicks the Submit button in Form A, it loads the values into Form B and then submits Form B. Form A is never truly submitted. This is all working fine.
However, our UI Designer would like to take advantage of the different state options (unsubmitted, sending, success, error) on Form A to display feedback to the user. Since Form A isn’t ever actually being submitted, those states never get triggered.

  1. What events does Builder.io use to trigger the state changes in case I have to hook something up via code? Is the code for it on GitHub somewhere that I could see how it’s being done?
  2. Is there an easy way I could manually set the different states of the Form via the UI without having to utilize custom code? For example, rather than displaying different Text in Form B based on its state, I could display Text in Form A based on Form B’s state?
  3. Is there an easy way I could manually set the different states of the Form via custom code?

Code stack you are integrating Builder with
NextJS

2

Hi there,

Thanks for writing in the forum.

Inside of your Form element, you would be able to utilize built in events such as Click, Mouse Enter, Mouse Leave, etc… from the Element Events tab: Loom | Free Screen & Video Recording Software | Loom

There is also a great article regarding how one would be able to manually set state using custom code. Essentially, you can manually set state with Javascript like this: state.yourState='anything';

I’ve linked the article below:

3

I need the Form state though, such as unsubmitted, sending, success, error. I need the actual values that Builder is using to trigger the functionality available on the Visual Editor - custom ones won’t work. I also have multiple forms throughout the page, so I wouldn’t be able to specify something globally like state.formSubmitting = true since that would affect all forms.
I was able to come up with a workable solution for now that doesn’t take advantage of the Builder states, but am still curious if I could tie into them somehow. After looking at what I assume is the code on GitHub, it looks like there are a lot of Todo comments, so I suspect what I’m trying to achieve isn’t currently possible.

4

That’s interesting! In this case, you may be able to just keep creating state, such as state.form1something, state.form2something so that state only gets affected from actions from that particular form. Would you be able to target the specific form on the page using something like document.getElementById and then use your success/error/unsubmitted events to update state from a particular action?

5

Hi I have a question I have two launch models on same page. I add state to both of them but when button of one modal click it doesnot show second modal. Tell me how to achieve this functionality