Question 1

How to add more fields to my form?

Accepted Answer

To add more fields to your form, you need to add more columns to your Notion table. Do not forget to choose the right type for your new column.

Question 2

Creating a Contact Form with Notion

Accepted Answer

In this first video guide, we help you how to get started with NotionForms. What's included:

How to register to NotionForms and connect your Notion Workspace
Create your First Notion Table
Enable multi-lines support for text inputs
How to do some basic form customizations
How to enable email Notifications
How to embed your form within Notion

${youtube}Creating a contact form with Notion

Question 3

How to add a star rating input?

Accepted Answer

By default for Notion column of type "Number" NotionForms display a simple text input. If needed, you can also use a star rating input for the columns of type Number. Here's how to proceed:

Open the form editor
Open the settings for the "Number" input you want to transform into a star rating
In the Number category, enable the "Rating" option. Optionally you can choose the number of stars. By default, it's 5.

That's all you can save your form and see your new input rating.

Question 4

I cannot find my Notion database

Accepted Answer

Before you can use NotionForms with your Notion databases, you need to share your databases with our Notion integration. If you can't find your Notion database while creating a form, please try the following:

Go to your workspaces page in NotionForms: notionforms.io/settings/workspaces
Click "Connect a workspace", even if your workspace is already connected

Make sure to select the right workspace, and click "Select pages"

Search for your database in the search bar and make sure to select it. In this screenshot, we're sharing the database "Roadmap"

Click "Allow Access" and you're done. You should now be able to create a form for this database.

If you still can't find your table, please try the following:

Open your database in Notion
Click on the three little dots on the top right corner
Click on "+ Add connections"
Type "NotionForms"
Click on our integration, and on the Invite button

Share a database with our integration

Sometimes when you want to share a new database with NotionForms' integration, it does not show up.

Question 5

How to add some logic to my form?

Accepted Answer

|| Form logic is only available to users with a Pro or an Enterprise subscription.

Form logic can be used to build complex logical form. In NotionForms, each field has it's own logical behavior. There are 4 types of possible actions that can be triggerred:

Hide field
Show field (if it was previously hidden)
Make field required
Make field optional

For each field, you can define some conditions, and then the actions to execute when these conditions are true. Building conditions is very similar to building "filters" in Notion.

Here's how to apply some logic to a field:

Open the form editor
Open the settings for one of your fields (click on the blue cog)

In the opened modal, scroll down to find the logic section.

Define some conditions and some actions.
Save your form.

Feel free to reach out if you need any help with this feature!

Question 6

How to inject custom code in my form?

Accepted Answer

|| This feature is only available for Pro and Enterprise 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 go to the "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 change the page background color:

<style>
#app, nav.bg-white {
background-color: blue !important;
}
</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>

Frequently Read Articles

Browse All Categories