We like the look of the address field in the forms, but we would like to modify it slightly. I can see where we can change the display for "state", and "zip" and hide country, but is it possible to make the individual field labels (such as street address, address line 2, city, etc) appear below the field rather than on top of the field? Also, even though I hide the country, since the address is a required field, it is not allowing submission of the form. Is there a way around that? Thanks for your help!
Question
Question
Replies
replied on March 20, 2020
•
Show version history
Although what you are requesting should be possible, I find it much easier to just set-up my own address fields rather than trying to use the built-in ones - gives more control.
- Add a single line field - name is "Mailing Address" (or whatever you desire) - populate either the text above or text below values with "Address 1" - make it extra-large - give it CSS Class(es) of: "halfWidth wideLabel".
- Add a single line field - leave the name blank - populate either the text above or text below values with "Address 2" - make it extra-large - give it CSS Class of: "halfWidth".
- Add a single line field - leave the name blank - populate either the text above or text below values with "City" - make it extra-large - give it CSS Class(es) of: "halfWidth noLabel".
- Add a single line field - leave the name blank - populate either the text above or text below values with "State" - make it extra-large - give it CSS Class(es) of: "quarterWidth noLabel".
- Add a single line field - leave the name blank - populate either the text above or text below values with "Zip" - make it extra-large - give it CSS Class(es) of: "quarterWidth noLabel".
- Add this CSS to your form:
.noLabel .cf-label {display : none;} .quarterWidth {display : inline-block; width : 25%;} .halfWidth {display : inline-block; width : 50%;} .wideLabel .cf-label {width : 300%; max-width : 300%;}
Ends up looking like this:
You can control required fields, max character lengths, regex formatting limitations, anything else you need.
0
0
You are not allowed to follow up in this post.