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.
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.
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;
More of the font-family code in the next topics.
Apply Styling
Styling the ‘h4’ Header
Code:
/* Header */
h4 {
font-family: "Oswald","Helvetica","sans-serif" !important;
color: #fff !important;
padding: 30px;
background-color: #738063 !important;
}
Explanation:
font-family: "Oswald", "Helvetica", "sans-serif" !important;: This line sets the font of the h4 header to "Oswald" as the primary font, "Helvetica" as the fallback, and "sans-serif" as the default fallback. The !important keyword ensures that this font choice overrides any other conflicting styles.color: #fff !important;: The text color of the h4 header is set to white (#fff). The !important ensures this color is applied despite any other styles that might conflict.padding: 30px;: Adds 30 pixels of padding inside the h4 header, creating space between the text and the edges of the header, making the content more visually balanced.background-color: #738063 !important;: Sets the background color of the h4 header to a muted greenish-brown (#738063), making the white text stand out prominently.
Outcome: The h4 header will appear with a large font in "Oswald", white text color, spacious padding, and a distinctive muted green-brown background. Please see image below.
Styling the ‘label’ element
It’s an element used to associate a text label with a form <input> field. The label is used to tell users the value that should be entered in the associated input field.
Code:
label {
color: #333;
font-family: font-family: "Oswald","Helvetica","sans-serif" !important;
}
Explanation:
color: #333;: Sets the text color of form labels to a dark gray (#333), providing a strong contrast for readability.
font-family: "Oswald", "Helvetica", "sans-serif" !important;: Applies the "Oswald" font, with "Helvetica" and "sans-serif" as fallbacks, ensuring the labels have a consistent font style across different browsers.
Outcome: The labels on your form will display dark gray text in the "Oswald" font, ensuring readability and stylistic consistency.
Styling the 'span' element
It’s an inline container used to mark up a part of a text, or a part of a document.
Code:
span {
color: #333;
font-family: font-family: "Oswald","Helvetica","sans-serif" !important;
}
Explanation:
color: #333;: Sets the text color of any span elements (often used for inline text) to dark gray (#333), ensuring consistency with the labels.
font-family: "Oswald", "Helvetica", "sans-serif" !important;: Applies the "Oswald" font to all span elements, with the same fallback options, ensuring uniform typography across the form.
Outcome: Any text within span elements will be styled in dark gray with the "Oswald" font, maintaining visual consistency with other text elements.
Styling the checked state of form inputs
The .Mui-checked class specifically targets the elements that are in a "checked" state, such as checkboxes or radio buttons.
Code:
/* Check box color */
.Mui-checked {
color: #b07837 !important;
}
Explanation:
color: #b07837 !important;: This style targets elements with the Mui-checked class and sets their color to a golden brown (#b07837).
Outcome: When an input element (like a checkbox or radio button) is checked, it will display in a golden brown color, standing out clearly on the form.
Styling links (a elements)
This is a CSS selector that targets all <a> elements, which are used to create hyperlinks in HTML. The <a> tag is what makes text clickable, directing users to another webpage, a different section of the same page, or triggering another action like downloading a file.
Code:
/* Font colour for links */
a {
color: #e6983c;
}
Explanation:
color: #e6983c;: This sets the color of all links (a elements) on the form to a warm, golden-orange shade (#e6983c).
Outcome: Links within the form will be displayed in a golden-orange color, which can make them more noticeable and inviting for users to click.
Styling the primary button
Code:
/* Button colour and font for button */
button.MuiButton-containedPrimary {
background-color: #5f5143 !important;
color: #fff !important;
font-family: "Oswald","Helvetica","sans-serif" !important;
}
Explanation:
background-color: #5f5143 !important;: Sets the background color of primary buttons (often used for submission) to a deep brownish shade (#5f5143), making them distinct from other elements.
color: #fff !important;: The button text is set to white, ensuring it contrasts well with the dark background.
font-family: "Oswald", "Helvetica", "sans-serif" !important;: Ensures that the text on the button uses the "Oswald" font, with fallbacks, for consistency with other form elements.
Outcome: Primary buttons will have a deep brown background with white text in the "Oswald" font, making them both visually distinct and consistent with the overall form styling.
Styling disabled button
button:disabled,
button[disabled] {
background-color: #6c757d !important;
color: #fff !important;
font-family: font-family: "Oswald","Helvetica","sans-serif" !important;
}
Explanation:
background-color: #6c757d !important;: Sets the background color of disabled buttons to a muted gray (#6c757d), indicating that they are inactive.
color: #fff !important;: The text color remains white, providing contrast against the gray background while still indicating the button's disabled state.
font-family: "Oswald", "Helvetica", "sans-serif" !important;: The font is kept consistent with other buttons, ensuring a unified look even when the button is disabled.
Outcome: Disabled buttons will have a gray background and white text in the "Oswald" font, clearly distinguishing them from active buttons while maintaining overall form consistency.
Change the background wrapper color
A form-wrapper in CSS refers to a container element, usually a <div> or another block-level element, that is used to wrap or enclose a form and its associated elements, such as input fields, labels, buttons, and other form-related components.
Code:
/* Change the background colour of wrapper */
.nexl-form-wrapper {
background: #c7cbc8;
}
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.