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

    Pre-Filled State Drop Down in Quick Tools

    Asked by kshaughnessy on August 23, 2011 at 12:47 PM

    Is there a way to pre-fill the "State" field in the "Address" Quick Tool?

     

    Kevin

  • Profile Image
    JotForm Support

    Answered by abajan on August 23, 2011 at 09:28 PM

    Hi Kevin

    Thanks for asking. There are three ways I can think of to pre-fill that element of the Address field. From the simplest method to the hardest, here they are:

    1. Append a query string to the form's URL and share that version of the form

    2. Embed the full source of the form into the page and add a value attribute of the "State / Province" element of the address

    3. Replace the compound Address field with separate fields for each element of the address, pre-populate the "State / Province" field using the Default Value tool in the form builder and arrange the fields using a combination of the form builder's WYSIWYG functionality and injected CSS

    Using your Select A Wallhog form as an example, let's examine each of these solutions:

    Method 1: Add a Query String to the URL

    There are various URLs via which it can be accessed:

    http://www.jotform.com/form/12344744707
     
    http://form.jotform.com/12344744707
    http://jotfor.ms/12344744707

    Each of those (and their secure equivalents that start with "https") will load the form without any fields pre-filled. However, appending each URL with ?address[state]=New%20York&address25[state]=New%20York will load the form with the "State" element of each Address field pre-filled (pre-populated) with New York. To illustrate, click the following links:

    http://jotfor.ms/12344744707?address[state]=New%20York&address25[state]=New%20York

    https://jotfor.ms/12344744707?address[state]=New%20York&address25[state]=New%20York

    This will also work if the form is embedded via an iFrame or if the full source of the form is used. In the case of the iFrame,  just copy the code provided by the Embed Form Wizard and append the URL portion of the code with the same query above. When the source of the form is embedded, append the page's URL with the query. For instance, if the source of the form is embedded at http://www.kshaughnessy.example.com, http://www.kshaughnessy.example.com?address[state]=New%20York&address25[state]=New%20York will load the page with the form having both State elements pre-filled with New York.

    Method 2: Add a value attribute to the input tag of the "State / Province" element of each Address Field

     

    To be continued shortly ...

  • Profile Image

    Answered by kshaughnessy on August 23, 2011 at 09:43 PM

    Sorry, I don't think my original question was clear.

    What I want to do is turn the "State" text box from the "Address" Quick Tools into a DropList prefilled with all 50 states so the user can select the correct state rather than having to type the state in.

    Sorry for the confusion.

  • Profile Image

    Answered by brx250 on August 23, 2011 at 10:27 PM

    Hi Kevin,

    Thank you for using JotForm.

    Unfortunately, you can't just edit the State under Quick Tool's Address field and make it a dropdown box on JotForm's form builder. However, you can do it by editing the full source code of your form. You can also manually create an Address field with the same look as that from the Quick Tools through the use of textboxes and change State in a dropdown field with the 50 states listed on it.

    Hope this helps. If you have further issues and concerns, please feel free to contact us again.

    _____________________________________________ 

    Albert  JotForm Support  

  • Profile Image
    JotForm Support

    Answered by abajan on August 25, 2011 at 06:54 AM

    Hi again Kevin

    To follow up on my colleague Albert's reply, you may have discovered that it's not the simplest feat in the world when using the form builder to construct an address field that looks like the one supplied by the Quick Tools menu. Viewing the source of any of your forms having address fields will reveal that those fields are contained within tables. Therefore, since a form's source cannot be edited from within the form builder, CSS would need to be injected to make the customized address field look like the ready made one. I cloned your Order Wallhog form and replaced its address fields with customized ones containing drop down selectors for the State / Province elements. Fortunately, there are presently no submissions associated with your original form. So, you can safely delete it and replace it with my clone. In other words, delete your form, clone my clone of it and use it in place of what you deleted. (If your original form is currently embedded anywhere, you will need to replace the code. That also applies to any links to the form.) As a matter of fact, the clone can be used as a template for other forms in which you want to include customized address fields. To do that, first clone it (click "My Forms" then right-click the form and click Clone Form) and remove all of the fields except those belonging to the first address. Then rename it Address with US States Template or something similar.

    The first method alluded to in Albert's post was to embed the full source of the form and edit the code in such a way that the State / Province text box is replaced with a drop down containing all 50 states. Here's how:

    1. Leave the compound Address field supplied by the Quick Tools menu in place and embed the full source of the form

    2. Go into the source and replace the text box for the "State / Province" element with a drop down containing the 50 states. Here's how:

    a.) Locate and replace this section of the code with this code
    b.) Locate and replace this section of the code with this code

    Of course, in each instance, the sub-label would have to be changed to just "State". It should be noted that even though the sub-label on the form will be "State", the notification will have "State / Province."

    Unless there's some compelling reason to embed the full source of the form, I would recommend the first method because it will be easier to update and all of the codes provided by the Embed Form Wizard will have the state elements as drop down selectors.

    Hopefully this reply was helpful. If you need clarification on anything, please don't hesitate to ask for it.


    ~ Wayne

    P.S. Sorry about that notification you would have seen in your email. I forgot to change the recipient address to mine when I ran a test submission.