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

    Is there a way to increase the width of the Check box labels?

    Asked by johnchartrand on October 23, 2012 at 05:55 PM

    http://screencast.com/t/ISLT3EKerOw7

    See screen capture. The black arrows show where text is dropped down a line when I want it on the same line. These are only two examples, text drops down in several places. I tried narrowing the Label width as well as increase the overall width, but it doesn't respond.

    Is there a way to increase the width of the Check box labels?

     

    thanks

  • Profile Image
    JotForm Support

    Answered by NeilVicente on October 23, 2012 at 06:41 PM

    Please try injecting these codes to your form:

    .form-checkbox-item {
      
    width200px;

    }

    How to Inject Custom CSS Codes?

    Of course you may adjust the value of width to suit your requirements.

    Hope this helps.

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 23, 2012 at 07:29 PM

    Hi there,

    I was looking at your form and made some modifications just as a suggestion.

    Here is a sample form that you may want to clone.

    Let us know if you need any further assistance!

  • Profile Image

    Answered by johnchartrand on October 23, 2012 at 07:53 PM

    I did that and I even changed the width to 300px but it did nothing. I think I'm still having saving issues. Using the source code is not updating. I have been using the following code which has been working but it's not updating the new CSS:

    <div style="width:860px; padding: 0 0 0 40px;"><script type="text/javascript" src="//form.jotform.ca/jsform/22964913032250"></script> </div>

     

    I noticed the source code seems to be lagging behind by an hour or two. When I preview it in JotForm it doesn't update either.

  • Profile Image
    JotForm Support

    Answered by Rodjit on October 23, 2012 at 08:03 PM

    Hi,

    You may also want to update your form URL into your embed codes fromhttp://form to http://www, so this means that from;

    <script type="text/javascript" src="//form.jotform.ca/jsform/22964913032250"></script> 

    it becomes;

    <script type="text/javascript" src="//www.jotform.ca/jsform/22964913032250"></script> 

    Our server sometimes experiencing a delay. Or, you may want to clone the form modified by my colleagu EduardoMendez, embed and replace the existing embed codes into your website.

    I hope this helps. Thanks

  • Profile Image
    JotForm Support

    Answered by idarktech on October 23, 2012 at 08:04 PM

    @john

    Adding !important should help overwrite the previous CSS codes. Example:

    .form-checkbox-item {
       width: 200px !important;

    }

    You can replace your previous codes with this or simply add !important after px

    Thanks!

  • Profile Image
    JotForm Support

    Answered by abajan on October 23, 2012 at 08:16 PM

    @johnchartrand

    Would you mind sharing the URL of the page where the form is embedded? EduardoMendez's clone looks super but I'd like to see how well it would fit into your page's setup.

    Incidentally, the following rule added to the injected CSS of the said clone should reposition the hover texts closer to their fields:

    .form-description {
    margin-right: 180px;
    min-width: 150px;
    }

    We look forward to your response.

  • Profile Image

    Answered by johnchartrand on October 23, 2012 at 08:18 PM
    Yes! this is what I want but when I clicked on Import from Website it said Cannot be Imported. So I clicked Clone from existing form and I can see the new form in My Forms but it doesn't update.
    Can you tell me how you created that format?
    ________________________________
  • Profile Image

    Answered by johnchartrand on October 23, 2012 at 08:20 PM
    The page's URL is: http://customhockeysticksandjerseys.com/custom-jerseys/
    Yes do it including the CSS. My updates don't seem to work right away, they take an hour or two.
    thanks
    ________________________________
  • Profile Image
    JotForm Support

    Answered by abajan on October 23, 2012 at 08:27 PM

    The update issue can be overcome by changing the embedded code as described by Rodjit. I'm not sure why cloning Eduardo's clone isn't working but should we be unable to resolve that, perhaps Eduardo would be the best person to guide you as to what changes need to be made to your form to make it look like his. (In addition to the injected CSS, there may be changes he made about which I'm unaware.)

    In the meantime, I'll have a look at your page.

  • Profile Image

    Answered by johnchartrand on October 23, 2012 at 08:28 PM

    I updated my code as recommended to : <script type="text/javascript" src="//www.jotform.ca/jsform/22964913032250"></script>

  • Profile Image
    JotForm Support

    Answered by abajan on October 23, 2012 at 08:36 PM

    Okay, I had a look at your page. Try cloning my clone of the form instead of Eduardo's and see if it works.

  • Profile Image
    JotForm Support

    Answered by abajan on October 23, 2012 at 08:38 PM

    Of course, the form's ID (the 14 digits at the end of the form's URL) would have to be updated to have that clone displayed on your page.

  • Profile Image
    JotForm Support

    Answered by abajan on October 23, 2012 at 08:44 PM

    Oops! Sorry, I forgot to give you my form's URL:

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

  • Profile Image

    Answered by johnchartrand on October 23, 2012 at 09:03 PM

    It's done and it previews well but it's not updating on my site presumingly because of the delay.

    I'll wait and see if it updates and when it does I'll send you a thanks

     

    I updated my code as recommended to : <script type="text/javascript" src="//www.jotform.ca/jsform/22964913032250"></script>

  • Profile Image

    Answered by johnchartrand on October 23, 2012 at 09:06 PM

    Out of curiousity for the next time, did you guys format the form with CSS or was it formatted in the Form Editor?

    I'll be doing other forms in the future and I want to know how to format it properly.

    thanks

  • Profile Image

    Answered by johnchartrand on October 23, 2012 at 09:09 PM

    One other thing. How can I get the text below the text fields "First Name Last Name Shipping address etc." a little darker.

  • Profile Image
    JotForm Support

    Answered by abajan on October 23, 2012 at 09:21 PM

    Hi again John

    The wrong form's code is embedded in your web page. The URL should actually be http://www.jotform.ca/jsform/22967983069270 (notice that the 14 digits are different).

    As far as the formatting is concerned, I just cloned Eduardo's form, decreased the form's width to 860 pixels and added the extra rule to his injected CSS but I don't know what other changes he may have made upon cloning your form. He would be the best person to guide you on that.

    To darken the sub-labels, add the following rule to the form's injected CSS:

    .form-sub-label {
    color: #000;
    }

    Please let us know how everything works out.

  • Profile Image
    JotForm Support

    Answered by abajan on October 23, 2012 at 09:26 PM

    If you don't wish the sub-labels to be black, you can replace #000 with a different color code of your choice.

  • Profile Image

    Answered by johnchartrand on October 23, 2012 at 09:34 PM

    Fantastic, do i use the code you gave me for future changes. If not, where can I generate a new code?

    I changed the sub label color and the form updated fine on my site.

    thanks alot for all your help. I'll certainly recommend JotForm to anyone. Not only are the forms great, but the support is fantastic!

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 23, 2012 at 11:42 PM

    Hi there!

    You can find the iFrame code for any form by following this guide.

    As per the formatting of the fields, here is a description of what was done.

    Once they are in place, I injected the following CSS code.

    This CSS code sets the width of each of the Check-Box fields to 30% of the form

    #id_3,#id_4,#id_5,

    #id_6,#id_7,#id_8,

    #id_9,#id_10,#id_11,

    #id_12,#id_13{width:30%;}


    This part of the code makes the labels for the check-box fields bold and larger in size

    .form-label-top{font-size:12px; font-weight:bold;}

    Hope that helps!

  • Profile Image

    Answered by johnchartrand on October 23, 2012 at 11:49 PM
    Yes thank you. Can you guys recommend a WP Image Slider Plugin. I bought one but there supports sucks unlike yours.
    ________________________________
  • Profile Image
    JotForm Support

    Answered by idarktech on October 24, 2012 at 01:12 AM

    @johnchartrand

    Thanks for the great feedback!

    Sorry though as I'm not good with WP Plugins but you might like CU3ER image slider http://getcu3er.com/features/wpcu3er.

    Google will also help =)

    Thanks!

  • Profile Image

    Answered by johnchartrand on October 24, 2012 at 04:17 PM

    thanks for everyone who helped me with special thanks to Eduardo and Abajan

    John