Expand the form to full Page

  • Profile Image
    CHIFIND
    Asked 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?

  • Profile Image
    ardy0689
    Answered 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
    CHIFIND
    Answered 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
    ardy0689
    Answered 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
    CHIFIND
    Answered 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
    pinoytech
    Answered 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
    CHIFIND
    Answered 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
    pinoytech
    Answered 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
    CHIFIND
    Answered 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
    EltonCris
    Answered 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
    CHIFIND
    Answered 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
    ardy0689
    Answered 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
    CHIFIND
    Answered on November 14, 2013 at 04:41 PM
  • Profile Image
    CHIFIND
    Answered 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
    jonathan
    Answered 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.