How to automate Wix form records into Notion database?

Prerequisites

1. Wix Account: You need a Wix site with a form.

2. Notion Account: You need a Notion workspace and a database where the form data will be stored.

3. Notion API Key: Generate an integration token from Notion to allow Wix to communicate with your Notion database.

4. Basic Knowledge of JavaScript: Velo uses JavaScript for coding.

Step 1: Set Up Your Notion Database

1. Create a Database:
• In your Notion workspace, create a new database with columns (properties) that match the fields in your Wix form (e.g., Name, Email, Message, etc.).
• For example:
• Name: Title or Text property
• Email: Email property
• Message: Text property

2. Get Your Database ID:
• Open the database in Notion and copy the database ID from the URL. The ID is the part after the workspace name and slash, e.g., https://www.notion.so/yourworkspace/a1b2c3d4e5f6g7h8i9j0.
• Here a1b2c3d4e5f6g7h8i9j0 is the Notion database ID.

3. Create a Notion Integration:
• Go to Notion Integrations and create a new integration.
• Publish your Integration as Internal Integration.
• Copy the Internal Integration Token (API key) for later use.

4. Share the Database with Your Integration:
• Open your Notion database, click Share, and invite your integration by entering its name.

Step 2: Set Up Your Wix Form

1. Add a Form to Your Wix Site:
• Use the Wix Editor to add a form to your site. Ensure the form has fields like Name, Email, and Message.

2. Enable Velo Dev Mode:
• In the Wix Editor, click on the Dev Mode toggle to enable Velo.

Step 3: Write Velo Code to Send Data to Notion

1. Access the Form Submission Event:
• In Velo, go to the Code Panel and locate the form on your page. Use the form’s onSubmit event to trigger your code.

2. Add the Code:
• Replace the placeholder values (e.g., NOTION_API_KEY, NOTION_DATABASE_API) with your actual Notion API key and database ID.

import wixFetch from 'wix-fetch';

// Notion API details
const NOTION_API_KEY = 'secret_your_notion_api_key';
const DATABASE_ID = 'your_database_id';

// Function to send data to Notion
export function form_onSubmit(event) {
    const formData = event.data; // Get form data

    // Prepare the data for Notion
    const notionData = {
        parent: { database_id: DATABASE_ID },
        properties: {
            "Name": {
                "title": [
                    {
                        "text": {
                            "content": formData.name // Map Wix form field to Notion property
                        }
                    }
                ]
            },
            "Email": {
                "email": formData.email // Map Wix form field to Notion property
            },
            "Message": {
                "rich_text": [
                    {
                        "text": {
                            "content": formData.message // Map Wix form field to Notion property
                        }
                    }
                ]
            }
        }
    };

    // Send data to Notion using the Notion API
    wixFetch.fetch("https://api.notion.com/v1/pages", {
        method: "POST",
        headers: {
            "Authorization": `Bearer ${NOTION_API_KEY}`,
            "Content-Type": "application/json",
            "Notion-Version": "2022-06-28" // Use the latest Notion API version
        },
        body: JSON.stringify(notionData)
    })
    .then(response => response.json())
    .then(data => {
        console.log("Data sent to Notion:", data);
    })
    .catch(error => {
        console.error("Error sending data to Notion:", error);
    });
}

Step 4: Test the Integration

1. Submit the Form:
• Go to your Wix site and submit the form with test data.

2. Check Notion Database:
• Open your Notion database and verify that the form submission has been added as a new entry.

Step 5: Publish Your Site

1. Once everything is working correctly, publish your Wix site to make the automation live.

Troubleshooting Tips

• Check API Key and Database ID: Ensure the Notion API key and database ID are correct.

• Permissions: Make sure your Notion integration has access to the database.

• Console Logs: Use console.log() to debug any issues in the Velo code.

Conclusion

Subscribe to our Newsletter to Get informative content on Notion and Productivity.