Skip to main content
All CollectionsDeveloper resources
How to style forms using custom CSS
How to style forms using custom CSS

Technical documentation for developers to apply custom CSS to forms

Marcus Warren avatar
Written by Marcus Warren
Updated over a week ago

This help page is intended for technical users with expertise using CSS.

The ability to customize form CSS is accessible based on user roles.

Standard CSS included

Envoke templates include the "nvk-content" CSS file and the "editor-styles" <style> element.

<link href="nvk-content.min.css" rel="stylesheet" type="text/css">
<!-- Envoke Engagement Builder Styles -->
<!-- WARNING: Do not edit these styles. To add custom styles, create another <style> tag or <link> to a CSS file -->
<style id="editor-styles"></style>
<!-- End Envoke Engagement Builder Styles -->

These provide the basic Bootstrap framework styles and responsive functionality, as well as any styles added through the form editor UI. Do not modify the "editor-styles" <style> element as any changes made may be overwritten by the layout editor.

How to customize form styles

If you require customization of forms that cannot be achieved from the visual editor you need to use custom CSS to control the look and feel of the forms by addressing the following classes that are used by Envoke forms:

Envoke form classes

nvkContent

The "nvkContent" class is the top level class identifying an Envoke engagement builder page. In standard Envoke templates the nvkContent element is a <div> surrounding all other content in the HTML <body>

<body style="margin: 0px; padding: 0px;">
<div class="nvkContent">

However, when a engagement builder page is javascript embedded, the <body> tag will not be inserted. In this case the nvkContent element will be the top level container for the conversion page content that is embedded.

All bootstrap classes from the "nvk-content" CSS file are prefixed with the "nvkContent" class and will only be active inside this container.ย 

nvkOffer

The "nvkOffer" class is the top level class for dynamic offer content embedded on an engagement builder page. It may contain a group or a single instance of an offer, and its HTML content is generated by merge fields at the time of each conversion page view.

In standard Envoke templates an offer block will always be contained inside a "block-inner" element, so that many of its styles can be modified in the layout editor styles dialog.

nvkForm

The "nvkForm" class is the top level class for any form constructed in the form builder dialog of the engagement builder page editor. It will also have an id attribute beginning with "nvkForm" followed by a hash such as:

<div class="nvkForm" id="nvkFormed4252ead0d55f4114f5826272386c66">

In cases where more than one Envoke form is present on a single page, the id can be prepended to any CSS rules to ensure that only the desired form is targeted.

In standard Envoke templates a form will always be contained inside a "block-inner" element, so that many of its styles can be modified in the layout editor styles dialog.

nvkR2BCOffer & nvkSubscriptionOffer

These classes represent higher level components that wrap over other Envoke form components. For example, an "nvkR2BCOffer" may contain an "nvkCheckboxInputGroup" and a "nvkRadioInputGroup". Use these classes to specifically target the fields inside the R2BC or consent / subscription offer.

nvkFormItem

The basic class that wraps all Envoke <input>, <select> and <textarea> elements. It contains both the label and the associated input elements. For CSS targeting purposes, note that checkbox and radio input groups are made up of multiple "nvkFormItem" elements, and the submit button contains a single <button> element.

nvkValidationError

Envoke forms add this class to <input>, <select> and <textarea> elements that do not pass validation. By default, this sets a red border around the element and lightly shades the background.

nvkValidationMessage

When an Envoke form does not pass validation, a <div> with this class appears at the top containing the validation message. By default it has a dark red background and white text.

nvkOfferUnavailable

A special instance of "nvkFormItem" that shows a fallback message because there are no offers available to select. This may be because there are no offers in the selected group, or that all offers in the group are unpublished or expired. It may replace "nvkSelectInput", "nvkCheckboxInputGroup", or "nvkRadioInputGroup" components.

nvkFormLabel

A class attached to every <label> element in the form, including the inner labels of a checkbox or radio input group.

nvkTextInput, nvkTextAreaInput, nvkSelectInput, nvkCheckboxInput, nvkRadioInput

These classes are attached to "nvkFormItem" elements to specify exactly which kind of form component they contain. For example, use the "nvkCheckboxInput" class to modify the spacing between the checkboxes in a group, or use the "nvkTextInput" class to change the height of all text inputs.

nvkCheckboxInputGroup, nvkRadioInputGroup

These classes represent higher level components that wrap one or many "nvkCheckboxInput" or "nvkRadioInput" components.

nvkSubmitButton

The "nvkFormItem" element that contains the form's submit button.

Bootstrap classes

The following Bootstrap classes are commonly used in Envoke templates:

container, container-fluid

The top level classes for the Bootstrap responsive column and row framework. The "container" class creates a centered container of fixed width, "container-fluid" creates a full width container.

col-md-x (where x is a number between 1 and 12)

Responsive rows in Bootstrap sum to 12: for example, a single column row should have a class of "col-md-12". To create a row with three columns of equal width, use three <div> elements with the class "col-md-4".

We recommend using "col-md" classes for rows in an Envoke template, but classes beginning with "col-xs", "col-sm", and "col-lg" are also available. They control at which minimum screen size the columns will wrap into a single row.

Bootstrap screen sizes

hidden-xs, hidden-sm, hidden-md, hidden-lg

Use these classes to hide a given content block for a particular screen size.

img-responsive, center-block

These classes should be applied to all images that should exhibit responsive behaviour.

form-horizontal

A helper class used in Envoke forms when "Horizontally align labels" is selected.

form-group, form-control

The standard bootstrap classes for form elements, and the <div> group containing the associated <label> element. Provides standard padding, appearance and 100% width styles for form elements.

checkbox, checkbox-inline, radio, radio-inline

Helper classes for inline display or vertical alignment of checkbox and radio input groups.

btn, btn-default

The standard button class providing padding, border, and border-radius for buttons (can be applied to <button> and <a> elements).

Read more information about Bootstrap CSS framework
โ€‹

Did this answer your question?