Skip to main content
Examples of customizing online forms

Once integrated into your website, Qomon online forms are fully customizable through CSS code editing.

Helen Sabatine avatar
Written by Helen Sabatine
Updated over a year ago

Customizing online forms

Your Qomon online form can be styled to seamlessly integrate with your brand identity.

If you need assistance integrating a Qomon form into your website, visit this help article.

If you're lacking inspiration or simply curious, this article showcases some examples of form integrations done by our clients. You just need to copy and paste the code of your choice onto your website.

A help article is available to guide you through the customization process here if you need any assistance.

Example 1: Email collection

Prerequisites: You must create a form that only includes an email field:
​

  1. Delete field name.

  2. Add placeholder to the Email field: "Email*".

  3. Rename the button label to OK.

  4. Hide Email consent.

  5. Hide Calls/SMS consent.

  6. Hide Privacy Policy.

CSS code to copy/paste or adapt.

/**
* Change form and submit button background colors
*/
.qomon-form .main-container {
--formBackground: #a70a2d;
--signButtonBackground: #a70a2d;
}

/**
* Change the order between legal, input and submit button
*/
.qomon-form .form-container {
display: flex;
flex-wrap: wrap;
position: relative;
}
.qomon-form .legal {
order: 0;
}
.qomon-form .fields-container {
order: 1;
}
.qomon-form .sign-cta__container {
order: 2;
}

/**
* Legal part
*/
.qomon-form .legal__label {
margin: 0 0 6px;
}
.qomon-form .legal__text {
color: white;
font-size: 13px;
line-height: 1.5;
}

/**
* Input part
*/
.qomon-form .fields-container {
width: 100%;
}
.qomon-form .input {
margin: 0;
}
.qomon-form .input__inner {
height: 40px;
border-radius: 6px;
font-size: 13px;
padding-left: 15px;
}
.qomon-form .input__inner:focus {
border-color: transparent;
}

/**
* Submit button part
*/
/* Position the button at the right of the input */
.qomon-form .sign-cta__container {
position: absolute;
right: 0;
bottom: 0;
width: max-content;
}
.qomon-form .sign-cta__container button {
border: solid 1px white;
border-radius: 0 6px 6px 0;
min-width: unset;
height: 40px;
font-size: 20px;
font-weight: bold;
padding-top: 0;
padding-bottom: 0;
transition: all 0.3s;
}
/* Add a transition between colors on focus */
.qomon-form .sign-cta__container button:hover {
border: solid 1px #a70a2d;
color: #a70a2d;
background-color: white;
filter: none;
}

/**
* Confirmation part (after submission)
*/
.qomon-form .confirmation__title {
color: white;
}
.qomon-form .confirmation__body p {
color: white;
}

Example 2: Advanced customization

⚠️ Prerequisites: To achieve the same result, you must create a form that includes all of the following fields (in this order):

  1. First Name

  2. Last Name

  3. Preferred Name

  4. Gender

    1. Hide the "Other" gender option

  5. Date of Birth

    1. Add a placeholder: "dd/mm/yyyy"

  6. Address (single block)

    1. Show Address Line 2

      1. Hide the Postal Code

  7. Email

  8. Mobile Phone

  9. Regenerate response

CSS code to copy/paste or adapt.


/**
* Change label and submit button colors
*/
.qomon-form .main-container {
--formLabelColor: #9e9e9e;
--signButtonBackground: #546e7a;
}

/**
* Select specific inputs to apply rules only to them depending on window size
*/
.qomon-form .radio--gender {
width: 100%;
}

@media (min-width: 768px) {
.qomon-form .input--firstname,
.qomon-form .input--surname,
.qomon-form .input--married_name,
.qomon-form .input--mail,
.qomon-form .input--mobile {
width: calc(50% - 12px);
}
.qomon-form .radio--gender,
.qomon-form .input--birthdate,
.qomon-form .address--housenumber {
width: calc(50% - 12px);
}

.qomon-form .address--housenumber,
.qomon-form .address--street {
margin-top: 20px;
}
.qomon-form .input--mail,
.qomon-form .input--mobile {
margin-top: 40px;
}
}

@media (min-width: 930px) {
.qomon-form .radio--gender,
.qomon-form .input--birthdate,
.qomon-form .address--housenumber {
width: calc(25% - 12px);
}
}

/**
* Specific rules for radio input
*/
.qomon-form .radio {
border-bottom: 1px solid #9e9e9e;
height: 60px;
}
.qomon-form .radio__legend {
margin-bottom: 0;
}

/**
* Rules for inputs
*/
.qomon-form .input {
margin-bottom: 20px;
position: relative;
height: 60px;
justify-content: space-between;
}
.qomon-form .input__inner {
border-radius: 0;
border: none;
border-bottom: 1px solid #9e9e9e;
margin-top: 0;
padding: 0;
}
.qomon-form .input__inner::placeholder,
.qomon-form .input--birthdate .input__inner[data-value=""] {
color: #9e9e9e84;
}

/**
* Rules for inputs and labels depending on the state of the input
*/
.qomon-form .input__label {
position: relative;
top: 34px;
font-size: 14px;
transform: translateY(0);
transition: all 0.2s ease-out;
}
/* If the input has a value or a placeholder change the font-size and the position of the label */
.qomon-form .input__inner:not([data-value=""]) + .input__label,
.qomon-form .input__inner[placeholder] + .input__label,
.qomon-form .input__inner:focus + .input__label,
.qomon-form .input--birthdate .input__label {
font-size: 12px;
transform: translateY(-34px);
}
/* If the input is in focus and has a value the label is green */
.qomon-form .input__inner:focus:not([data-value=""]) + .input__label {
color: #4caf50;
}
/* If the input has a value the input border is green */
.qomon-form .input__inner:not([data-value=""]),
.qomon-form .input__inner:focus:not([data-value=""]),
.qomon-form .radio:is(:valid) {
border-color: #4caf50;
}
/* If the input is in focus and has no value the label is red */
.qomon-form .input__inner:focus[data-value=""] + .input__label {
color: #f44336;
}
/* If the input has no value the input border is red */
.qomon-form .input__inner:focus[data-value=""] {
border-color: #f44336;
}

/**
* Rules for legal part
*/
.qomon-form .legal {
margin-top: 80px;
}
.qomon-form .legal__label {
width: 100%;
justify-content: center;
}
.qomon-form .legal__text {
min-width: 260px;
}

/**
* Rules for submit button
*/
.qomon-form .sign-cta__container {
border: none;
padding: 0;
margin-top: 40px;
justify-content: center;
}
.qomon-form .sign-cta button {
margin: 0;
border-radius: 2px;
text-transform: uppercase;
padding: 8px 16px;
font-size: 18px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s ease-out;
}
/* Add a box shadow transition on hover */
.qomon-form .sign-cta button:hover {
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14),
0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
filter: none;
}

/**
* Rules for privacy part
*/
.qomon-form .privacy {
text-align: center;
}


​

Did this answer your question?