[Solved] Form Inside ThickBox, but Clicking Submit/Field Validation Destroys It!

I have a link on a webpage, that when clicked opens up a window overlay (using ThickBox http://jquery.com/demo/thickbox). In that window I have a form. I’m using eForm to generate the information in the window overlay. The form is styled and all the information appears as it should. eForm has built in validation, and if I leave any of the required forms blank, I get the validation error message checks.

This is fine, however, when I click to submit the form (and it either displays validation errors, or the thank you page), the result is an unstyled page ("/contact") with a plain white background, and the ThickBox overlay window is destroyed. I suspect there are some things I need to change in either eForm itself or the form call.

Here’s the info:

This is the anchor tag that calls the ThickBox


Form Action


Perhaps I need to somehow get the info from the anchor tag to piggyback onto the action. Not sure how to fix this.

Any suggestions?

Presumably Thickbox fetches the form using an AJAX call. When you submit the form however you go directly to the ’/contact’ page. You’d need to do additional javascripting to get the results of the form inside the thickbox.

You could also try using the iframe options of Thickbox...

I tried an iframe—and that solution does work—however, the content in an iframe is considered its own page and the text loses all its styling, since as far as know, there’s no way to have a stylesheet target the contents of an iframe—unless of course maybe through JavaScript.  :’(

A JavaScript solution sounds about right, however, I’m not advanced enough to be able to write that stuff from scratch (more of a manipulate what already exists to get it to work).

I was hoping there’d be somethings simple within eForm or its calls that I can slightly change to get it to work. Any ideas, or is this a little more complex than that?

I tried an iframe—and that solution does work—however, the content in an iframe is considered its own page and the text loses all its styling, since as far as know, there’s no way to have a stylesheet target the contents of an iframe—unless of course maybe through JavaScript.

Simply assign a stylesheet to the page that is loaded into the iframe. For instance by assigning it a template.

I was hoping there’d be somethings simple within eForm or its calls that I can slightly change to get it to work. Any ideas, or is this a little more complex than that?

No, sorry no simple eForm magic for this situation. eForm can not and does not know anything about the page in which it is called. It’s either an iframe or some "complex" javascripting.

Thanks for your suggestions. I ended up going the iframe route this time.