Change the color of the * in required form field

[eSport_Event_GmbH]

Is it possible to change the color of the * at a required field?

[Max]

Welcome to the Community, @eSport_Event_GmbH

Sure! Here is the code that should be added to the Custom CSS field on the Appearance tab of your widget’s settings:

[class*="FieldContainer__FieldLayout-sc"]:has([aria-required="true"]) [class*="FormFieldLayout__Label-sc"] {
  position: relative;
  display: inline-block !important;
}

[class*="FieldContainer__FieldLayout-sc"]:has([aria-required="true"]) [class*="FormFieldLayout__Label-sc"]:after {
  content: '*';
  color: red;
  display: inline-block;
  position: relative;
  right: 0;
  transform: translateX(-100%) !important;
}

You can set any other color in the line with color:

[eSport_Event_GmbH]

And is it possible to hidden the *?

[Max]

Hi @eSport_Event_GmbH

Sure! Here is the code that should be added to the Custom JS field on the Settings tab of your widget’s settings:

const WIDGET_ID = '2083ddf4-1c9d-4448-a45e-7cf36b088884';

const waitForElement = (selector, root = document) =>
	new Promise((res) => {
		const observer = new MutationObserver(() => {
			const element = root.querySelector(selector);
			if (element) {
				res(element);
				observer.disconnect();
			}
		});

		observer.observe(root, { childList: true, subtree: true });
	});

waitForElement(`#eapps-form-builder-${WIDGET_ID}`).then((form) => {
	const labels = form.querySelectorAll(' [class*="FormFieldLayout__Label-sc"]');

	labels.forEach(
		(label) => (label.textContent = label.textContent.replace('*', ''))
	);
});

Check it out and let me know if it worked