Using custom buttons with the new Wix Forms on Wix Studio

[noahlovell]

Hey!

I’ve seen some discussions around the new Wix Forms available on Wix Studio and the need to style the “Back”, “Next” and “Submit” buttons to match other buttons on a site.

While the default form buttons don’t provide this functionality OOB (Out Of the Box), it can be achieved with code.

Here’s how to do it

Step 1

Create your form using the form composer, creating the different pages and fields you need.

It’s important to note, that you should not add the submit buttons in the composer. We’re going to leave them out and use our own buttons within the editor. It should look something like this:

Step 2

In the editor, we’re going to create our own “Back” and “Next” buttons, along with our own “Submit Message” which will either display a success message, or an error message when the form is submitted.

Step 3

Make these custom buttons part of a “Stack” with the form.

Step 4

We’re now going to enable code, and give each of our elements an element ID. I’ve chosen for each of the following:

Tip: edit the values above to update the code examples below

Step 5

Next, we’re going to copy and paste this function outside of the onReady of your page code.

You can update the success and error messages in this function to whatever works for you. They’re currently "Form submitted successfully", "There was an error, please try again".

Additionally, you can customize the length of time they appear on the screen before disappearing. They’re currently set at 5 seconds (5000 in the code)

function formButtons(backButton, nextButton, submitMsg, formID) {
    const totalSteps = formID.getStepCount();

    let finalStep = false

    backButton.hide()
    submitMsg.collapse()

    formID.onStepNumberChange((currentStepNumber) => {
        if (currentStepNumber === 1) {
            backButton.hide()
        } else {
            backButton.show()
        }

        if (currentStepNumber === totalSteps) {
            finalStep = true
            nextButton.label = "Submit"
        } else {
            finalStep = false
            nextButton.label = "Next"
        }

    });

    nextButton.onClick(async () => {
        if (finalStep === true) {
            try {
                const formValues = await formID.submit()
                console.log('Form is submitted with the following values', formValues);
            } catch (error) {
                console.log('Submission failed with an error:', error);
            }
        } else {
            const currentStepNumber = formID.getStepNumber();

            formID.navigateToStep(currentStepNumber + 1);
        }
    })

    backButton.onClick(() => {
        const currentStepNumber = formID.getStepNumber();

        formID.navigateToStep(currentStepNumber - 1);
    })

    formID.onSubmitSuccess(() => {
        submitMsg.text = "Form submitted successfully"
        submitMsg.expand()

        setTimeout(() => {
            submitMsg.collapse()
            formID.navigateToStep(1);
        }, 5000);
    });

    formID.onSubmitFailure((error) => {
        submitMsg.text = "There was an error, please try again"
        submitMsg.expand()

        setTimeout(() => {
            submitMsg.collapse()
        }, 5000);
    });
}

Step 6

Inside the onReady, we’re going to use the function we added in the previous step, and pass our own elements to the function. It should look something like this.

$w.onReady(function () {
    formButtons($w("#=Back="), $w("#=Next="), $w("#=Message="), $w("#=Form="))
});

The whole code should look something like this:

$w.onReady(function () {
    formButtons($w("#=Back="), $w("#=Next="), $w("#=Message="), $w("#=Form="))
});

function formButtons(backButton, nextButton, submitMsg, formID) {
    const totalSteps = formID.getStepCount();

    let finalStep = false

    backButton.hide()
    submitMsg.collapse()

    formID.onStepNumberChange((currentStepNumber) => {
        if (currentStepNumber === 1) {
            backButton.hide()
        } else {
            backButton.show()
        }

        if (currentStepNumber === totalSteps) {
            finalStep = true
            nextButton.label = "Submit"
        } else {
            finalStep = false
            nextButton.label = "Next"
        }

    });

    nextButton.onClick(async () => {
        if (finalStep === true) {
            try {
                const formValues = await formID.submit()
                console.log('Form is submitted with the following values', formValues);
            } catch (error) {
                console.log('Submission failed with an error:', error);
            }
        } else {
            const currentStepNumber = formID.getStepNumber();

            formID.navigateToStep(currentStepNumber + 1);
        }
    })

    backButton.onClick(() => {
        const currentStepNumber = formID.getStepNumber();

        formID.navigateToStep(currentStepNumber - 1);
    })

    formID.onSubmitSuccess(() => {
        submitMsg.text = "Form submitted successfully"
        submitMsg.expand()

        setTimeout(() => {
            submitMsg.collapse()
            formID.navigateToStep(1);
        }, 5000);
    });

    formID.onSubmitFailure((error) => {
        submitMsg.text = "There was an error, please try again"
        submitMsg.expand()

        setTimeout(() => {
            submitMsg.collapse()
        }, 5000);
    });
}

Step 7

You’re all done! Here’s what it looks like: