formcrafts / embed

0 stars 0 forks source link

[FEATURE REQUEST] myPopupForm.reset() and myPopupForm.on('submit') #3

Closed LeonardoRick closed 2 months ago

LeonardoRick commented 3 months ago

Hey! I think those two methods are essential for this package.

1.

The first scenario I faced was that I don't want the user to open the form with pre-filled information. When, by any reason, he closes the popup, the next time it opens I want it to be in the initial state.

I was trying to reset the values with this two solutions but both gave me errors

Solution I tried result
form.values({field33: ''}); image
form.values({field33: null}); image

As you can see, even reseting the value with an empty string do not provide me a fully reset form, which is not the perfect experience.

A method like form.reset() could allow us to reset the values of the form and mark it as not touched so it's in it's initial state.

2.

Secondly, after submitting the form, sometimes I want to be able to submit it again. If I'm in the same page that's actually not possible since the form enters in a completed state and there's no way to interact with it even opening it again.

Of course I could destroy it's instance and re-create it after, and this would solve my problem. But when should I do that? I don't know exactly when the form was completed so I don't think there's a way to know the right moment to create a new instance of the pop-up.

Form completed (can't refresh this page cause I don't know if the form was actually submitted or not)
image

A event like form.on('submit') would allow us to track the form submission and handle it properly.

If there are other ways to achieve what I need here, please, let me know. Again, thanks for the amazing lib!

nCrafts commented 3 months ago

I have added support for a submitSuccess event in 1.0.22-rc.1. Please try that and let me know if that works.

We don't currently support a form reset. Destroying the instance and re-creating it would be the way to go. Allowing form reset (or resetting the validation state of a field) messes up with field interaction tracking and drop-off rates. We will hold off on that for a while.

nCrafts commented 3 months ago

@LeonardoRick Let me know if this worked. (And we patched a pre-fill bug today so if you were running into an unexplained issue, I hope that's resolved after today).

LeonardoRick commented 3 months ago

@nCrafts thanks a lot for the feature! It's on my radar and I'll try to find some time to implement it tomorrow

LeonardoRick commented 3 months ago

Hey @nCrafts I'm not being able to make it work, am I doing something wrong?

Is there some specific way to submit the form to trigger it?

Code Form
image image

The network tab also shows a 200 OK indicating that the request went through

Status Preview
image image
nCrafts commented 3 months ago

We have updated the event name to submit:success with version 1.0.22-rc.7, and updated the build files (which was probably causing the issue you were facing). Please try now with that version and this code format:

myPopupForm.on("submit:success", () => {})
LeonardoRick commented 2 months ago

Hey @nCrafts sorry about the delay but it worked like a charm!! Do you want me to open another issue with the first request (related to form.reset()) so this one can be closed?

nCrafts commented 2 months ago

Yes, that would be great. Thanks.