Enhancing the look and feel of your Nexl forms is a powerful way to reinforce your brand’s identity and improve user experience. In this guide, we’ll walk you through the steps to import Fonts and apply additional styling like colors, borders, and padding to make your forms stand out.
Cover photo
Adding a cover photo to your forms can help convey a stronger brand image and create a more impactful impression on your audience.
Follow these simple steps to add a cover photo to your forms.
Click on Add Cover Photo.
Upload your image. You can either drag and drop your image into the uploader or click it to select a file from its location.
Your cover photo will now be displayed at the header section of your form.
Image Requirements:
Accepted Formats: JPEG or PNG
Maximum Size: 50MB
Aspect Ratio: 5:1 (For example, 3000 x 600 pixels)
NOTE: When forms are cloned, cover photos will be cloned as well.
Nexl Form CSS Editor
It allows you to write, edit, and manage Cascading Style Sheets (CSS) code. CSS is a stylesheet language used to control the presentation and layout of HTML elements on a web page. The Nexl Form CSS editor provides a dedicated space for you to work with CSS, often offering features that enhance productivity and appearance.
Our form editor offers two types of styling options:
Global Form Styling
This option is recommended for establishing a consistent brand style across all forms. It allows you to set universal elements such as fonts, colors, and general design aesthetics that apply to every form.
Custom Styling Per Form
This feature enables you to customize individual forms, allowing for specific styling tailored to each form's purpose. This is useful for creating unique designs without impacting the styling of other forms.
Default Form Style
Default Form Confirmation Style
Importing Fonts
Importing fonts is necessary when you want to use specific typefaces in your forms instead of the default system fonts. While default fonts are functional, they might not align with your brand’s identity or the desired aesthetic of your website.
Go to fonts.google.com
Search for your preferred font. In this example, we will use “Oswald”.
Select the preferred font (i.e., “Oswald”)
Click on “Get Font”
Click on “<> Get embed code”
Copy the URL
Paste the URL on a web address bar then hit enter. The woff2 codes will be generated.
Copy the import code (woff2) and paste it into the Nexl Form CSS editor.
Access the NexlForm CSS editor:
a. Click "Admin”
b. Click “Forms”
c. Click “General Settings”
d. Navigate to the “Styles” section
e. Paste the import code in the styles section:
What is @font-face?
The @font-face rule in CSS allows you to define custom fonts that can be loaded and used on your web pages, even if those fonts are not installed on the user's device. This is essential for ensuring that your forms and other web content display consistently across different browsers and devices.
1. Cyrillic Extended Characters
Explanation:
font-family: 'Oswald';: Names the font so you can easily apply it later in your CSS.
font-style: normal;: Specifies that this is the normal, non-italic version of the font.
font-weight: 200 700;: Indicates that this font file supports a range of weights from light (200) to bold (700).
font-display: swap;: Improves loading performance by showing a fallback font until the "Oswald" font is fully loaded.
src: url(...) format('woff2');: Specifies the location of the font file, which is hosted on Google Fonts, in the woff2 format.
unicode-range: U+0460-052F, U+1C80-1C88...;: Defines the specific characters supported by this font file, which are mainly used in extended Cyrillic scripts.
2. Standard Cyrillic Characters
Explanation:
unicode-range: U+0301, U+0400-045F...;: This range includes standard Cyrillic characters, which are commonly used in languages like Russian, Ukrainian, and Bulgarian.
How to Use the Imported Font in Your Forms
Once you have defined the @font-face rules, you can easily apply the font to your form elements by using the following CSS:
font-family: ‘Oswald’, sans-serif;
Examples of Custom CSS code to modify forms
Updating Layout and Structure
Full Form Container |
|
Code | Output |
|  |
Wrapper Background |
|
|  |
| 
|
| 
|
| 
|
|
 |
