How To Easily Build a Custom Form with Wix Code

In this quick example we will see how we can use Wix Code to create a custom form that saves into Database collection and do simple back-end validation.

1. Turn on Developer Tools

Go to the Wix Editor > Tools > tick Developer Tools.

2. Create Database collection

In the Site Structure sidebar > Database > click "+" button > New Collection. Name it "Question".
Since in this example the collection is only viewable by admin, select "Private Data" in the permissions drop-down.

In the Content Manager at the right of the header row, click "+" button to add 3 text fields to your collection. Name, Email and Question.

3. Backend Code

For security, will put the Database access code in a back-end web module which runs in server-side only.
In the Site Structure sidebar > Backend > click "+" button > New Web Module. Name it "Question.jsw". Then click the Gear icon next to module name > Set Permissions > Anyone.

Code starts by doing back-end validation on submitted Name, Email and question.
Then, query latest question with same email from database. And if one was found, will check it is not in the past 24 hrs as a simple check.
Then insert the new question.

Wix Code is JavaScript (plus Wix APIs), and the code editor comes with auto-completion, tips, syntax highlighting.. which makes it very easy to get you started.

import wixData from 'wix-data';

export function saveQuestion(name, email, question) {
    // backend validation
    if(!name || name.length ===0) {
        return "Name is required";
    }

    var emailRegex= /\S+@\S+\.\S+/;
    if(!emailRegex.test(email)) {
        return "Email is invalid";
    }

    // save emails in lowercase to check for existence
    email = email.toLowerCase();

    if(!question || question.length ===0) {
        return "Question is required";
    }

    // allow this backend function to be called without login
    let options = {
     "suppressAuth": true,
     "suppressHooks": true
    };

    // get any existing question from same email
    return wixData.query("Question").eq("email", email).descending('_createdDate').limit(1).find(options).then( results => {
        if(results.items.length>0) {
            // in the past 24hr ?
            let question = results.items[0];
            let now = new Date();
            // diff in hours
            let diff = (now - question._createdDate) / 1000 / 60/ 60;
            if(diff <24) return "you have already submitted a question in the past 24 hours";
        }

        // insert new question
        return wixData.insert("Question", {name: name, email: email, question: question}, options).then( results => {
            return "Question is submitted";
        })
        .catch( err => {
            return err.message || "Failed to submit question";
        });
    })
    .catch( err => {
        return err.message || "Failed to submit question";
    });
}

3. Custom Form

Now will create a new page and create simple form as in the following image.



Will also create a border-less read-only text area for displaying result message.
For each input :

• Right-click > View Properties : to set its ID that will use in the client-side code.
• Double-click : to set settings like Input type, required, placeholder text, length limit.

Create a button and right-click > View Properties then Hover over the onClick event, click the + sign, and press Enter. Now, the code panel expands and the click event handler is added to your code.

4. Front-end Code

Code starts by importing the back-end function to use in the front-end code
Then checks that form inputs are valid.
Then call the back-end function. Simple!

import {saveQuestion} from 'backend/Question';

export function send_click(event, $w) {
    // reset status message    
    let statusBox = $w('#statusBox');
    statusBox.text = '';

    let nameBox = $w('#nameBox');
    let emailBox = $w('#emailBox');
    let questionBox = $w('#questionBox');

    //check inputs are valid
    if(!nameBox.valid) {
     statusBox.value = 'Please enter name';
        return;
    }

    if(!emailBox.valid) {
     statusBox.value = 'Please enter valid email';
        return;
    }

    if(!questionBox.valid) {
     statusBox.value = 'Please enter question';
        return;
    }

    //call backend function
    saveQuestion(nameBox.value, emailBox.value, questionBox.value)
    .then( (msg) => {
    //show status message
        statusBox.value = msg;
    })
    .catch( (err) => {
        statusBox.value = err;
    });

}

For more information, go to Wix Code or API Reference

Tags: javascript , Wix Code