If you have never used field plug-ins before, check out our guide to field plug-ins. You can also check out this webinar, which demonstrates how to customize a field plug-in starting at 13:46.
Field plug-ins are a great way to customize the appearance and behavior of your forms. To help you make the best of this functionality, we have a growing field plug-in catalog available for our users. However, there may be times where a field plug-in works really well for what you're looking for, but maybe it doesn't look quite right, and you want to make some minor adjustments to the design, maybe change the color of the background or a button.
This support article is for users with little-to-no experience with designing field plug-ins or web development, and it will walk you through how to make your intended changes. This support article may seem long, but it is detailed so you can follow it without issue.
Choosing an editor
Customizations are made by editing the field plug-in files. They can be edited in any text editor, such as Notepad++ for Windows or BBEdit for Mac. Visual Studio Code is popular with professional developers (it was used for screenshots in this article), but it’s targeted for more advanced usage and might require some learning. Another good option is Sublime Text, which is free, and it can style text files for you to make them easier to follow.
Retrieving the files
Field plug-in files are compressed ZIP files. Once you find the field plug-in you would like to customize, download its field plug-in ZIP file, and decompress that file.
To decompress a ZIP file on Windows, right-click the file, and click Extract All. On Mac, simply double-click the file, and it will be decompressed for you.
Open the folder that is created, and you will find the field plug-in files. From there, you can open them and make adjustments.
The main four files are:
- template.html: Defines the structure
- style.css: Defines the appearance and style (colors, sizes, etc)
- script.js: Defines the behavior
- manifest.json: Defines the metadata
Some field plug-ins might have more files, but all field plug-ins will have those four.
For basic style changes, you will mainly be working in the style.css file, with some minor updates to the manifest.json file. We will discuss how to update those later in this article.
Customizing the field plug-in style
Most basic customizations involve editing the stylesheet, a CSS file, which defines the background color, the font color, the font size, and more. In the field plug-ins files, this file is called style.css.
When you open that file, there will be a series of titles, followed by information in curly brackets. Each of these groups is called a ruleset, and the title is called a selector. The selector defines which elements that ruleset should be applied to.
Image from Mozilla
Each row within the curly brackets is a declaration. In each declaration, the part before the colon is a property, and the part after the colon is the property value. These declarations, properties, and property values define the style of elements in the field plug-in that use that ruleset.
The parts between /* and */ are comments. They are not part of the CSS file; it is just there to tell you more about each ruleset.
Here is an example from the timed-categories field plug-in:
As described in the comment, the above ruleset is applied when the correct choice is selected. Currently, when the correct choice is selected, the background color changes to #c1f7c1, which is this color:
(To learn more about colors in CSS, see About colors below.)
But, you can edit the CSS file so that when the correct choice is selected, a different background color is used. For example, let's say you want the background color to be light purple instead:
That shade of purple is color code #db87ff. In that ruleset, change the background-color property value from #c1f7c1 to #db87ff. Then, when you re-create the field plug-in file and add it to your form, when the correct choice is selected, it will turn purple instead of green.
Here are some of the property values you are most like to change:
- background-color: Background color
- color: Font color
- font-size: Font size
If you would like to change something not listed here, try performing a web search for "CSS", followed by the kind of change you would like to make,
| To learn more about CSS files, you can check out this page, but that is not required for this support article. |
About colors
When you change the colors used in the field plug-in files, you are welcome to just use the simple color names you know, like blue, red, green, yellow, and so on. But, you can really customize colors by using HEX color codes. You don't need to know what that means in detail, but in short, a HEX code defines a specific color.
Try this: perform a Google search for "color picker" (or click this link). A tool that looks like this will appear:
To pick a color, simply move the two sliders until you find a color you like. Once you pick a color you would like to use, look at the HEX box below. That # sign followed by six numbers/letters is the HEX code. Click the copy button to the right to copy that code. You can then use that color code in a field plug-in file to change the color of an element, which we will discuss next.
Of course, there are many other color pickers out there, such as HTML Color Codes, and you can use whichever one works best for you.
Testing changes
It can be annoying to have to re-create the field plug-in file every time you make a change to see how it looks. Luckily, the test view has a tool you can use to quickly look at the changes you have made. To learn how to test your changes, check out our support article on how to test field plug-ins, section Code modules.
Creating the new field plug-in file
Once you are happy with the changes you have made, it is time to create the new field plug-in file! Follow these steps:
- Open the manifest.json file, and increase the version number. For example, if its current version is 1.0.1, change it to 1.0.2. Save that file.
- In the File explorer (Windows) or Finder (Mac), select all of the field plug-in files.
- Right-click the selected files.
- Compress the files into a ZIP file.
- Rename the newly created ZIP file to the original name of the field plug-in file (for example, if the original field plug-in file was called "timed-choice.fieldplugin.zip", then that should be the name of the new file). This is your new field plug-in file.
Field plug-in file is re-named from "Archive.zip" to "timed-choice.fieldplug-in.zip". - Upload the field plug-in file to your form. For help, check out our support article on deploying form definitions, section 2.1 Attaching additional files.
Field plug-in customization document
Some field plug-ins, such as the timed-categories field plug-in, may have a document with hints on how to customize the field plug-in, so you don't have to search the files for what you need. If a field plug-in has a file like that, be sure to check it out for tips.
Do you have thoughts on this support article? We'd love to hear them! Feel free to fill out this feedback form.
0 Comments