💻 Customizing Your Qomon Forms & Petitions

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

They 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 and petitions 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 {
		}
	}
}

🧩 Custom code

Qomon allows you to add custom code directly to your online form or petition. This feature is particularly useful for adding tracking pixels (Google Analytics, Meta Pixel, etc.), custom styling, or other scripts.

How to add custom code:

Open your online form or petition in Qomon, and click edit.
Navigate to the Settings > Custom code section.
Choose where to insert the code:
- Header: Recommended for tracking codes (Google Analytics, Facebook Pixel, etc.).
- Footer: Use for scripts that should load after the page content.
Copy and paste your code into the appropriate block.
Click 'Update' to save your changes.

🌟 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.

How to share your petitions on Qomon

How to integrate a Qomon form to your website

How to create online forms on Qomon

How to add a Qomon Form to your website (WordPress)

How to add a Meta Pixel or Google Tag to my Petitions and Forms?