Contact form not showing properly on mobile variant?
Hi Everyone, have a contact form (pasted in the body of a rectangle used as a placeholder) which works flawlessly on the PC variant of my site. But using the same approach on the mobile variant on shows only 2 of the 4 form objects! So I have name, email and message fields with a contact button. Only the first two show on the mobile version, even though I've tried adjusting width and other settings on the form in the html code, but no change? Is there something simple I've missed?
Thank you so much in advance for any help :)
Re: Contact form not showing properly on mobile variant?
You may need to create a new form rather than copy and paste, even if the form is virtually the same.
Re: Contact form not showing properly on mobile variant?
A clue to the Placeholder code would help.
Acorn
Re: Contact form not showing properly on mobile variant?
Thanks to both for your replies, I will try generating another piece of code for a separate form, but in the meantime, here's the source code that is pasted into the body of the rectangle placeholder (with specific address information edited out)...
<iframe src="https:..." style="border:none;width:100%;" scrolling="no" id="..."></iframe>
<script src="https:..."></script>
Suggestions or hints very welcomed :)
Re: Contact form not showing properly on mobile variant?
Quote:
Originally Posted by
wwdileie
Thanks to both for your replies, I will try generating another piece of code for a separate form, but in the meantime, here's the source code that is pasted into the body of the rectangle placeholder (with specific address information edited out)...
<iframe src="https:..." style="border:none;width:100%;" scrolling="no" id="..."></iframe>
<script src="https:..."></script>
Suggestions or hints very welcomed :)
height is an essential attribute.
Acorn
Re: Contact form not showing properly on mobile variant?
Quote:
Originally Posted by
Acorn
height is an essential attribute.
Acorn
Height of which, the placeholder rectangle itself or the defining of height in the actual code?
Thanks - D :)
Re: Contact form not showing properly on mobile variant?
Acorn's referring to the height of the form. You use the attribute 100% for the width, just replicate for the height:
<iframe src="https:..." style="border:none;width:100%;height:100%" scrolling="no" id="..."></iframe>
<script src="https:..."></script>
Re: Contact form not showing properly on mobile variant?
I was offering a terse clue myself.
Your code is not quite right in the limited bits on display.
With no height specified, your browser is likely to return a default height of 150px.
scrolling is no longer supported. Instead include in your style = "...overflow-x: hidden; overflow-y: scroll;..." or just overflow: scroll | hidden;.
You do not have a name attribute. Usually name & id can share the same detail. name allows a different source to be sent to the IFRAME from the holding page.
Do read https://blog.logrocket.com/the-ultim...de-to-iframes/.
Most non-Xara issues around IFRAMEs are covered.
Acorn
Re: Contact form not showing properly on mobile variant?
I copied an iframe code from somewhere, not sure where, and stripped it down to what I thought was the bare minimum to work. It was a few years ago, so I can't remember if I accomplished maximum minimum...or why I attempted to do it in the first place.
<iframe src="https://...htm" width="100%" height="100%" frameborder="0" scrolling="auto" name="remixes" ></iframe>
Re: Contact form not showing properly on mobile variant?
Quote:
Originally Posted by
Chris M
I copied an iframe code from somewhere, not sure where, and stripped it down to what I thought was the bare minimum to work. It was a few years ago, so I can't remember if I accomplished maximum minimum...or why I attempted to do it in the first place.
<iframe src="https://...htm" width="100%" height="100%" frameborder="0" scrolling="auto" name="remixes" ></iframe>
Chris, HTML5 will fail you.
It needs to be:
<iframe src="https://...htm" style = "width: 100%; height: 100%; border: 0; overflow: scroll;" name="remixes" ><p>Your browser does not support iframes.</p></iframe>
Acorn