Need help with field sizing

  • HACA
    Asked on April 11, 2015 at 6: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,

     

     

     

  • HACA
    Replied on April 11, 2015 at 8:01 PM

    Need help with field sizing Image 1 Screenshot 20

     

    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.

  • Elton Support Team Lead
    Replied on April 12, 2015 at 1: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!

  • Elton Support Team Lead
    Replied on April 12, 2015 at 1: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

  • HACA
    Replied on April 12, 2015 at 9: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! 

  • HACA
    Replied 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,

  • HACA
    Replied 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.

    Need help with field sizing Image 1 Screenshot 20

    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,

     

  • HACA
    Replied on April 12, 2015 at 1:12 PM
  • HACA
    Replied 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?

     

    Need help with field sizing Image 1 Screenshot 20

    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!

  • HACA
    Replied on April 13, 2015 at 8: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,