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

    How to make a Responsive form for my website- Revolution Slider Wordpress CMS

    Asked by prpalaska on May 21, 2014 at 11:25 PM

    I got small form that I added to revolution slider (wordpress CMS), now I need some how make this form responsive 

    Current form code

    <script type="text/javascript" src="//form.jotformpro.com/jsform/41405796054961"></script>

    http://awesomescreenshot.com/0eb2ufkl6d

    http://prpalaska.com/ - my website

    REsponsive
  • Profile Image
    JotForm Support

    Answered by EltonCris on May 22, 2014 at 03:13 AM

    Hi,

    Add the following CSS codes to your form, this will make the form text box and submit button responsive when viewed on small screen devices. Guide: How-to-Inject-Custom-CSS-Codes

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

    .form-input, .form-textbox, .form-submit-button {

    width: 100% !important;

    }

    }

    Apparently, your form container isn't positioning well on mobile as of checking resulting the form not to render properly on mobile so I would suggest checking that on your end since that's way out of our scope.

    Feel free to let us know here should you need any further assistance. We'd be glad to help.

    Regards!

  • Profile Image

    Answered by prpalaska on May 22, 2014 at 09:09 PM

    Can we add CSS for this http://awesomescreenshot.com/0752uop1e5? So it will scale down as I squeze website? + May be font & fields scale down proportionaly too?  

  • Profile Image

    Answered by Cesar on May 22, 2014 at 10:53 PM

    You certainly are able to scale down a form by adding CSS code to it. For more information on performing this type of customization, kindly review the guides below.

    Thank you.

     

    Related Guides:

    -How-to-Inject-Custom-CSS-Codes

    -Customize-your-Form-using-Custom-CSS-Codes

  • Profile Image

    Answered by prpalaska on May 23, 2014 at 01:36 PM

    Which code should I use?

  • Profile Image
    JotForm Support

    Answered by TitusN on May 23, 2014 at 04:10 PM

    Using the shared guiides, please try the following CSS code:

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

    .form-input, .form-textbox, .form-submit-button {

    width: 100% !important;

    }

    }

    You may want to create a test page on your website so that we can check the result and advice further if there are some anomalies.

    Looking forward to your response.

  • Profile Image

    Answered by prpalaska on May 23, 2014 at 05:22 PM

    I added this code after  EltonCris  replied.

  • Profile Image

    Answered by prpalaska on May 23, 2014 at 05:23 PM

     http://awesomescreenshot.com/0752uop1e5 how can I scale down space & text fields?

  • Profile Image
    JotForm Support

    Answered by jonathan on May 23, 2014 at 06:48 PM

    Hi,

    You can also adjust the question vertical spacing of fields and as well us the form width using the form builder.

    For question spacing check this user guide 

    -How-to-Reduce-Vertical-Spacing-between-Fields

    For the form width, this guide

    http://www.jotform.com/help/35-The-Importance-of-Form-Widths

     

    You can also adjust the inected CSS code value for the max-width

    Example, if this was the CSS code

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

    .form-input, .form-textbox, .form-submit-button {

    width: 100% !important;

    }

    }

    adjust it to 

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

    .form-input, .form-textbox, .form-submit-button {

    width: 100% !important;

    }

    }

    to make the width narrower.

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

     

    Thanks.

  • Profile Image

    Answered by prpalaska on May 23, 2014 at 08:20 PM

    I made changes, but still got problems. IF I scale down website I am getting this http://awesomescreenshot.com/0e72uwjif2. Is it possible to scale font & text fields down?

  • Profile Image
    JotForm Support

    Answered by Welvin on May 24, 2014 at 01:12 AM

    Scale down to what percent? I'm not able to replicate that using Chrome v35 and FF v29. Scaling the browser to any percentage doesn't hide some part of the form. For example:

    Google Chrome: https://shots.jotform.com/welvin/ss/05-24-2014-056hdi7i65.png

    Mozilla Firefox: https://shots.jotform.com/welvin/ss/05-24-2014-i75rds3scd.png

     

    Is there any way you could check it using an actual mobile device? This way, we'll know on how that looks like to your end and so we can help further in adding the adjustments.

    Thanks