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 can we add a field for zip+4?

    Asked by BicycleColorado on November 26, 2013 at 04:59 PM

    I'm creating a form that requires the user provide the zip+4 (vs regular 5-digit zip code). I'm using theQuick Tools address form. Is there a way to add that field?

     

    Thank you,

     

    Lynn Clark

    lynn@bicyclecolorado.org

    Page URL:
    http://www.jotform.co/BicycleColorado/summit-registration

    tools zip code
  • Profile Image
    JotForm Support

    Answered by ardy0689 on November 26, 2013 at 06:16 PM

    Thanks for posting here on the forum

    I am not sure if you I understand you correctly about zip+4. Did you mean that you need to have a 4-digit only zip code? or a 9-digit zip code(5+4)? or a separate textbox where you require another 4-digit for the zip code?

    Anyway, there is no feature yet to customize the fields in Quick Tools>Address field. You can only enable or disable the fields but not add or implement a validation.

    Here is what you can do:

    1. Add a new textbox field
    2. Remove its label
    3. Add a sublabel and name it rather having it as Label.
    4. Make the Max Size to 4
    5. Adjust the Size of the textbox to 3

     

    4.  Reposition the Zip+4 field using an injected Custom CSS code. Please refer to this guide on How to Inject Custom CSS Code.

    Use this CSS and Inject it

    #id_3{
    position:absolute !important;
    white-space:nowrap !important;
    top:143px !important;
    left:259px !important;
    }


    Adjust the highlighted values top and left accordingly to reposition it to your specifications. Make sure the id is correct.

    To know the ID number, select the new textbox and click the small Cog/Gear Wheel icon and click Show Properties. From the Properties window you should see the Field Details at the bottom.


    Here is a sample form http://form.jotform.co/form/33296958846878

    Please let us know if this is the one you want. Thank you

  • Profile Image
    JotForm Support

    Answered by ardy0689 on November 26, 2013 at 06:25 PM

    I would like to add that you should add this CSS code as well. This prevents the background color when of the textbox from interfering and overlapping with the main address field when focused or clicked.

    #id_3.form-line-active{
    background-color:transparent !important;}

    Do not forget to change your ID number on this CSS too.

    Regards