Two certificates, not one
Instead, the form comes from an external Hostgator site that uses HTTPS and Facebook's certificate.
This is wrong.
The main page, hosted on apps.facebook.com, uses Facebook's certificate, since it's a Facebook site.
The iframe hosting the form comes from (came from, as Hostgator has taken the site down) gator4207.hostgator.com, in Mutton's example. It sends a certificate for *.hostgator.com, of course; otherwise the browser would show a security warning.
The problem is that when a page combines content from multiple sources, and two or more of those sources are using HTTPS, browsers don't alert users to the discrepancy (as they do for, say, a mix of HTTP and HTTPS sources). It's common for sites to mix content this way, for example with external images or scripts on HTTPS sites. So users would quickly disable or ignore such browser warnings anyway.
This is broken by design. Websites assemble content from multiple origins; browsers communicate that to the user as a single document. We need a conceptual extension of the SOP to communicate that security boundary to the user, in a clear fashion. Good luck with that.
On the other hand, a start would be for browsers to warn the user if a form submission was headed to some destination not in the main page's origin (per SOP). IE had (has?) that "warn if form submission is redirected" option, which is misnamed and, if memory serves, did not communicate a warning that would be useful to non-experts. But it's the right idea.