JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Styling the source code embedded form within a custom iframeAsked by planetshoes on December 23, 2015 at 09:40 AM
Awesome so that worked! there is some thing I would like to tweek tough if you can help us...
- we want to shorten the space above "Welcome to Our Planet"
- get rid of the border shadow from the iframe
- also make it so its a fixed height so there is no scrolling.. it seems like the forms height is way too big for the iframe height.
(Private)Answered by Ben on December 23, 2015 at 10:08 AM
I went to this page again: http://www.planetshoes.com/?VSPTest#0
I do see the issues that you mention and we can take care of them with few small modifications.
Now in regards to the space at the top, we need to remove that from within the form itself.
To do that, just add this CSS to your form:
Once you do, it will look like this:
Now the shadow - this is caused by iframe code itself, so we need to modify the iframe code that you use on your website to show the form.
This is the old (current) one:
<iframe width="500px" height="364" src="//www.planetshoes.com/mmplanet/Landing/Welcome/Welcome Stream.html" id="JotFormSelfHostedIframe"></iframe>
As we change it into this (don't replace the iframe code just yet):
<iframe width="500" height="364" src="//www.planetshoes.com/mmplanet/Landing/Welcome/Welcome Stream.html" id="JotFormSelfHostedIframe" style="border: none;"></iframe>
The shadow border is gone:
Now, we need to adjust the iframe code just a bit further, to remove the scrollbars.
To do that, we use this:
<iframe width="500" height="384" src="//www.planetshoes.com/mmplanet/Landing/Welcome/Welcome Stream.html" id="JotFormSelfHostedIframe" style="border: none;"></iframe>
We also add this rule to our form:
As soon as you do that and refresh your page, you will see the difference and it should look like this:
It should look just like on the screenshots above, but we would know once you apply the changes above if there is anything else that we would need to do to make it look perfect, so do let us know how it goes Kristian :)
It works! Thanks for all your help!
Great to hear that Kristian.
Do let us know if you have any other issues or any questions and we would be happy to assist with the same :)