What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
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.
Expand the form to full PageAsked by CHIFIND on November 11, 2013 at 01:56 PM
i quickly made a contact form, but I don't know how to expand it to full screen on a contact page. Now around half of the screen is empty, how could I expand this? http://form.jotformeu.com/form/33136449800351?
Hello. Thanks for posting your inquiry here on the forum.
You can adjust to expand the form to your full page width by inject this Custom CSS Code:
Click "Setup & Embed" tab > Preferences button > "Form Styles" tab
You may use this code as shown above:
If you need further assistance, please do not hesitate to ask. Thank you
I did this, but then the colour in the theme and my previous work/settings are gonne.
Probably I should just add this somewhere in the code, right?
Where should I put it?
Thanks for replying back.
Yes, you are correct on that part about adding it.
If it is your Contact form with Sky Theme, you want to make it full page including the background, is it correct?
I adjusted your CSS codes and this is what I came up with, please copy & paste this from http://pastiebin.com/5281394061962
I already included there the above code to expand also I added a code to which the background will expand as well. Please read on How to Inject Custom CSS codes.
Also, I would like to know where are you embedding your form so that I can have a better idea on what you are trying to do. Thank you
Thank you, you seem to put a great effort in doing this code :)
I want to embed it to a wordpress blog to have as a contact form on landing page.
I would like it to look great.
I inserted the code you gave me, but the height is not on the full screen.
Almost half of the screen is blank below.
Can you please share to us URL of your website where your form is embedded for us to investigate the issue and for further assistance?
it's not embedded yet. I see that in the preview in the tab in Chrome
Yes, it's better, I would just like to have form in the middle of the upper side of the page.
The picture should be a little better too, for example pictures from here:
It would be great if there was a tool to make landing pages (that would send me input to my email-not a squeeze page with autoresponder) and contact form with different pictures that I could change myself. The function to expand the form to full screen would be great.
To continue my colleagues work, I've made a little adjustment on the CSS that would bring the form to the middle. http://pastiebin.com/52822479472b2
Regarding on your other request, please post it on a separate thread so we can assist you better. Sorry but we can only handle 1 question/request per thread. Thanks for your understanding.
thanks for help, but it's not good.
The fields are not in the middle of the page and the picture is not all around the page (the clouds).
Picture is only on left and right and after I put it on my blog, it's even without a picture.
Thanks for giving us the update of the situation.
I continued what my colleagues added to the code and added some adjustments, please use this Custom CSS code and inject it to your form.
Here is the pastiebin link:
Also please make your submit button to align to "Center" before using this code.
Can you please give us your blog URL so that we can have a better look on the image issue. Thank you
this one was better, fields, buton and text just aren't on upper middle side of the page.
You can clone this form http://www.jotformpro.com/form/33153702739959 then.
And re-embed it to your website. This way we can check the actual live form, and we can apply the required changes to match what need.
Use this guide to clone the form How-to-clone-an-existing-form-from-a-URL
Update us if further assistance is needed.