While working on a side project (a wedding site for a friend), I ran into an issue. Bootstrap’s modal feature is awesome- super easy to set up- and I used it as my ‘contact’ link. A user can click the contact button, a modal fades in with the form, they submit, and we’re good to go.
Worked great on most pages, but on a couple, I had other forms. One is the guestbook (html form that sends to a php/mysql driven database to store/display comments). The other is the rsvp form (hijacked Google doc form- submission inserts data directly into Google doc they’re using to track guest info. I think my confusion started when I decided to ajax the forms in (so I could do some cool display stuff post-submission and stay on the same page).
Long story short- when I submitted the contact form, I could see the rsvp or guestbook jquery effect events firing in the background (on the main page). I’d ‘prevent defaulted’ myself into trouble.
Of course, the answer was simple (though not simple to find). I was calling to both forms by the basic ‘form’ tag instead of using ids for each form. As soon as I switched my jquery function to grab each form individually by id, everything worked great.
Now if only I could get my email server to take less than 20 minutes to deliver the contact form, I’d be good to go!