0

We are using Sitecore 10.2, and we have Sitecore form with custom Submit action 'Validate on submit' when this is valid I redirect the form to success page and when this validation fails we want to display the error message is red color above the form. How can I achieve this. I am able to display the error message. Not sure how to apply styling to it.

2 Answers 2

0

You need to write custom CSS to apply style as per your need and add it into your form. Follow the below process.

Sitecore Forms uses css and script files located in: <siteroot>/sitecore modules/Web/ExperienceForms.

To start using custom styles and scripts in your forms:

  1. In the Content Editor, go to sitecore/Forms, click the form that you want to add a script or style to and, in the Scripts or Styles field, add the name of your custom script or style file.

enter image description here

  1. Add your custom style or script file to one of the following folders:

    Scripts: <siteroot>/sitecore modules/Web/ExperienceForms/scripts

    Styles: <siteroot>/sitecore modules/Web/ExperienceForms/css

  2. Add the following methods in your layout to render the files:

    @Html.RenderFormStyles()

    @Html.RenderFormScripts()

  3. Add autocomplete lists for the Form designer to use with the CSS Class and CSS Class Label fields if required.

More details: https://doc.sitecore.com/xp/en/developers/102/sitecore-experience-manager/add-styles-and-scripts-to-sitecore-forms.html

Hope it helps!

0

You are trying to change the CSS of your custom submit action validation. However, these submit actions are the part of Submit button. So you need to play with the custom CSS class that you will apply on the form (either on the control or as a form wrapper). Here I am describing to change the CSS of a particular control (if needed) or the whole form. It depends on how you write CSS in your CSS class to change the look and feel of a particular one.

If you want to change the styling of a particular control then you can follow the below steps.

  1. In the Content Editor, go to /sitecore/System/Settings/Forms/Meta Data.
  2. Right-click the CSS Class Options folder and click Insert, Folder. Then, in the Message dialog box, enter Button, and click OK.
  3. Right-click the Button folder and click Insert, Insert From Template.
  4. In the Insert from Template dialog box, go to /System/Forms/Meta Data, click the CSS Class Option template and, in the Item Name Field enter the name of your item.
  5. Click Insert.
  6. Enter the value that will be.

Refer to this document for graphical representation

https://doc.sitecore.com/xp/en/developers/101/sitecore-experience-manager/walkthrough--creating-bootstrap-css-class-options-to-style-a-button-element.html

But if you want to apply it on the whole form then you can refer to the below document.

https://doc.sitecore.com/xp/en/developers/92/sitecore-experience-manager/add-styles-and-scripts-to-sitecore-forms.html

And it will allow you to add CSS to the whole form. Using the CSS class you will be able to target your validation message HTML and you can write your CSS and you can change the look and feel of the validation message.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.