CSS for FormBuilder

[minh-tranchi]

I'm having trouble sending email with the HTML getting from the FormViewer


Knowing that Gmail will auto remove class in HTML so the CSS that was compiled to the class will not work in the Gmail. In the image, there are flex and font size difference because I use inline style for it.

Is there anyway to get the Style from the FormBuilder or from the compiled class?

[optimajet]

Currently, all styles are compiled into a CSS class and this class is added to the component's className (https://formengine.io/documentation/component-styling#styling-a-simple-component) property. FormEngine uses the cx (emotion) function to compile styles into a CSS class. There is no easy way to get these styles.

Seems like a mode to compile styles to the inline styles of the component would be useful for such cases?

[optimajet]

@minh-tranchi Currently, there are no such methods available. We are investigating possible solutions for this case. Could you please describe in more detail how you embed FormEngine into an email? Maybe you have an example of an email?

[minh-tranchi]

e no such methods available. We are investigating possible solutions for this case. Could you please describe in more detail how you embed FormEngine into an email? Maybe you have an example of an email?

Currently, I'm using useRef to get HTML from the FormViewer and embed it to the email

This is the HTML format that I get from the FormViewer using inline style

[optimajet]

Is it correct that you don't use JavaScript in the form (i.e. you don't use the FormViewer itself in the email)? Do you basically need to be able to get HTML with inline styles?

[minh-tranchi]

Yes, I don't use JS in the form. I really need to get the HTML with inline style so that the user can receiver a better email format.

[optimajet]

Yes, I don't use JS in the form. I really need to get the HTML with inline style so that the user can receiver a better email format.

We added the task of applying styles directly to the component to our backlog. But this task is not a priority at the moment.

[minh-tranchi]

Is there any way to disable dark mode and always show light mode? I hide the header for implementation so I want to set it to light mode by default @optimajet

[optimajet]

Is there any way to disable dark mode and always show light mode? I hide the header for implementation so I want to set it to light mode by default

The easiest way to do this is to store the theme (light) in localStorage:

[sergeythrees]

Hi there, we have update:
https://formengine.io/documentation/theme-manipulation