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'
services:
root_db:
image: postgres
restart: always
volumes:
- db_data:/var/lib/postgresql/data
environment:
POSTGRES_PASSWORD: $up3rSecr3T
POSTGRES_USER: postgres
POSTGRES_DB: root_db
healthcheck:
test: pg_isready -U "$$POSTGRES_USER" -d "$$POSTGRES_DB"
interval: 10s
timeout: 2s
retries: 10
nocodb:
depends_on:
root_db:
condition: service_healthy
image: nocodb/nocodb:latest
ports:
- "8080:8080"
restart: always
volumes:
- nc_data:/usr/app/data
environment:
NC_DB: "pg://root_db:5432?u=postgres&p=$up3rSecr3T&d=root_db"
volumes:
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.
nocodbSign Up and Log In
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.
Get a Share Link to your NocoDB 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.
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!