You can edit one field on the form at a time by using that field's unique ID and the Advanced Code Editor. Each field in a form has a specific ID. If you target that specific field, you can make a change to just that field.
For example, we will go through how to change the label color for one field. In order to do this, first, you need to find the field's ID.
There are two ways to find the ID for a specific field. The first option is through your browser's Developer Tool options. Developer options are going to be different for each browser. On Google Chrome and Mozilla Firefox, you can right-click and then choose Inspect Element. If you are using Safari, you will need to turn Developer options on and then you will have the option for Develop in the top menu bar. If you are using Internet Explorer and are on the latest version, you can click F12.
We will use the example of Google Chrome. You can right click on the page and select Inspect Element. Once you click this option you can click on the magnifying glass in the left hand side select the field that you want to change. Once you click on the field, the specific ID will show in the inspector. See example, below.
If you do not want to use Developer Tools, you can access this ID through Formstack. If you go to specific form > Settings > Emails & Actions > Notification Emails you can create a new email. When you create a new email you can choose the option for a Custom Message for Content. When you pick this option you will see a Message area. Under the Message area, there are form fields. You can drag and drop the field you would like to edit to the Message area. You'll then need to click on the "Code View ()" icon to show the field ID. For example, the option that would show in the Message upon clicking on the "Code View" icon would look similar to this: {$76687977 Work Phone}
Either of these options would show the same field ID on your form.
Once you have the field ID you can go to the form > Build and click Style in the upper left-hand side of the screen. When you click this option you will see a list of themes in use and the option to create a new one, so you will either mouse over a current one and edit it or click "Create Theme" to make a new one. (If the Edit option is greyed out that just means you're using one of our Stock Themes and you'll need to click on Make a Copy to edit the Theme.) Then click on Advanced Code Editor to expand it.
In the editor, you can then use the field ID in your selector, the format to use is, in this case, is #field(fieldID). You add the # in front because it is an ID and label because we are specifically looking at the field. Lastly, you will add the declaration for changing the width of a field.
For example:
#field76687977{
width: 20%;
}
Hint: When you add changes to specific fields they might not show in the form builder depending on the change you are making. Once you click save at the top of the theme section then view live form or go to the publish link you will see the change.