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 :)

You may need to create a new form rather than copy and paste, even if the form is virtually the same.

A clue to the Placeholder code would help.

Acorn

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 :)

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

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 :)

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>

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

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>

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

Hope I'm not wandering too far off topic. What relevance does <p>Your browser does not support iframes.</p> have this day and age?

Quote:

---

Originally Posted by Chris M

Hope I'm not wandering too far off topic. What relevance does <p>Your browser does not support iframes.</p> have this day and age?

---

Chris, caniuse suggests 76% of browsers in use can handle IFRAMEs.

Acorn

Quote:

---

Originally Posted by Acorn

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

---

Hi Chris and Acorn, thanks so much, this extra code in the styling worked perfectly - thank you!!!!

Quote:

---

Originally Posted by Acorn

Chris, caniuse suggests 76% of browsers in use can handle IFRAMEs.

Acorn

---

Insert 'raised eyebrows'/'I would never have suspected' emoji