Hiding Address Fields
  • 2 Minutes to read
  • Dark
    Light

Hiding Address Fields

  • Dark
    Light

Article summary

You don't want to collect Address 1 to 4 lines but yo want to collect City and Postcode, which are mandatory:

1) While editing your form, select the Person or Organisation Address field

1) On the form builder use the Show/Hide Design Options to show the CSS for each Field.

2) Set the Mandatory option to Yes

3) In the field next to CSS Class For Label and Field, enter addshowhide

image.png

2) Add Custom CSS via Form Settings​

On the Form Settings page, use the Additional CSS Code to enter any relevant CSS code, from the Code I have provided Below.
I've given an explanation of the CSS function, in case you want to use this for other configurations. The Actual code needed is at the bottom of the email.

image.png

2a) Remove Line spacing and Address lines

Use the code below to hide the relevant lines from the from.

For completeness, the code includes the details for Address lines 1 through 4, as well as Area/State, City and Postcode.

To leave just Area/State and Postcode on the form, do not include the lines that include .aare (Area/State) or .azip (Postcode):

/* remove spaces between lines */
.addshowhide br {display:none}
/* add the lines you want hidden on the form */
.addshowhide .addresslabela1, .a1input { display:none }
.addshowhide .addresslabela2, .a2input { display:none }
.addshowhide .addresslabela3, .a3input { display:none }
.addshowhide .addresslabela4, .a4input { display:none }
.addshowhide .aare {display:none}
.addshowhide .acty {display:none}
.addshowhide .azip {display:none}

2b) Set Visible fields as Mandatory​

Use the code below to remove the mandatory setting from all address lines (so the hidden fields do not flag as mandatory) and then set the Mandatory Flag just for those needed.

The code shown below will set the Area/State and Postcode as mandatory. But you can replace the area code fields below (.addresslabelaare or .aareinput) with whichever field is needed.

</style>
<script type="text/javascript">
//if you want fields to be mandatory other than the addressline1
function userPageLoaded() {
//address - remove mandatory setting
$(".addresslabela1").closest(".entryAddress").addClass('notmandatory');
//city - make mandatory
$(".addresslabelaare").closest(".entryAddress").removeClass("notmandatory");
$(".aareinput").removeClass('skipmandatory');
}
</script>
<style>

So, the full code needed for CSS and Javascript to show only State and Post Code, and setting both as mandatory, is:

/* remove spaces between lines */
.addshowhide br {display:none}
/* add the lines you want hidden on the form */
.addshowhide .addresslabela1, .a1input { display:none }
.addshowhide .addresslabela2, .a2input { display:none }
.addshowhide .addresslabela3, .a3input { display:none }
.addshowhide .addresslabela4, .a4input { display:none }
.addshowhide .acty {display:none}
</style>
<script type="text/javascript">
//if you want fields to be mandatory other than the addressline1
function userPageLoaded() {
//address - remove mandatory setting
$(".addresslabela1").closest(".entryAddress").addClass('notmandatory');
//city - make mandatory
$(".addresslabelaare").closest(".entryAddress").removeClass("notmandatory");
$(".aareinput").removeClass('skipmandatory');
}
</script>
<style>

Was this article helpful?