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.


  • Profile Image

    Expand the form to full Page

    Asked by CHIFIND on November 11, 2013 at 01:56 PM

    Hello, 

     

    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?

    expand contact form jotformeu hello
  • Profile Image
    JotForm Support

    Answered by ardy0689 on November 11, 2013 at 02:17 PM

    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:

    .form-all{

    width:100% !important;

    }

     

    If you need further assistance, please do not hesitate to ask. Thank you

  • Profile Image

    Answered by CHIFIND on November 11, 2013 at 02:31 PM

    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?

     

     

  • Profile Image
    JotForm Support

    Answered by ardy0689 on November 11, 2013 at 03:11 PM

    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

  • Profile Image

    Answered by CHIFIND on November 11, 2013 at 04:31 PM

    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. 

     

     

     

     

  • Profile Image

    Answered by pinoytech on November 11, 2013 at 05:19 PM

    Hi,

    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?

    Thank you!

  • Profile Image

    Answered by CHIFIND on November 12, 2013 at 06:38 AM

    Hello, 

     

    it's not embedded yet. I see that in the preview in the tab in Chrome

  • Profile Image

    Answered by pinoytech on November 12, 2013 at 07:57 AM

    Hi,

    Is this something you want to achieve? http://www.jotformpro.com/form/33153702739959

    If yes, inject this custom css into your form: http://pastiebin.com/52822479472b2

    Feel free to contact us again if you need further assistance.

    Thank you!

  • Profile Image

    Answered by CHIFIND on November 12, 2013 at 12:17 PM

    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: 

    http://morguefile.com/archive

     

    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. 

     

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on November 12, 2013 at 01:19 PM

    @CHIFIND 

    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.

    Regards!

  • Profile Image

    Answered by CHIFIND on November 14, 2013 at 01:37 PM

    Hello, 

    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. 

    http://form.jotformeu.com/form/33175133186351?

  • Profile Image
    JotForm Support

    Answered by ardy0689 on November 14, 2013 at 03:10 PM

    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:

    http://pastiebin.com/5281394061962

    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

  • Profile Image

    Answered by CHIFIND on November 14, 2013 at 04:41 PM
  • Profile Image

    Answered by CHIFIND on November 14, 2013 at 04:44 PM

    http://www.jotformpro.com/form/33153702739959

    this one was better, fields, buton and text just aren't on upper middle side of the page.  

  • Profile Image
    JotForm Support

    Answered by jonathan on November 14, 2013 at 05:59 PM

    Hi,

    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.

    Thanks.