Create a Simple Contact Form with NocoDB and Discord Notifications

Create a Simple Contact Form with NocoDB and Discord Notifications

Create a basic contact form using NocoDB. Get notifications with Discord when a new entry is made. Here's how to do it.

Ghost blogging software is incredible and completely customizable. However, when it comes to contact forms, you're on your own. There are a couple plugins and 3rd party contact form websites you can use, but I am all about open source and self hosting! So let's check out NocoDB and build a contact form!

What is NocoDB?

NocoDB is an open source #NoCode platform that turns any database into a smart spreadsheet.

We can create a table then attach a form to it to make entries into that table. It may seem complicated but really, it's pretty simple.

Install NocoDB with Docker Compose

version: '2.1'

    image: postgres
    restart: always
      - db_data:/var/lib/postgresql/data
      POSTGRES_PASSWORD: $up3rSecr3T
      POSTGRES_USER: postgres
      POSTGRES_DB: root_db
      test: pg_isready -U "$$POSTGRES_USER" -d "$$POSTGRES_DB"
      interval: 10s
      timeout: 2s
      retries: 10
        condition: service_healthy
    image: nocodb/nocodb:latest
      - "8080:8080"
    restart: always
      - nc_data:/usr/app/data
      NC_DB: "pg://root_db:5432?u=postgres&p=$up3rSecr3T&d=root_db"
  db_data: {}
  nc_data: {}

I use Portainer to deploy stacks. It makes it super easy. Just change the volume location and ports if you have to. Be sure to change the password of the database to something much more secure too. Just don't forget to change it also in the environment variable string at the bottom of the stack to match.

You can find more Docker Compose examples on the NocoDB Github repo here.

GitHub - nocodb/nocodb: 🔥 🔥 🔥 Open Source Airtable Alternative - turns any MySQL, Postgres, SQLite into a spreadsheet with REST APIs.
🔥 🔥 🔥 Open Source Airtable Alternative - turns any MySQL, Postgres, SQLite into a spreadsheet with REST APIs. - GitHub - nocodb/nocodb: 🔥 🔥 🔥 Open Source Airtable Alternative - turns any MySQL, Pos...

Sign Up and Log In

Iwill assume you already know how to setup a domain behind a reverse proxy. This is a good time to go ahead and setup your domain for NocoDB so you can send traffic to your contact form later.

Once the install is complete you will begin by creating your account. Enter the email and password you want to use as the admin or "Super User" for NocoDB then log in.

Create a New Project on NocoDB

We will create a new project and select the "Create" option from the drop-down menu. After that, enter a project name such as "Contact Form" then press the create button.

This will bring you into NocoDB dashboard under your new project. From here, in the upper right corner, hover over the profile icon to get to the themes settings. We are going to immediately change this to the dark theme! Click on the bat icon to set dark mode. Unfortunately the theme will not stay in dark mode for people viewing your form. Or I just haven't figured that out yet.

Create a Table in NocoDB

Create a new table in NocoDB by clicking the plus icon next to Tables on the left side pane. Give it a name and click submit. I called mine "Contact Table".

Add Columns to the Table

The table needs to be setup with columns that will correspond with the form. Each column is a form field entry. You will understand this later. It will automatically create one column and one row. I deleted the row by right clicking on it. I will rename the column that was created automatically to "Name" then add another column called E-Mail with the column type "Email" and finally one more called "Inquiry" with the column type "LongText". After this is complete, the form is done and your work will automatically be saved.

Attach a Form to the NocoDB Table

This is the part where we create the form that will allow us to enter data into the table we just created. On the right side you will see where it says "Form". Click it and create a new form.

I renamed mine to "Contact Form" to easier distinguish which is which.

Edit the Contact Form

Under "Views" on the right side, click the form you just created. Here we will drag and drop the fields onto the form. These fields are all part of the table we created. Now you know why we had to make each column with the appropriate field names. Makes sense right?

When you are finished dragging the fields onto the form, click submit to save and close the form.

Getting the public link to the form is a little tricky. It took me a while to find where to get the link and they moved it after the last update too. But you have me to tell you how.

Click the form to open it like we did when we added the fields to it. You should see the "Share View" button at the top of the pane. This will give you the unique link to the form that you can place on websites and other places online.

Notice: You can password protect the form. If you are using this for public access, do not enable this option.

Test out the NocoDB Form

Open the shared link and fill out the form. Once finished, submit the form then go back to the table in NocoDB. The data should all be there. You've successfully setup your first form in NocoDB!

Get Discord Alerts from NocoDB Form Entries

Finally, we can setup Discord notifications to let us know when the form has a new entry. What good is a contact form if it doesn't notify the person it's sent to?

Open Discord on your desktop and right click on the channel you want the notifications to be sent to. Select Server Settings then Integrations. Create a new Webhook and copy the link.

In NocoDB click App Store then find the Discord app. Hover over the app and click "Edit".

Add the channel name then paste the Discord Webhook URL into the box. The test wont work so don't try it. Click save. We are not done yet!