All Collections
Integrations
Website
[Expert] How to customize online forms for my website
[Expert] How to customize online forms for my website

Find out how to customize your online form so that it fits perfectly with your website design

Aurelien Charrier avatar
Written by Aurelien Charrier
Updated over a week ago

How to customize online forms for my website

The entire form can be customized to perfectly match your brand identity. Reach out to the individuals responsible for your website to carry out the desired customization.

The form can be styled using a CSS file, just like any other element on a web page.

However, it's important to note that a basic style is already applied to provide an initial result (in line with your configurations on Qomon). This style uses the class ".qomon-form" to apply itself and will not affect other elements on your page.

The classes have been named using the BEM methodology, which allows for simplified usage in Sass/SCSS.

Here is a blank structure that can serve as an example:

Sass (blank structure)

.qomon-form {
}

// Form page
.qomon-form .main-container {
}

.qomon-form .form-container {
}

.qomon-form .fields-container {
}

.qomon-form .input {
}
.qomon-form .input--firstname,
.qomon-form .input--surname {
}
.qomon-form .input__label {
}
.qomon-form .input__desc {
}
.qomon-form .input__inner {
}
.qomon-form .input__inner__date-formatted {
}
.qomon-form .input__inner:focus {
}
.qomon-form .input__length {
}

.qomon-form .select {
}
.qomon-form .select__label {
}
.qomon-form .select__desc {
}
.qomon-form .select__inner {
}
.qomon-form .select__placeholder {
}
.qomon-form .select__arrow {
}
.qomon-form .select__option {
}

.qomon-form .radio {
}
.qomon-form .radio__legend {
}
.qomon-form .radio__input {
}
.qomon-form .radio__input__inner {
}
.qomon-form .radio__input__img {
}
.qomon-form .radio__input__label {
}

.qomon-form .address {
}
.qomon-form .address__row {
}
.qomon-form .address--postalcode {
}
.qomon-form .address--city {
}

.qomon-form .legal {
}
.qomon-form .legal__label {
}
.qomon-form .legal__input {
}
.qomon-form .legal__img {
}
.qomon-form .legal__text {
}

.qomon-form .sign-cta {
}
.qomon-form .sign-cta__container {
}
.qomon-form .sign-cta button {
}
.qomon-form .sign-cta button:hover {
}

.qomon-form .privacy {
}
.qomon-form .privacy__link {
}

// Confirmation page
.qomon-form .confirmation {
}
.qomon-form .confirmation__title {
}
.qomon-form .confirmation__body {
}

.qomon-form .social-btn {
}
.qomon-form .social-btn:not(.--color) {
}
.qomon-form .social-btn:not(.--full) {
}
.qomon-form .social-btn.--instagram {
}
.qomon-form .social-btn__inner {
}

Scss (blank structure)

.qomon-form {
.main-container {
}

// Form page
.form-container {
}

.fields-container {
}

.input {
&--firstname, &--surname {
}

&__label {
}
&__desc {
}
&__inner {
&__date-formatted {
}
&:focus {
}
}
&__length {
}
}

.select {
&__label {
}
&__desc {
}
&__inner {
}
&__placeholder {
}
&__arrow {
}
&__option {
}
}

.radio {
&__legend {
}
&__input {
&__inner {
}
&__img {
}
&__label {
}
}
}

.address {
&__row {
}

&--postalcode {
}
&--city {
}
}

.legal {
&__label {
}
&__input {
}
&__img {
}
&__text {
}
}

.sign-cta {
&__container {
}
button {
}
button:hover {
}
}

.privacy {
&__link {
}
}

// Confirmation page
.confirmation {
&__title {
}
&__body {
}
}
.social-btn {
&:not(.--color) {
}
&:not(.--full) {
}
&.--instagram {
}
&__inner {
}
}
}

Some examples:

Each tag in the form has a class that allows you to easily add styles to your CSS file.

For example, here is how you can change colors, increase field sizes, make them more square, and put the "First Name" and "Last Name" fields lined up but in 2 separate columns:

From the following code:

.qomon-form .main-container {
--signButtonBackground: rgb(149, 50, 157);
}

.qomon-form .input--firstname,
.qomon-form .input--surname {
width: 48%;
}
.qomon-form .input__inner {
border-radius: 3px;
height: 50px;
background-color: rgb(252, 247, 252);
}
.qomon-form .input__inner:focus {
border-color: rgb(149, 50, 157);
}

.qomon-form .sign-cta__container {
justify-content: start;
border: none;
padding: 0;
margin-top: 15px;
}
.qomon-form .sign-cta button {
margin: 0;
border-radius: 3px;
}


Are there limits to Qomon online form customizations?


The limits depend on your imagination and internal resources you have available to deploy your vision to your Qomon online forms.

For references and inspiration, check out some website examples from our clients:

Did this answer your question?