Customize the widget look and feel

In addition to changing the widget tabs, labels, and headers by using the built-in settings, you can also customize its look and feel using CSS and Javascript.

Settings > Widget offers custom widget styles (CSS) and custom widget Javascript fields to capture these customizations.

Custom Widget Styles (CSS)

To add custom CSS widget styles, go to Settings > Widget and add CSS to the Custom Widget Styles section.

Screenshot showing the Widget Settings Custom Widget Styles section with some sample CSSSample custom CSS in Custom Widget Styles

You can play around with a right-click and inspect on various fields or areas in the widget to try to identify the classes being used. Here are a few of the most frequently changed styles. You can copy and paste these in to your Custom Widget Styles section and then change the highlighted text to make adjustments:

Change the background color of the tabs

/* Tab color */
.widget .widget__nav a {
    background-color: #0097a7;
}

Change the font on the tab labels

/* Tab label font used (must be defined on the site where widget is being used */
.widget .widget__nav a {
  font-family: Neuton;
}

Change the color of all hyperlinks

/* Change the color of hyperlinks */
.article-links a,
.list-links a,
.list-links i,
.btn-upload,
a {
    color: #1f9baa;
}

Change the contact form submit button color

/* Contact Form submit button color */
.form .form-submit {
    background-color: #fc9f00;
}

Custom Widget Javascript

For additional customizations (such as removing some fields entirely, changing the order, etc.), you'll need to use Javascript  (JS) in the widget. To add widget JS, go to Settings > Widget and add your JS to the Custom Widget Javascript section.

Screenshot showing sample custom widget Javascript to hide the file attachment option in the contact tabSample Custom Widget Javascript

You do NOT need to add <script> tags around code entered in the Custom Widget Javascript section.

Working with the Contact tab

Javascript for the contact form needs to go inside the onTabChange function. Inside this function, you have access to data.oldTab and data.newTab to hook onto the tabChange events:

//JS for the contact form needs to go inside onTabChange function
var onTabChange = function(data) {
      //you have access to the data.oldTab and data.newTab to hook onto these events if it helps. Example:
      console.log("Tab changed from " + data.oldTab + " to " + data.newTab);      
      //do some code down here
}

For example, this code will hide the "Upload file attachment" option in the contact form:

//JS for the contact form needs to go inside onTabChange function
var onTabChange = function(data) {
      //simple example of hiding an option
      //hide file attachment option
      $('.form__upload').hide();
}