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

    Have bigger form (even when you chose the template XXL)

    Asked by evank001 on April 04, 2013 at 12:09 PM

    Hi there,

    I tried to inject css but I do not manage to make my form even bigger. Maybe  because I chose the theme XXL.

    But as I need my form to be as big as the one of airbnb.com (the welcome page)

    How can I do it ?

    thanks in advance,

    Adrien

    Screenshot
    template inject CSS thanks
  • Profile Image

    Answered by glennlee on April 04, 2013 at 12:40 PM

    Hi Adrien,

    Try to adjust the font size of the field, form will look bigger. To edit font size, please follow the steps below.

    1. Click Setup & Embed > Preferences > Form Styles.

    2.Then adjust the font size.

     

    Try to adjust the font size until you meet your prefer size.

     

    You can also ajust the form width.

    Click Form Styles then click form width.

     

    I also noticed the your fields are in shrink mode. You can expand them if you want to, please follow steps below.

    1. Click the gear icon.

    2. Then click expand.

  • Profile Image

    Answered by evank001 on April 09, 2013 at 09:01 AM

    Hi,

    thanks for the reply but unfortunately, I am not looking to make bigger the text OVER the field but the options the person need to choose. In my example (the image I upload), it would be to Make bigger "Que cherchez vous ?" which fits into the field (not over)
    Thanks in advance,

    Adrien 

  • Profile Image

    Answered by pinoytech on April 09, 2013 at 10:02 AM

    Hi Adrien,

    I've cloned your form and made some workaround on it for you to check if this is what you want to achieved. http://www.jotformpro.com/form/30984338804966?

    What I did on this form:

    1. I've injected some custom css to hide the label and adjust the margin of submit button.

    .form-label-top {

    display: none !important;

    }

    .form-submit-button {

    margin-top: 40px !important;

    }

    2. Adjust the width of the field by going to Properties tab > Width button/menu

    If you need further assistance, do let us know.

    Thank you!

  • Profile Image

    Answered by evank001 on April 09, 2013 at 12:05 PM

    Hi there !

    Thanks for the reply but I think I did not manage to make myself understand. What I am trying to do is to make my form bigger, fields remain too small, this is too small like this : click on the image to see the scale : Form

  • Profile Image
    JotForm Support

    Answered by Welvin on April 09, 2013 at 12:45 PM

    Hi Evan,

    If you just want to adjust the form width, please check my colleague "Glen Lee" have stated:

    If you want to expand the sizes of every fields, check my colleague "Pinoytech" have stated:

    I think you will need both method. Please kindly check and adjust. Let us know if you need any further assistance.

     

    Thanks

  • Profile Image

    Answered by evank001 on May 03, 2013 at 05:29 AM

    Hi again, 

    well, I still do not manage, the field size is too small.  I think, there is a misunderstanding, I am not trying to make the fonts of the label bigger. I am looking to make the "white container" and the options "like "Que cherchez vous ?, "Maillots Shorts Chaussettes and the other options" Bigger.

    Changing the size of the font like Glennlee told me only affects the font size of the labels, not the options !

    So the form is still too small ! What I want would be like the login of benchmarkemail (https://ui.benchmarkemail.com/Login) or fiverr (http://fiverr.com/login) Big and easy !!!

    Thanks 10000 times in advance,

    Adrien

  • Profile Image
    JotForm Support

    Answered by jonathan on May 03, 2013 at 06:48 AM

    Hi Adrien,

    You can try adding CSS code like this

    .form-dropdown{font-size: 2em;}

    // em is the unit

    Here is a test form http://www.jotformpro.com/form/31222557315952?

    You can adjust the em unit, and or the width of the dropdown to match the bigger input box.

    I learned it form this thread http://www.jotform.com/answers/137322-How-do-I-make-my-input-boxes-bigger

    Hope this help. Inform us if you need further assistance.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 03, 2013 at 06:51 AM

    Hi Adrien,

    Inject this to your form instead. This will increase the dropdown height. Feel free to edit 60px to adjust it's height.

     

    #input_1, #input_3{

    height: 60px !important;

    }

    Guide: How to Inject Custom CSS Codes to your Form

    Hope this helps. Thank you!

     

  • Profile Image

    Answered by jalaludeen on May 03, 2013 at 09:08 AM

    Hi Adrien,

    Inject this css code to your form. This solution will fit to you design as per your request.

    #cid_1 .form-dropdown { width: 300px !important; }
    #cid_3 .form-dropdown { width: 150px !important; }
    .form-dropdown { font-size:24px !important; }
    .form-all { width:750px !important; }

    Please refer this guide for more information on How to Inject Custom CSS Codes to your Form

    Let us know if you need further assistance.

    Thanks,
    Jalaludeen


  • Profile Image

    Answered by evank001 on May 24, 2013 at 10:32 AM

    It works !!! Thanks a lot everybody !! You rock !!!