Google form using iframe tag - How to make form area either responsive or taller

2 replies · opened Jun 27, 2019

OobjetdaJun 27, 2019

If you could help on this request would be much appreciated.

I've been given a google form from client that they would like embedded within one of the pages. Google supplied the code as an iframe tag but it didn't seem to work. I've currently set it to reference a href tag and reference canvas's iframe via the data-lightbox ref. This works but I can't seem to nominate sizing or have it dynamically size to device. Could someone please look over the below code and add any help to the situation, or let me know if the below is correct. Also I have attached an image so you can see the proportions I'd like to achieve.

<div class="section nomargin nobottommargin dark">
<div class="divcenter center" style="max-width: 920px">
<h4 class="nobottommargin t300 ls1 color">Fill out our enquiry request form today.</h4>
<h2 class="nobottommargin t300 ls1 color">
Enquire Now--></h2>
<!--<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScO0KxeZzhoCmjM4c-H8ixcqJc7wmsOQG_R__3HbtR1lJnxIg/viewform?embedded=true" width="700" height="520" frameborder="0" marginheight="0" marginwidth="0">Enquire Now</iframe>-->
</div>
</div>

SSemicolon WebSTAFFJun 27, 2019

Hello,

Unfortunately, the Lightbox iFrame functionality is controlled by the Magnific Popup Plugin. You can consider using the following CSS Code:

.mfp-iframe-holder .mfp-content { max-width: 650px; }
.mfp-iframe-scaler { padding-top: 100%; }

However, this is not Fool-Proof and you will need to consider doing your own tests for this.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

OobjetdaJun 27, 2019

Thankyou, that has helped but will test further.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard