CSS - Editing the Width of One Field

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 and Redirects> 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. If you double click on the field you would like to edit it will fill the message area with the field name and ID. For example, the option that would show in the Message would look similar to this:  {$41035734 Work Phone}. The field ID would then be 41035734

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 Theme in the bottom 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 new theme" to make a new one. (If you don't see Edit this Theme that just means you have already Edited the Theme before and you can just skip that step.) Then you can click to expand the Advanced Code Editor. 

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: 

#field41035734{
    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. 

For more edit options for fields and labels you can check out our CSS doc or a variety of online CSS help sites that can be found under References on our CSS Webinar Part 1 support document.  


To see this specific edit in action, check out our CSS Part 2 Webinar