Customizing Form Styles, Validation, and CSS in Xperience by Kentico

2025/01/08 6:31 AM

Hi all,

I'm working on a form in Xperience by Kentico, and I have a few customization needs. I'd appreciate your guidance on the following:

  1. Is there a way to modify the form's style directly within Xperience by Kentico?
  2. How can I apply specific validation to a single field? Is there a way to inject custom JavaScript for this?
  3. If I want to apply CSS to the entire form or just a single field, how can I achieve this?
  4. Lastly, if I want to customize the appearance of validation messages, where and how can I modify their CSS?

Thanks in advance for any help!

Answers

2025/01/08 2:23 PM
Answer

Hi Rahul.

This answer is going to 'depend' on by "Form" you mean a form presented on the website (Form Widget), or an administration level form (one you see in the /admin area)


I'll try to answer for both.

For "Site" level forms:

  1. Kentico exposes an event to modify the HTML markup of the form, including HTML before and after. See Customize the Html Markup of rendered forms.
  2. Each Form Component type has its own 'rules' for validation, all share a "Required" validation, but if you want to have more, you may need to define a custom Form Component with properties that allow the rule to be configured and such. See documentation on creating a custom form component. In the FormComponent class that you inherit, you can override the Validate(ValidationContext) method to add your own validation logic. Likewise, when you create the rendering (.cshtml) you can apply whatever attributes or client side validation you wish.
  3. Site CSS is totally up to you, when the form renders, you can use whatever css styles you wish on it. If you need to apply a css class or attribute to hook onto with your style sheet, then use the Contextually modify form markup hook that Kentico provides to see what Form, and what components are being rendered and add any attributes or classes you wish to them (also any accessibility or attributes for validation, such as regex or min/max lengths)
  4. You can use the Customize the Html Markup of rendered forms to add HTML around the validation message, and from there you can use CSS to style however you wish.

For "Admin" level forms:

  1. You can create custom UI Form components (see Documentation on UI form components), this roughly involves creating your own React component and registering it, and within the react component itself you have the capability to easily set styles and inject CSS using normal javascript.
  2. You can also then define Validation Rules by implementing a ValidationRule class and registering it. Instructions are here on UI Form component validation rules.
  3. CSS can be specified using styling injected in #1
  4. You should be able to customize the validation message possibly also in this, i'm not 100% positive though.

Overall, I would highly recommend you go through the "Work with Forms" Guides and read documentation on the Forms themselves.

2025/01/24 5:23 AM

Trevor Fayas

Thanks for your detailed response. However, I'm still not quite able to get everything from the documentation, and I would like to explain my scenario more clearly.

I have created a Contact Us form using the Form Builder in Xperience by Kentico, and I have added the following fields to the form:

  • First Name
  • Last Name
  • Email
  • Phone No.
  • Company Name
  • Message
  • Send Button

Now, what I want to do is:

  1. Customize each field by adding custom HTML classes (to style them).
  2. Add validation for each of these fields.
  3. Apply my theme's CSS to the form fields to ensure they match the design of the rest of the site.

Here are my questions:

  • Can we access and customize form fields in our code (for example, adding custom HTML attributes and CSS classes)?
  • Can we create a custom view for this form, and if so, how do we store the form data when it's submitted to ensure it's processed correctly?

I would really appreciate any guidance or examples on how to achieve this.

Thanks again!

To answer this question, you have to login first.