How do I add custom code to my form?
This feature is only available for Pro and Team plan subscribers.
One of customization feature is the injection of custom code within your forms. There's no limit on what you can do with your own CSS and your own scripts. Add an analytics script or even a live chat on your form page.
Note that code changes and preview can only be previewed on the public page of your form. Changes done in the form editor won't be shown.
To add custom code, in the form editor click on "Settings" from the top of the page then click on "Custom Code" section, and use the code input to put your code. It will be injected of the <head> section of the page.
Here's a first example you can use to center your logo on a form page:
Here’s another example to increase the size of the text input field.
Here’s another example to change the page background color:
Another example to put on the same line the input and the submit button:
Here's another more advanced code sample that can be used to customize the appearance of the form, by applying new CSS rules:
Please check this article for more details.
How to add CSS and JavaScript in a Notion Form?
One of customization feature is the injection of custom code within your forms. There's no limit on what you can do with your own CSS and your own scripts. Add an analytics script or even a live chat on your form page.
Note that code changes and preview can only be previewed on the public page of your form. Changes done in the form editor won't be shown.
To add custom code, in the form editor click on "Settings" from the top of the page then click on "Custom Code" section, and use the code input to put your code. It will be injected of the <head> section of the page.
Here's a first example you can use to center your logo on a form page:
<style>
img.w-20.h-20.absolute.left-5.top-5 {
left: 50% !important;
transform: translateX(-50%);
}
</style>Here’s another example to increase the size of the text input field.
<style>
textarea{
height:120px;
}
</style>Here’s another example to change the page background color:
<style>
#app, nav.bg-white {
background-color: blue !important;
}
</style>Another example to put on the same line the input and the submit button:
<style>
@media only screen and (min-width : 640px) {
form {
display: flex;
}
.flex.flex-wrap.justify-center.w-full {
width: auto !important;
display: block !important;
width: 170px !important;
}
}
.flex.flex-wrap.justify-center.w-full {
margin-top: 17px;
}
button[type="submit"] {
min-width: 154px;
}
</style>Here's another more advanced code sample that can be used to customize the appearance of the form, by applying new CSS rules:
<style>
body h1, body p, body input, body label {
font-family: Lato, sans-serif !important;
}
label.font-bold {
font-weight: 500! important;
}
.rounded-lg {
border-radius: 4px !important;
}
.relative.mb-3 {
margin-top: 30px;
}
.shadow-sm {
box-shadow: none !important;
}
.border {
border-color: #b8bdc9 !important;
}
</style>Please check this article for more details.
How to add CSS and JavaScript in a Notion Form?
Updated on: 08/10/2024
Thank you!