Practical Guide: Customizing Your Webmecanik Forms with CSS 🎨 – Webmecanik

To harmonize your forms with your visual identity without spending hours on each configuration, the simplest approach is to integrate your rules directly into your site's stylesheet (the theme's CSS file or your CMS's “Custom CSS” area) 💡.

All Webmecanik forms share the same class naming convention. Therefore, a single modification applies everywhere automatically ✨!

1. Key selectors to know 📌

Here is the structure of the standard classes generated by the tool:

Form element	CSS class to target	Role
Global container	`.mauticform_wrapper`	Maximum width, outer margins, block background
Field row	`.mauticform-row`	Vertical spacing between each question
Labels	`.mauticform-label`	Typography, font weight, and color of field titles
Input fields	`.mauticform-input`, `.mauticform-selectbox`, `.mauticform-textarea`	Borders, rounded corners, inner padding
Checkboxes	`.mauticform-checkboxgrp-row`, `.mauticform-checkboxgrp-label`	Text and checkbox alignment
Submit button	`.mauticform-button`	Background color, text, hover effect, and size
Error messages	`.mauticform-errormsg`, `.mauticform-error`	Alerts below the fields or at the top of the page

2. Ready-to-use CSS template 🛠️

You can copy this block, add it to your site, and simply adjust the values (hexadecimal colors, typography, rounded corners) according to your brand guidelines:

CSS

/* --- 1. Main container --- */
.mauticform_wrapper {
    max-width: 580px;
    margin: 20px auto;
    font-family: inherit; /* Inherits your site's font */
}

/* --- 2. Field labels --- */
.mauticform_wrapper .mauticform-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 6px;
}

/* Asterisk for required fields */
.mauticform_wrapper .mauticform-required .mauticform-label:after {
    color: #e74c3c;
    content: " *";
}

/* --- 3. Input fields, lists, and text areas --- */
.mauticform_wrapper .mauticform-input,
.mauticform_wrapper .mauticform-selectbox,
.mauticform_wrapper .mauticform-textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus effect (when the visitor clicks in the field) */
.mauticform_wrapper .mauticform-input:focus,
.mauticform_wrapper .mauticform-selectbox:focus,
.mauticform_wrapper .mauticform-textarea:focus {
    outline: none;
    border-color: #0073aa; /* Replace with your primary color */
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
}

/* --- 4. Checkboxes (GDPR consent & choices) --- */
.mauticform_wrapper .mauticform-checkboxgrp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mauticform_wrapper .mauticform-checkboxgrp-label {
    font-size: 13px;
    font-weight: 400;
    color: #555555;
    cursor: pointer;
}

/* Free text / GDPR notice */
.mauticform_wrapper .mauticform-freetext p {
    font-size: 12px;
    color: #7f8c8d;
    line-height: 1.4;
    margin-top: 5px;
}

/* --- 5. Submit button --- */
.mauticform_wrapper .mauticform-button-wrapper {
    margin-top: 20px;
}

.mauticform_wrapper .mauticform-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    background-color: #0073aa; /* Primary action color */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Button hover */
.mauticform_wrapper .mauticform-button:hover {
    background-color: #005a87;
    transform: translateY(-1px);
}

/* Button when clicked */
.mauticform_wrapper .mauticform-button:active {
    transform: translateY(0);
}

/* --- 6. Validation and error messages --- */
.mauticform_wrapper .mauticform-errormsg {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.mauticform_wrapper .mauticform-message {
    padding: 12px;
    background-color: #e8f8f0;
    border: 1px solid #2ecc71;
    color: #27ae60;
    border-radius: 6px;
    margin-bottom: 15px;
}

3. Three tips for a smooth integration 🚀

Always prefix with .mauticform_wrapper: this gives your rules enough weight to override the default styles injected by the script without having to overuse the !important directive 🛡️.
Target a single form if needed: each form has a unique identifier (for example, #mauticform_wrapper_privatehirefr). If you want a specific style on a single page, simply replace .mauticform_wrapper with that specific identifier 🎯.
Keep responsive design in mind: the fields are set to width: 100%, which ensures immediate adaptation to mobile and tablet screens without any additional effort 📱.

1. Key selectors to know 📌

2. Ready-to-use CSS template 🛠️

3. Three tips for a smooth integration 🚀

Related articles