How can I customize an address field, set defaults and control mapping?

I've found your help on this subject listed on this link: http://www.jotform.com/answers/9895-How-can-I-set-a-default-value-for-City-and-State-in-the-Address-quick-field

But it is not clear to me how to edit source.

My form has two different address fields, the Event address and the Requestor's address.  Both address fields are required.

I want to default the City and State to San Jose, CA, and hide them by setting the CSS for those IDs to display:hidden and visibility:none.  And don't need the Zip at all.  But I need to be able to use the mapping widget so i can see a map of the event address (Only) when we review the submissions.

How exactly can I set a default City, State.

If the address field is required, it won't allow the Zip to be empty, so I'm guessing that I could defalt the hidden zip field to "99999".  Will this affect mapping?  Is there a better way?  Or can i set the "Required" parameter on the Address field but still allow the Zip to be empty?

And finally, if my form has two address fields, can I set it so the map only display for the second address field?

Hi,

Unfortunately, the address field is not the same with other plain text boxes where you can easily hide it and make a default value. The address field is a group of field so it acts as one, so adding a default value in the background and making one field read-only would be quite hard.

The link you mentioned just prepopulates the form URL with the default value, here's an example:

I've cloned your form for testing purposes, here's my form URL with the cities and state in default value:

http://form.jotformpro.com/form/51128775778974?eventLocation[city]=San%20Jose&eventLocation[state]=California&coordinatorsAddress5[city]=San%20Jose&coordinatorsAddress5[state]=California 

If you click that link, you'll be able to see that the city and states have already filled out, having a default value. You can learn more about prepopulating here: http://www.jotform.com/help/71-Prepopulating-fields-to-your-JotForm-via-URL-parameters.

This is the same with the embed code, you'll just need to find the form URL in the embed code and add the parameters in the URL.

Another alternative that you can do is, instead of using the Address Field, you can just create separate text boxes for each, separate text box for "Address1", "City", "State", etc... In that sense, you can more customize what should be read only and what should be the default value, we can then just position the fields to make it look more like in one group by positioning them, here's a guide on how to position fields: http://www.jotform.com/help/90-Form-Field-Positioning.

I hope that helps.

Kind regards

Hi,

Unfortunately, the mapping won't work if you'll use the plain text boxes when recreating the Address Field. 

But, the prepopulation of the fields using the embed code will work, but not using the default embed code, you will need to use the iFrame code instead. Here's how to get the iFrame: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code.

You can then append in the URL parameters the default value of the city and state, here's an example of my iFrame code:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/51128775778974?eventLocation[city]=San%20Jose&eventLocation[state]=California&coordinatorsAddress5[city]=San%20Jose&coordinatorsAddress5[state]=California " frameborder="0" style="width:100%; height:1969px; border:none;" scrolling="no"></iframe>

<script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

Here's my sample web page where the iFrame code is embedded: https://shots.jotform.com/charlie/embed_form_prepopulate_link.html.

I hope this helps.

Kind regards.

Good answer!  Now I have a plan. Thanks...

You're welcome. If you needed more assistance on this, please do let us know.

For other concerns, feel free to open a new thread here in the forum anytime.

Thank you.