💻 Customizing Your Qomon Online Forms

You can fully customize your Qomon online forms to seamlessly match your brand's look and feel. Coordinate with your web development team to implement the desired styling.

Forms can be styled using a CSS file, just like any other element on your website. While a basic style is already applied (based on your Qomon configurations), you have complete flexibility to override these styles using the .qomon-form class.

🖋 Key details

Class Naming: Qomon forms use the BEM (Block Element Modifier) methodology, which simplifies CSS structuring and usage in Sass/SCSS.
Basic Styling: Initial styling is applied to ensure functionality and aesthetics out of the box.

🛠 Example: customizing your form's style

Below are two blank structure examples to inspire your customization:

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 {
		}
	}
}

🌟 Customization possibilities

Here’s what you can achieve:

Change Colors: Align button and field colors with your brand palette.
Adjust Layout: Create multi-column layouts for fields like "First Name" and "Last Name."
Style Fields: Customize field sizes, shapes, and borders for a unique look.

🚀 Limits to customization

Your customization is limited only by your imagination and the resources available to you! Work with your design team to bring your vision to life.

💡 Need help? Reach out to [email protected] for guidance.