2

I have an iframe form from a web app I use (the form is a custom inquiry form that gets added to my diary within the web app), I am trying to embed this on my website currently.

So embedded in an iframe this forum loads on my main website however I wish to style it to look like my website ect.

Now I already had a very basic "contact us" section that I was just going to replace this with, has all the styling that I want ect all setup, so I had the idea that I could just embed this form on my page, set it to hidden and just expand my current contact us form with all the same styling as to have the same options as the new form.

From here I would just grab the text from "firstName" and put it into the iframe's "firstName" textbox.

It's kind of a "workaround" idea but I feel like it's the simplest way, the issue I am having is javascript isnt allowing me to set data from the iframe as it's from a different source. Of course this form is hosted on a completely different website.

Is there any way I can do this, or is my best alternative to just go through and style it?

Any help/advice would be appreciated greatly.

1 Answers1

2

Assuming you don't control the website on which the form is hosted

You're pretty much screwed. Due to Same Origin Policy, you're not allowed to arbitrarily change content in the iframe. That'd be a huge security concern. For example, you could embed an iframe loading Facebook's login page, but also log the password the user types.

You can read more about Same Origin Policy here

If you do have control of the web server

Then your best bet is to use postMessage() to get the job done.

Community
  • 1
  • 1
xyhhx
  • 6,384
  • 6
  • 41
  • 64
  • Let me know if you need more detail, and I can provide some code examples – xyhhx Mar 13 '17 at 16:41
  • Thank you, unfortunately I don't control the domain it's on. I guess I will just have to style the iframe, would have been much easier doing it the other way but if its impossible then I have no choice. – MagicalMidge Mar 14 '17 at 09:19