asked on

How to format a form pulled in with an iframe using CSS

Is it possible to make a form responsive for mobile phones that lives on another server and is pulled into a page using an iframe? This is a bill pay form. The setup provided by the merchant services vendor does have a custom CSS option via a field they provide in their page building app used to setup the fields, labels, buttons, etc. Tried it but won't work so far. Main issue is the iPhone.

HainKurt

if they are on same server/domain, you can manipulate html/dom and add classes

add/load dynamic css file into it like

if (document.createStyleSheet){
  document.createStyleSheet('style.css');
}
else {
  $("head").append($("<link rel='stylesheet' href='style.css' type='text/css' media='screen' />"));
}

Open in new window

but if they are on different domain you cannot change anything...

Jack Andrews

ASKER

Thanks, but is there anything they can do on their end for the display in an iframe?

HainKurt

yes, they can convert their site to responsive design :)

there are lots of websites that shows this, here one of them

Responsive Web Design for Beginners - How to get started in 3 steps
https://www.youtube.com/watch?v=Up_NC-qGzuI&t=168s

just google "how to convert a site to responsive" and check those websites...

Jack Andrews

ASKER

They already use bootstrap but the CSS file is named bootstrap2.css
Here is the link to the page we are trying to display in the iframe: https://secure.goemerchant.com/secure/custompayment/dallasplumbingcompany/4494/default.aspx?

HainKurt

I could not get the issue...

you just put this page in an iframe and it should work as is...
what are you trying to do actually?

https://support.goemerchant.com/payment-page-builder.aspx?article=advanced-tab

what it says is:

Custom Code

You have the ability to add custom CSS and Javascript code to your payment page. To do so, add the code to the respective Custom CSS or Custom Javascript text area. This is useful for adding additional styles or making changes to the existing page. Click Save when changes are configured.

so, you should login here, then add your custom css and save it
then embed in an iframe and you should be good to go...

Julian Hansen

The iframe is a protected space - think of it as a completely different browser.

Any styling changes you want to make you would need to make in the page that is sourced in the iframe.

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.