Modal element and error warning notification in Gravity Forms

[ccwadsworth]

Hello, I have a form on this page which is embedded in the Apply button (modal).

Watson Caring Science Distinguished Lotus Award - Watson Caring Science...

It is using the Off Canvas element with Gravity Forms embedded, however if there is an error message, like a required field not being complete, I do not see the message. It just goes back to the page. I’m not even aware there is an issue. I don’t see the message unless I click the Apply button again.

Is there any way for the user to know there is an error on the form without it closing the form?

Appreciate your help, thank you!

[friech]

Hi @ccwadsworth,

Thank you for writing in, It seems you can not place this kind of form inside a modal element because when you click the submit button it reloads the page.

Other forms do not reload the page, it just pops the warning/notice, please check your form configuration. There might be an AJAX option to not reload the form.

Thanks,

[ccwadsworth]

Thank you for your response. I can see there is an option for Ajax, but I do not know how to use it.

I have selected the button, but that does not fix the issue; I assume there are more settings I need to use?
Any suggestions would be appreciated. Thank you @friech!

[prakash_s]

Hello @ccwadsworth,

I would suggest you use the shortcode of the Gravity forms and add this ajax=" true " parameter to the Gravity forms shortcode.
Please have a look at this article https://gravityview.co/gravity-forms-ajax/

Please let us know how it goes.

Hope it helps
Thanks

[ccwadsworth]

Thanks so much @prakash_s!
That helped with the error message, which is a big help!
However, not with Save & Continue… I just get the faded background …

[ruenel]

Hey @ccwadsworth,

Regretfully the AJAX Gravity form does NOT work perfectly with the modal especially because your form is too long to display in the modal. You really have to scroll to get to the submit or save button of the form. Once you save it, you will see the faded background. If you scroll the page, you will see the form response.

This is what I meant and seeing after saving the form:

It is best that you limit the height of your form by having a multipage form. Please check this out:

• https://docs.gravityforms.com/creating-multi-page-forms/

Best Regards.

[ccwadsworth]

Brilliant suggestion @ruenel!
Works perfect.
I really appreciate your help!

[tristup]

Hi @ccwadsworth,

Glad that we are able to help you.

Thanks