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