I just started using OnePage and was attempting to embed a web form into a squarespace webpage. I tried using both their code block and embed block but end up with a scroll bar on the web form.
I've tried adjusting the size of web form in the embedded code but end up having to create an extra large space for the form to fit without a scroll bar which then makes the webpage look odd. More so, when I preview the page in "phone" mode I can't get rid of the scroll bar no matter how bit I make the container for the web form.
Hi, jspalding,
thanks for getting in touch, and sorry for the late response.
The default styles we use in our web forms are for iframes with a height of 500px.
You can adapt it to your page and remove the scroll by editing the iframe height that fits your form's height and by removing all CSS styles above the iframe.
So instead of our default embed code:
<style>
.opcrm-webform-iframe-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.opcrm-webform-iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="opcrm-webform-iframe-container">
<iframe src="URL-To-Your-Form" width="100%" height="500" frameborder="0" allowfullscreen>
</iframe>
</div>
use something like this:
<div class="opcrm-webform-iframe-container">
<iframe src="URL-To-Your-Form" width="100%" height="XXX" frameborder="0" allowfullscreen>
</iframe>
</div>
*XXX - the height of your form in pixels
This should work for many pages and also fit the mobile view.
I am not sure if this will fit your content as I didn't see your page and your form.
If you will have more problems with this, please provide the URL to your page with the embedded form or the link to the form.
Let me know If you need more help.
Ania