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

    Need help with field sizing

    Asked by HACA on April 11, 2015 at 06:27 PM

    Recently, I important the following form successfully from AdobeCentral Forms.  However, I think there is background issues causing problems.  

    I am unable to resize fields so that that (a) date, full name, phone, and email are correct.  If you look the date field, area code, and name fields are too small. The address fields appears too large.

     

    When apply a work around for multiple payments, I added fields for the calculation widget. I would like to have the labels left aligned and sized for one line and the input field to be sized for currency values.  When I do this the form changes everything on the form even when I add specific input fields.

    Your help would be greatly appreciated.

     

    Form - http://form.jotformpro.com/form/50974550641962

     

    Thank you,

     

     

     

    Page URL:
    http://form.jotformpro.com/form/50974550641962

  • Profile Image

    Answered by HACA on April 11, 2015 at 08:01 PM

     

    See how the radio button is not sized correctly and I am not able to have the label on the quantity text boxes expand.  I did use the correct CSS inject, but it resized all fields even though I stated inputs.  I have removed the CSS since it was not working.

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 12, 2015 at 01:09 AM

    Hi,

    I have cloned your form and done all the make over for your convenience. http://form.jotformpro.com/form/51011179512949? :)

    Let me know what further changes you want or if you need help with anything.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 12, 2015 at 01:09 AM

    By the way, if you like the form, you can clone it back to your account. Guide: http://www.jotform.com/help/28-Cloning-a-Form-from-a-Web-Page

  • Profile Image

    Answered by HACA on April 12, 2015 at 09:08 AM

    Thanks!  Wow, the form looks great.  Unfortunately, the link on my form is live and published on several promotional pieces, so I cannot just switch out, which would be the easiest solution.


    So that I can learn and apply the look on other forms (with a different group and account), would you mind showing me the CSS inject for all the radio buttons, calculation fields, etc. that are below the section "ABWA Leadership and Recognition"?  I see how you changed out the contact information section, but not following the rest.

    Really appreciate the assist! 

  • Profile Image

    Answered by HACA on April 12, 2015 at 11:08 AM

    Working with the form, I adjusted a few parameters and applied the CSS code.  There are two remaining sizing issues. 

    (1)The area code phone input field is too small.  How can I have the field in "shrink" mode and increase the area code field?

    (2) How do I increase the space between the labels and the YES/NO radio buttons.  I would like to have two additional spaces so that it looks similar to the the radio button in the payment section (Check or Credit Card) radio button.

    Updated Form: https://secure.jotformpro.com/form/50974550641962

    Thanks,

  • Profile Image

    Answered by Syed on April 12, 2015 at 11:35 AM

    Hi there;

           Please inject the following CSS Code, it should work.

    Changes:

    (1)The area code phone input field is too small.  How can I have the field in "shrink" mode and increase the area code field?

    - Done.

    (2) How do I increase the space between the labels and the YES/NO radio buttons.  I would like to have two additional spaces so that it looks similar to the the radio button in the payment section (Check or Credit Card) radio button.

    - Done.

    #input_148_area {width: 40px !important;}

    #input_148_phone {width: 100px !important; margin-left: 6px !important;}

    #sublabel_phone {margin-left:6px !important;}

    @media only screen and (min-width: 480px) {.form-multiple-column[data-columncount="2"] .form-radio-item, .form-multiple-column[data-columncount="2"] .form-checkbox-item {width: 103px !important;}}

    Please review the following form for the required changes.

    https://secure.jotformpro.com/form/51014868203954

    Will let us know, if you have questions/queries, we would be happy to assist you further :)

     

    Thankyou.

  • Profile Image

    Answered by HACA on April 12, 2015 at 12:07 PM

    The phone field is fixed.  Thanks!

    I apologize for not being more clear on my request about sizing the fields.  The distance between the radio button -2 column input were fine.  I would like to increase the distance between the label and the the 2-column radio button input fields.

    I adjusted the radio button under the payment section to accommodate the PayPal image, so will not be the same as the other radio inputs throughout the form.

    Thanks,

     

  • Profile Image

    Answered by Syed on April 12, 2015 at 01:08 PM

    Hi there;

          Please provide your form link you've been working on, so that we can test again the CSS code.

     

    Thanks,

  • Profile Image

    Answered by HACA on April 12, 2015 at 01:12 PM
  • Profile Image

    Answered by Syed on April 12, 2015 at 01:15 PM

    Thankyou, I will get back to you in a moment, I appreciate your patience.

     

    Kind Regards;

    - Syed

  • Profile Image

    Answered by Syed on April 12, 2015 at 01:50 PM

    Hi there;

              Sorry for the delay, please inject the following CSS Code Block to resolve the issues. I have aligned them all with the same size, as well as I centralized the image logo of PayPal to look better. Please try the following link to review.

    @media only screen and (min-width: 480px) {.form-multiple-column[data-columncount="2"] .form-radio-item, .form-multiple-column[data-columncount="2"] .form-checkbox-item {width: 165px !important;}

    #id_159{margin-top: -20px;margin-left: 270px;}

    #cid_22, #cid_23, #cid_25, #cid_28, #cid_32, #cid_149, #cid_150 {position: relative !important;left: 40px !important;}

    }

    https://secure.jotformpro.com/form/51014845293958

    Will let us know, if you need further assistance. We would happy to assist in any case.

     

    Thankyou,

    - Syed

  • Profile Image

    Answered by HACA on April 12, 2015 at 11:57 PM

    Thank you!

    I will apply. 

    However, I did discover one more sizing error.  All the calculation fields work; however, the payment field for credit cards is not large enough, what am I missing?

     

    I think it should be a simple input width CSS inject, but when I attempt the modification. The form changed in widths and spanning.  Not sure what I did wrong. Again, because the form is live, I have removed the code. 

     

    Here is the link: https://secure.jotformpro.com/form/50974592925973

    I appreciate the assist!

  • Profile Image

    Answered by HACA on April 13, 2015 at 08:27 AM

    Using a backup copy of the form, I inserted the CSS code provided to adjust radio button labels and paypal margin, but it did not change. 

    Here is the link to the clone:

    http://form.jotformpro.com/jsform/51023171944953

     

    Thanks,

     

  • Profile Image

    Answered by Syed on April 13, 2015 at 08:48 AM

    I apologizes first! Actually, when you change/insert controls into the form, the whole code get refresh, that's why IDs/Classes in injected CSS Code Block changes, and it doesn't work after amendments. I suggest you to make changes as possible as you can, and let me know, I will provide you full CSS Code Block to look normal as we have yesterday.

     

    Kind Regards;