Using Form in a Modal

[purplegirldiana]

Thanks for this wonderful contact form, Jon! :-)

I have the form working fine on a regular web page. However, I still can't get the form to work in a Bootstrap 4 modal after spending the better part of the last two days trying to find a solution. When attempting to submit the form when its displayed in a modal, everything works fine up to and including the reCaptcha, but then nothing happens upon clicking the send button. I'm learning, but at this point my knowledge of JS is rudimentary at best, so I haven't had any luck with troubleshooting the problem. Among the things I have tried is adding $("#myModal").on('shown.bs.modal', to the beginning of contact-form.js, but it made no difference. Any ideas on how I can make the form work in a modal?

[jonmbake]

Hmm... As long as you copied everything within the form tag in index.html to the modal body, it should work. Are there any errors in the console? If you open up the console when the modal is open, and run $("#feedbackSubmit") does it return the button w/i your modal? Also, make sure there is only one button on the page with an id of feedbackSubmit.

[purplegirldiana]

Yes, I copied everything within the form tag to the modal body. There is only one button on the page. There are no errors showing in the Firebug console. Running $("#feedbackSubmit") does return the button. If I intentionally leave a required field blank or skip the reCaptcha, clicking the button does produce the appropriate error message. But, if the form is filled out correctly, nothing happens when the button is clicked.

[jonmbake]

If you go to the Network tab, is it actually making a request on Submit?

If this is publicly available on the web, email me at jonmbake@gmail.com and we'll get it figured out.

[purplegirldiana]

It turns out that the problem was that I had carelessly created duplicate IDs in the modal and it took me a while to notice this really simple, dumb error! The form works great in my modal now. Thanks to Jon for helping me via email in my effort to troubleshoot what turned out to be a nonexistent reCaptcha problem.