Full form alignment |
|
|  |
Footer and Submit Button Order |
|
| Before: 
After:
|
| Before:
After: 
|
Updating Typography and Headings
Code | Output |
|  |
| 
|
|  |
|  |
| 
|
| 
|
| 
|
Updating Form Field Layout
Code | Output |
| 
|
| 
|
| 
|
| 
|
| 
|
Updating Checkbox & Radio Styling
Code | Output |
Note: It will also change the orientation of the radio buttons. The next code will show how to set the radio button's orientation. | 
|
| 
|
| 
|
| 
|
| 
|
| 
|
| 
|
| 
|
| Before:
After: 
|
Updating Input Styling
Code | Output |
| 
|
| 
|
| 
|
Note: Outline color from grayish to pinkish. | 
|
Updating Buttons
Code | Output |
| 
|
| 
|
Updating copy
Element | Code | Output |
Submit Button |
| Before hover:
On hover:
|
Text field caption or helper text |
| 
|
Hide and change copy for a Select element (e.g., Language Preference select) |
| 
|
Select "None" |
| Original Copy: 
After: 
|
Hiding Form Elements
Element | Code | Output |
Form Title |
|
 |
Nexl Footer |
} | Main page:
Confirmation page: 
|
Placeholder text |
| Before:
After: 
|
Hide placeholder text for dropdown i.e., Country |
| Before: 
After: 
|
Editor toolbar |
| Before:
After:
|
Updating Hyperlink and Asterisk Stylings
Code | Output |
| Default link color: 
After: 
On Hover (note the thickness of the underline):
|
| Before:
After: 
|
Viewport Responsive Rules
Tablet (600px–899px):
|
|
Mobile (< 600px):
|
|
Important Notes
When customizing fonts with imported fonts and various styles, it’s essential to be aware of certain limitations and considerations that may impact your design and user experience. Here are some key points to keep in mind:
Font Availability and Compatibility
While Google Fonts offers a vast library of typefaces, not all fonts may be available or suitable for your specific use case.
Cross-Browser Compatibility
Not all fonts are supported equally across different browsers and devices. Some fonts may render differently or not display at all on older browsers or devices, which could affect the performance of your forms for some users.
Fallback Fonts
To mitigate compatibility issues, it’s essential to define fallback fonts in your CSS. These are secondary fonts that will be displayed if the custom font fails to load, but they may not perfectly match your intended design.
Limited Visual Elements
Inability to Insert Images - While you can style the borders and backgrounds, you cannot embed images.
Performance Impact
Importing multiple fonts and extensive styling can affect the loading speed of your forms and the overall page. A higher number of HTTP requests for font files can lead to increased load times. It’s advisable to limit the number of fonts used.
In summary, while customizing form styles can significantly improve their appearance and alignment with your brand, it’s important to be aware of these limitations. Balancing aesthetics with functionality, accessibility, and performance will help you create forms that are both beautiful and effective.
Reference
CSS Rule Summary Table
Section | Selector(s) | Purpose / Style Explanation |
Layout: Form Container |
| Centers form layout, limits width to 900px, adds side padding for large screens. |
Wrapper Background |
| Sets form background to solid white. |
Typography (Global) |
| Applies Arial font, regular weight, dark gray color across headings and text. |
Headings |
| Sets heading size to ~34px, light font weight, and consistent vertical spacing. |
Description Text |
| Sets font size to 16px, improves legibility and line height.ets font size, line height, color |
Label Styling |
| Bold, left-aligned labels with max width 240px; wraps long text. |
Label Override (Consent) |
| Uses normal font weight for consent section labels. |
Field Row Layout |
| Horizontally aligns label and field on desktop; vertical on tablet/mobile. |
Label Container |
| Sets label area to fixed width (240px) and prevents shrinkage. |
Input Container |
| Sets fixed width (600px) and height (40px) for inputs; aligns center vertically. |
Input Text Field |
| Sets font size to 18px and enforces Arial font family. |
Placeholder Text |
| Light gray placeholder text with reduced opacity and large font. |
Input Focus |
| Preserves white background and gray text on focus. |
Autofill Handling |
| Forces white background and gray text to override browser autofill. |
Field Borders |
| Sets light gray border; consistent with overall form style. |
|
| On hover: darkens border to gray for clearer interaction feedback. |
Checkbox Layout |
| Grid layout (2-column by default), adjusts on smaller screens. |
Checkbox Styling |
| Uses light gray color for default state; square corners. |
|
| Sets checked icon to dark gray for consistency with design palette. |
Radio Buttons |
| Lighter border for unselected; bold dark fill for selected radio. |
Responsive: Tablet |
| Converts horizontal layout to vertical stacking; adjusts widths to 100%. |
Responsive: Mobile |
| Fully stacks form elements; centers submit button; reduces padding. |
Submit Button |
| Bold button with navy background, large text; uses ::after for French "Soumettre" label. |
|
| Replaces button label visually with "Soumettre" while keeping original text transparent. |
Localization (Dropdown) |
| Underlined dark text with orange highlight on hover. |
Helper Text |
| Hides helper text below inputs for a cleaner look. |
Hide Footer/Branding |
| Hides branding or footer sections in the form. |
Common CSS Properties by Category
Text Appearance
Property | Description | Syntax |
| Controls the size of the text (e.g. |
|
| Sets the boldness ( |
|
| Sets the font to |
|
| Defines the typeface (e.g. |
|
| Changes the text color (e.g. |
|
| Controls space between lines of text. |
|
| Adjusts space between characters. |
|
| Adjusts space between words. |
|
| Aligns text: |
|
| Changes case: |
|
| Adds underline, line-through, or none. |
|
| Controls how white space is handled (e.g., |
|
| Adds shadow behind the text. |
|
| Ensures long words break to fit inside the container. |
|
Box Model (Spacing & Sizing)
Property | Description | Syntax |
| Sets space outside the element. |
|
| Sets space inside the element. |
|
| Sets the width of the element. |
|
| Sets height ( |
|
| Limits the maximum width. |
|
| Sets a minimum width. |
|
| Includes padding and border in total width/height. |
|
Positioning & Layout
Property | Description | Syntax |
| Controls box type ( |
|
| Aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). Values: |
|
| Specifies the default alignment for items inside a flexbox or grid container. Values: |
|
| Specifies direction in flex containers ( |
|
| Prevents item from shrinking ( |
|
| Sets space between flex items (e.g. |
|
| Manages content overflow ( |
|
| Specifically targets horizontal overflow. |
|
| Controls element positioning ( |
|
| Offsets position if |
|
| Controls stacking order. |
|
| Floats element to left or right. |
|
| Prevents floating elements from affecting layout. |
|
Background & Border
Property | Description | Syntax |
| Sets the background color (hex code or rgba). |
|
| Adds a background image. |
|
| Sets border style, width, and color. |
|
| Rounds the corners of the border. |
|
| Adds a shadow around the element. |
|
| Controls transparency level ( |
|
Transitions & Effects
Property | Description | Syntax |
| Animates property changes smoothly. |
|
| Rotates, scales, or skews the element. |
|
| Sets transparency level. |
|
| Toggles element visibility. |
|
| Applies keyframe animations. |
|
Visual Effects & States
Property | Description | Syntax |
| Applies styles when the user hovers (e.g. change checkbox color). |
|
| Styles placeholder text (hidden in this CSS). |
|
| Styles for checked checkboxes/radio buttons. |
|
| A pseudo-element inserts some content before the content of the specified element. | selector::before { |
| A pseudo-element inserts some content after the content of the specified element. | selector::after{ |
Form-Specific Styling
Component | Description | Syntax |
| Container for input fields, styled with padding and height. |
|
| Custom-sized checkboxes with background color and spacing. |
|
| Custom radio buttons with embedded checkmark and no default icon. |
|
| Styled rich text editor with fixed width, padding, font. |
|
| Submit button with custom dimensions and color. |
|
Responsive Design
Property | Description | Sample Syntax |
| Wraps styles for different screen sizes. |
|
| Allows responsive text sizing. |
|
| Used in media queries to adjust layout below certain widths. |
|
| Stacks elements vertically on smaller screens. |
|