使此联系表单使用Javascript响应

Question

I'm very new to javascript but in mid-level with HTML and CSS.

So here is the issue. I just registered a third party contact form service with Foxyform. They provided a code to paste in the page and upload it. It works fine in desktop views, however when one visits the contact page on different mobile or smaller devices it looks out of space and non-responsive. There is no option to edit it in @media screen within the theme.

Is it possible to make this contact form responsive?

Here are the codes:

HTML:

<a id="foxyform_embed_link_602624" href="http://www.foxyform.com/"></a>

Javascript:

(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = "http://www.foxyform.com/js.php?id=602624&sec_hash=54f3ab77bfb&width=350px";
s.parentNode.insertBefore(g, s);
}(document, "script"));

Answer 1

Your contactform provider includes an iframe in your page.

An iframe can not be styled by the website on which is it included as most browser handle it as an own webpage which is embedded in another webpage.

Answer 2

Found a fix with CSS (not jquery/javascript sorry) ( for googleCalendar iframe ) but I used the same concept for foxyForms iframe.

via https://thomas.vanhoutte.be/miniblog/make-google-calendar-iframe-responsive/

html

    <div class="responsiveCal">

      <iframe src="https://calendar.google.com/calendar/embed? showTitle=0&amp;showDate=0&amp;showPrint=0&amp;showCalendars=0&amp;showTz=0&amp;height=600&amp;wkst=2&amp;hl=nl&amp;bgcolor=%23FFFFFF&amp;src=example.be_cpkbjcpttgb5q0%40group.calendar.google.com&amp;color=%23ffcf03&amp;ctz=Europe%2FBrussels" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
    </div>

css

    .responsiveCal {

      position: relative; padding-bottom: 75%; height: 0; overflow: hidden;

    }

    .responsiveCal iframe {

      position: absolute; top:0; left: 0; width: 100%; height: 100%;

    }

It allowed me to place a row within the container as well to use bootstraps responsive classes. Hope this is right, I'm still a beginner please feel free to correct any mistakes I made..