Form Scrolling on Smaller Devices -...

User 103173 Photo


VP of Software Development
0 posts

It is working correctly in the way you set it up. You added the form inside of an iframe. That puts the form inside of 2 iframe's now. Here is what you have:

<p><iframe id="fb_iframe" style="border: none; background: transparent; overflow: hidden; width: 100%;" src="http://www.mainemusicmakers.com/MMMBookingForm1/MMMBookingForm1.html" width="300" height="1287"></iframe></p>
</div>



That is not the markup we provide you. The correct markup we provide looks similar to this:

<script type="text/javascript">document.write(unescape("%3Ciframe id=\"fb_iframe\" src=\"cform.php" + window.location.search + "\" width=\"100%\" height=\"412\"allowtransparency=\"true\" scrolling=\"no\" frameborder=\"0\"%3E&lt;a href=\"cform.php\" title=\"cform\"&gt;Check out my CoffeeCup Form&lt;/a&gt;%3C/iframe%3E"));</script>
<noscript>
<iframe height="412" style="border:none; background:transparent; overflow:hidden; width:100%;"
id="fb_iframe" src="cform/cform.html">
<a href="cform.php" title="cform">Check out my CoffeeCup Form</a>
</iframe>
</noscript>


That is what you should be adding to your page at http://mainemusicmakers.com/booking-info/

I would start by deleting that markup you added, export your form again and use the markup that the software gives you.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 240974 Photo


Registered User
32 posts

I have done as suggested and the form displays great on a full screen. However; when viewed on a smaller device the form is cut off and does not fully display. I can't seem to get a straight answer as to why. At first I was told to make the height larger and that would display the full form on mobile - if I add enough to the height it does display the full form - but then it makes way too much blank space below the form on a full size screen. To me this is showing that this software is not fully responsive - as advertised, but now I'm being told that since this only happens with WordPress sites, then it's not really a problem and if I need more help I should go to a WordPress support page. This form is advertised as fully responsive - no where does it say that doesn't include WordPress.

Can any one help here? Am I the only one who has run into this issue?
User 2088758 Photo


Senior Advisor
3,121 posts
Online Now

Hi Eric,

Have you tried Scotts suggestion? I really think that will work.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 240974 Photo


Registered User
32 posts

His suggestion does work - the form displays fine on a full size screen; however, when viewed on a mobile device the form is cut off. The final answer I got from Scott regarding this is basically that Web Form Builder is not fully responsive when used on WordPress sites.

I was able to fix this with a workaround. I added the following to the responsive css of the site:

@media screen and (max-width:517px) {
.page-id-20 iframe {height:1800px !important;}
}

Web Form Builder is advertised as fully responsive on all devices - that is obviously not true.
User 187934 Photo


Senior Advisor
20,271 posts

Eric Normand wrote:

Web Form Builder is advertised as fully responsive on all devices - that is obviously not true.

I've made hundreds of forms with the form builder. The only ones that have issues are the ones placed in a Wordpress site.
I would never blame the form builder for that.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2088758 Photo


Senior Advisor
3,121 posts
Online Now

Very interesting. I have never tried to use a form on a word press website. Another reason why I hate WP:cool:
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 240974 Photo


Registered User
32 posts

Eric Rohloff wrote:
Eric Normand wrote:

Web Form Builder is advertised as fully responsive on all devices - that is obviously not true.

I've made hundreds of forms with the form builder. The only ones that have issues are the ones placed in a Wordpress site.
I would never blame the form builder for that.


I'm not blaming the builder - I'm simply pointing out that the advertising for Web Form Builder clearly states that it is fully responsive - it doesn't NOT say that it is not fully compatible with WordPress - I feel that is somewhat deceiving. It's not like WordPress is an unusual program that is barely used. According to statistics from 2014, 18.9% of all websites are built with WordPress - I would expect that this software would either be fully compatible with it, or at the very least, simply be upfront in the advertising that it is not. I don't think that is too much to ask.
User 187934 Photo


Senior Advisor
20,271 posts

It is fully responsive. It's responding to the div that Wordpress is in control of.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.