How To Remove Sub-Fields From Full Address Field

Last Update: December 7, 2014

UPDATE: There's now a much simpler way to do this:

New Method

1. Click the address field from which you wish to remove a sub-field

2.
In the toolbar at the top of the form builder click Fields

by default, all address fields are checked

By default, all fields are checked

3. Uncheck the undesired field (in this case, Country)

remove Country field from address


4.
Save the jotform

-----------------------------------------------------------------------------------------------------------------------------------------------------

Old method (still works)

Using those fields among the JotForm Quick Tools have always been the JotForm's fastest method to create a reference type of forms (i.e. Contact forms). Just a few click, drag & drop -- your reference form is ready to deploy.

But since most of the Quick Tools fields are predefined compound fields, there are some cases when customization of the fixed compound fields are needed.  

A good example of the more than what is necessary sometimes compound field is the Full Address field. The Full Address field is always consist of Street Address 1, Street Address 2, City, State/Province, Zip Code, and Country.

What if you only want the City/State and Country details in the Contact form?

Disregarding the Quick Tools Full Address field and adding Text Box fields to manually create a customize Full Address field is not quite "jotformsque" way (easiest and fastest).

This guide will help you customize the compound Full Address field by injecting custom CSS codes to your form while maintaining your speed in creating JotForm forms.

Steps:

1. Create your form and add the Full Address field from Quick Tools set.

2. Use this general CSS codes to customize the Full address field. Those in red text are line comments that describe the specific field in the set. 

In the example form, we only need City, State, and Country. To exclude or comment out a code, simply enclose it between /* and */.

Remember, a commented code (/* */), means it is not used in the form.

CSS Code:

/* Hide Address Line 1 */

.form-address-table tbody > tr:first-child {display:none;} 

/* Hide Address Line 2 */

.form-address-table tbody > tr:first-child + tr {display:none;}

/* Hide City */

/* .form-address-table tbody > tr:first-child + tr + tr > td:first-child {display:none;} */

/* Hide State/Province */

/* .form-address-table tbody > tr:first-child + tr + tr > td:first-child + td {display:none;} */

/* Hide Postal/Zip Code */

.form-address-table tbody > tr:first-child + tr + tr + tr > td:first-child {display:none;}

/* Hide Country */

/* .form-address-table tbody > tr:first-child + tr + tr + tr > td:first-child + td {display:none;} */

That's it. 

The example form here in action.

You may also want to read How-to-Create-Web-Forms-Really-Fast!


6 Comments...


   
Mobileonix (November 26, 2012 at 06:25 AM)

Hi My issue is finding this Use this general CSS codes to customize the Full address field. Those in red text are line comments that describe the specific field in the set.

View Answer


   
Mobileonix (November 26, 2012 at 06:26 AM)

My Issue is finding
Use this general CSS codes to customize the Full address field. Those in red text are line comments that describe the specific field in the set.


   
lmabson (April 19, 2013 at 11:42 AM)

Is there a way to add other form fields to the full address field or even better create other full form fields?

View Answer


   
Allans Bart (May 04, 2013 at 03:03 AM)

Is there a way to change the position of the address elements? For exemple, switch State/Province and Zip/Postal Code, or place them on another line.

View Answer


   
PreservationAlliance (December 19, 2013 at 11:34 AM)

I just want to take out Street Address 2 and Country. How do I do that? Thanks.

View Answer


   
Free Games (September 08, 2015 at 01:17 PM)

The custom fields data is still found in database after delete permanently on the WordPress admin panel. Is there any add-on to remove the data from database too?

View Answer


Send Comment