How does the custom HTML in a form work?

Describe the problem/error/question

I have added a custom label “- or -” to a form and I am now trying to move it to a more sensible position:

I have changed the HTML to:

<div style="margin-bottom: 20px; text-align: center;">- or -</div>

but that gets transformed into:

image

I have also tried these:

<center>- or - &br;&br;&br;</center>
<center>- or -


</center>

but all of them break in some unique way. The & in &br; gets escaped, but the < in <center> doesn’t. The newlines are ignored.

Please share your workflow

Information on your n8n setup

  • n8n version: 2.9.4
  • Running n8n via: Docker
  • Operating system: Ubuntu
2 Likes

n8n sanitizes all HTML in form fields for security so style attributes get stripped entirely, and <center> isn’t in the allowed tags list either which is why both approaches break. You can use <br> tags for vertical spacing (not &br;, that’s not valid HTML) but there’s no real way to center text with the current sanitization rules. This has come up a few times on the forum, might be worth opening a feature request on GitHub to get style or at least text-align added to the allowed attributes.

Ok, so this worked: :person_shrugging:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- or -
<br>
<br>
<br>
1 Like

Hi @AndreKR Welcome to the community!
Let me give you a better approach, i understand working with forms is very easy and make things seamless, but consider the beauty of this small flow:

Beautiful right? So this is what webhooks get you when used correctly and consider using webhooks only as they will give you more control over CSS ofc, but they are pretty much safe and highly scalable in every setup, as if you create a form and embed that in your website that form will get triggered every time someone loads that website and will eat requests, but with this the flow would only get executed when someone actually requests it or you can customize this the way i did for my portfolio, consider using Webhooks over Form.

For building custom forms, I highly recommend instead using a Code Node + Respond to Webhook setup.

  1. The Code Node wraps HTML in a config HTML =
  2. The Webhook node uses {{ $json.html }} as the response body and the content type is set to text/html

This allows for dynamic rendering and easier configurations.