Controlling the display of form fields

Kurt Hansen -

You can control the content and format of a select number of fields. In most cases, you control the content by clicking on the blue "Edit" button next to the page and editing the field according to the instructions on the ensuing pop-up page. Additionally, you can hide non-required fields by attaching a CSS file to the page.

Hiding a field by attaching a CSS file

First, determine the CSS selector that will hide the field you want to hide. You can do this using the "Inspect Element" tool in Google Chrome. (If you are unfamiliar with the Inspect Element tool, Google for instructions. It is a powerful and useful tool for editing web pages.) Navigate to the element you want to hide and use the Inspect tool to click on it. The inspect tool is the icon on the top left of the Inspect Element toolbar. You can edit the CSS in place to get the CSS you want. Then, copy that bit of CSS and paste it into a CSS file. Be sure to use a text editor and not a document editor like Word.

Save that file. Find your page in the Find/Edit listing, click on the blue "Edit" button to bring up the pop-up. Scroll to the bottom where you see the button for the CSS file. Click on it to find the file on your computer and upload it. Click the "Update" button to complete the process.

In general, the CSS you will use to hide a non-required form field is this:

#fieldset-FIELDNAME {

display: none;

}

where FIELDNAME is replaced by the case-sensitive name of the field. For example, to hide the MailingList checkbox, use the following CSS:

#fieldset-MailingList {

display: none;

}

Attached is a sample CSS file.

 

Have more questions? Submit a request

1 Comments

  • 0
    Avatar
    Christie Nicklay

    This would have been helpful, however, there is no CSS button on the edit form to attach a CSS file.

Please sign in to leave a comment.
Powered by Zendesk