💻 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; 
}
 .qomon-form .button-container {
    justify-content: flex-start !important;
  }

  .qomon-form .button-container 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!