Got a problem?

Yo, we’ll solve it.

Adding custom CSS to web forms

If you are looking to change both the look and the feel of your Web Form beyond the basic editing capabilities of the drag and drop options, you can edit the CSS directly using the Design Editor. 

To access custom CSS in Web Forms go to Design > Advanced Theming in the editor’s sidebar.

You’ll be presented with the CSS Editor and a live preview that will update when changes are made in the editor.

In the CSS editor, you should see some CSS classes already available for you. Additionally, if you need to access a more specific HTML element you can click View HTML in the top right-hand corner of the screen to view all CSS classes and ids you can work with.

Form Container

The web form’s container is accessed by using .cs-v2-form. This is a great place to add margins and paddings around your entire form. Additionally, you can set the sizing of your form here.

Form Blocks

Crowdskout forms are made up of individual form blocks. Each form block contains one form element such as a question, answer choice, header, or space / break. You can access all of your form blocks by using .cs-v2-form-block or access an individual form block by using the CSS nth-child() selector.

For example, if you want to only make style changes to the first form block you can use .cs-v2-form-block:nth-child(0). This is especially useful for advanced theming options.

It is important to note here that each form element rests in its own form block. This is true even when form elements are coupled or visually positioned side-by-side (such as First Name and Last Name).

Form Fields

Each form block contains a group of elements that make up a field. Depending on the type of block the options can vary quite a lot. For instance, regular text input fields can have a label element, a required label element, and an input element. You can access each by using the following selectors respectively: .cs-v2-form-label, .cs-v2-form-label-required, and .cs-v2-form-input.

Another example is a single select field which also has a label element and a required label element but also includes a checkbox label for each individual checkbox accessed by .cs-v2-form-checkbox-n where n is equal to the checkbox number.

Form Submission:

Each form also contains a submit button accessed by .cs-v2-form-submit. Like all other form elements, the form submission button is also contained inside of a form block.

It is important to keep in mind that when using generic selectors like .cs-v2-form-block or .cs-v2-form-label you will be changing the styling on ALL elements with that specific CSS class.

If you are looking to style a specific element it is important that you combine selectors so that you are accessing the right element and only that element. For example, if you are looking to style just the second form field label you will need to use the following.

.cs-v2-form-block:nth-child(1) > .cs-v2-form-label {

/* put CSS styles here */

}

Remember that nth-child() starts at index 0 so in order to access the second element we use n = 1. Additionally, we use the > symbol to denote child element.

If you have any questions about editing a form, feel free to chat with us using the chat button on the lower right-hand chat button on your screen.

*For more detailed information on everything that you can do with CSS feel free to visit W3Schools CSS tutorial which has excellent documentation of the language.