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

    Few Styling Questions

    Asked by AdminRSCM on July 11, 2017 at 04:36 PM

    Few CSS questions:

    1. Can i use a google font for the form field labels and text?

    I want to use Raleway if possible.

    2. There used to be 'Make this Form Responsive' option in the advanced builder. How can i make this form responsive?

    3. I keep removing the background - i want it to be transparent. It keeps displaying with a white background. Is there a way to force the white background to be transparent?

     

    My form is:

    New Flexogenix.com Homepage Form

  • Profile Image
    JotForm Support

    Answered by aubreybourke on July 11, 2017 at 04:42 PM
  • Profile Image

    Answered by AdminRSCM on July 12, 2017 at 10:14 AM

    #2. After creating a form after clicking on that responsive widget- and using the advanced designers- it reverted back to being un responsive.

     

    How can this be fixed?

    https://form.jotform.us/71924278358164

     

    Also, how can i make the dropdown menus square and the same height as my other form fields?

  • Profile Image
    JotForm Support

    Answered by aubreybourke on July 12, 2017 at 11:43 AM

    You form doesnt have the "mobile responsive widget". Simply search for it on the widget tab on the left:

    And then drag it onto your form. It will automatically adjust your form to display on smaller screens.

     

    As to your second question, you are using a theme right? If you change it back to the default theme the form will have the standard components.

     It will look like this:

  • Profile Image

    Answered by AdminRSCM on July 13, 2017 at 09:32 AM

    i see the mobile widget now-

     

    I like how it responds after 1170pixels- but at 1616 pixels- it looks off. The request appointment button is larger and all the form fields remain short. Is there a way to fix this so that eveything remains short- than at 1170 pixels all the form fields can expand to fullwidth of container?

    https://form.jotform.us/71924278358164

     

    see attachment of the issue.

  • Profile Image
    JotForm Support

    Answered by aubreybourke on July 13, 2017 at 09:45 AM

    You can change the maximum width of the from. You just inject this CSS code:

    .form-all {
        max-width: 1600px !important;
    }

    Here's a guide how to inject the CSS:

    How to Inject Custom CSS Codes

     

     

  • Profile Image

    Answered by AdminRSCM on July 14, 2017 at 12:28 PM

    what is the best code to create some room/padding around the form when it shrinks down into mobile screen?

  • Profile Image
    JotForm Support

    Answered by Nik_C on July 14, 2017 at 01:29 PM

    That depends on which device you will view your form, but this code would work, for example on iPhone 6,7:

    @media only screen 

    and (min-device-width : 375px) 

    and (max-device-width : 667px) { 

    .form-all{

      padding: 30px!important;

    }  

    }

    Just copy it in your Custom CSS Field. And if you need more padding just increase the number.

    Let us know how it worked.

    Thank you!

     

  • Profile Image

    Answered by AdminRSCM on July 18, 2017 at 03:33 PM

    is there a way- for my form to look like the attachment image up unto 1280pixels? After 1279 pixels- the form fields can expand full width across the whole container- but 1280pixels and higher, I would like my form to look like the attached image.

    Is this possible?

  • Profile Image
    JotForm Support

    Answered by Nik_C on July 18, 2017 at 04:01 PM

    Well, that might be doable with media queries, for example:

    @media only screen 

    and (min-device-width : 1280px) 

    {

     .form-all {

        width: 700px!important;

    }

    }

    But I'm not sure how that would work since I don't know how your form is embedded, could you share the website URL where the form is embedded?


    Also, media queries depend on device's resolution.

    We'll wait for your response.

    Thank you!

  • Profile Image

    Answered by AdminRSCM on July 18, 2017 at 04:05 PM

    http://abb.5d3.myftpupload.com/

     

    lives on this page

  • Profile Image
    JotForm Support

    Answered by BDAVID on July 18, 2017 at 05:24 PM

    You need to increase the width of the Div of your webpage where you have embedded your form. Please try embedding this code where you have embedded your form's code:

    <style type="text/css">

    .et_pb_row et_pb_row_4{

        width: 1300px !important;

    }

    </style>

    Result:

  • Profile Image

    Answered by AdminRSCM on July 19, 2017 at 09:24 AM

    hmm- when i add that to my site- the form is no longer responsive. i do need the form to expand out after 1279 pixels.

    Is there another fix?

  • Profile Image
    JotForm Support

    Answered by Nik_C on July 19, 2017 at 11:21 AM

    Yes, the fixed widths will not be responsive.

    Let's try this, I saw that the form is embedded in the div with those two classes that my colleague mentioned, so let's try to set their width to 100%:

    .et_pb_row_4.et_pb_row {

        width: 100%!important;

     

    }

    Insert that line in your CSS of the website.

    That should make the form look the same for the resolutions above 1280px and it stays responsive for resolutions below 1280px.

    I tested in your website and it worked fine.

    Please try and let us know how it worked.

    Thank you!

  • Profile Image

    Answered by AdminRSCM on July 19, 2017 at 01:21 PM

    this is so close! I now have the form look good until 1295 pixels. i really want the form to look good until 1280 pixels then switch at 1279pixels.

     

    do i need to set a min width?

  • Profile Image
    JotForm Support

    Answered by Nik_C on July 19, 2017 at 03:31 PM

    I found the below solution:

    .et_pb_section.et_pb_section_parallax.et_pb_section_3.et_pb_with_background.et_section_regular {
        width: 101.5%!important;
    }

    That will switch at 1279px.

    Here is how it works:

    It switches exactly at 1280px (you can see the resolution in the upper right corner.

    Please insert the above CSS in your website and let us know how it worked.

    Thank you!

  • Profile Image

    Answered by AdminRSCM on July 19, 2017 at 03:44 PM

    thank you for your help!!!

  • Profile Image

    Answered by AdminRSCM on July 19, 2017 at 03:52 PM

    going back to this answer on this thread:

     

    That depends on which device you will view your form, but this code would work, for example on iPhone 6,7:

    @media only screen 

    and (min-device-width : 375px) 

    and (max-device-width : 667px) { 

    .form-all{

      padding: 30px!important;

    }  

    }

    It looks good on the iphone- but on an android there is no padding. How can I fix that with css?

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on July 19, 2017 at 04:10 PM

    What is the android device you are using? Can you try if this code works for it:

    @media only screen and (max-width: 480px) {

    .form-all{

      padding: 30px !important;

    }  

    }