Wix Studio: Show Button After Form Submission

Dynamically Controlling Button Visibility in Wix Studio After Form Submission

The Wix Studio platform offers extensive flexibility for developers to create dynamic and engaging user experiences. A common requirement is to control the visibility of elements, such as buttons, based on user interactions. This article addresses the question raised in the Wix Studio community forum regarding the best way to keep a button hidden until a third-party booking form is completed, and then display the button upon successful form submission. We will provide a detailed approach, including code examples, to achieve this functionality.

Understanding the Problem

The core challenge is to integrate a third-party form with the Wix Studio environment and trigger a visual change (showing a button) based on the form's completion status. This requires using Velo, Wix's built-in JavaScript environment, to interact with the form and the button element. The original forum post 'Hide and show button' highlights this specific need.

Solution Overview

The solution involves the following steps:

**Embed the Third-Party Form:** Integrate the form into your Wix Studio page using the HTML element or a suitable Wix App.
**Listen for Form Submission:** Implement a mechanism to detect when the third-party form has been successfully submitted. This might involve using the form provider's API or listening for a specific event.
**Show the Button:** Use Velo code to change the button's visibility from hidden to visible upon form submission.

Detailed Implementation Steps

Here's a step-by-step guide with code examples:

Add the Button and Set Initial State:

First, add the button element to your Wix Studio page using the Wix Studio editor. In the Properties panel, set the button's initial visibility to 'Hidden on Load'. This ensures the button remains hidden until the form is submitted.
Embed the Third-Party Form:

Embed the third-party form onto your page. The method for embedding depends on the form provider. Typically, you would use an HTML iframe. Add the HTML element to your page.
Implement Form Submission Detection:

This is the most complex part, as it depends on how the third-party form notifies you of submission. Some forms provide a JavaScript API that you can use to listen for a 'submit' event. Others might redirect to a 'success' page. If the form redirects, you will need to use a workaround. Here's an example using a hypothetical form API:
```
// Assuming the third-party form has a JavaScript API
import wixWindow from 'wix-window';

$w.onReady(function () {
  // Replace 'yourFormAPI' with the actual API and 'formId' with the form's ID
  yourFormAPI.on('submit', (event) => {
    // This code runs when the form is submitted
    $w("#yourButtonId").show(); // Replace "yourButtonId" with the actual ID of your button
  });
});
```
Explanation:
- `import wixWindow from 'wix-window';`: Imports the wix-window module, if needed.
- `$w.onReady(function () { ... });`: Ensures the code runs after the page has loaded.
- `yourFormAPI.on('submit', (event) => { ... });`: This line attaches a listener to the form's 'submit' event. Replace `yourFormAPI` with the appropriate reference to the third-party form's API.
- `$w("#yourButtonId").show();`: This line uses the `$w` selector to find the button element by its ID (`yourButtonId`) and then calls the `.show()` function to make it visible. Make sure to replace `yourButtonId` with the actual ID of your button element in the Wix Studio editor.
Alternative: Using an HTML Element and PostMessage (if the form is in an iframe):

If the form is embedded in an iframe and you can't directly access its API, you can use the `postMessage` API for cross-origin communication. This requires modifying the third-party form's code (if possible) to send a message to the parent window upon submission.

In the Third-Party Form (if you have access to modify its code):
```
// After successful form submission
window.parent.postMessage('formSubmitted', '*');
```
In your Wix Studio page:
```
import wixWindow from 'wix-window';

$w.onReady(function () {
  wixWindow.receiveMessage((event) => {
    if (event.data === 'formSubmitted') {
      $w("#yourButtonId").show();
    }
  });
});
```
Explanation:
- The third-party form sends a message 'formSubmitted' to its parent window (your Wix Studio page) after submission.
- The Wix Studio page listens for this message using `wixWindow.receiveMessage`.
- When the message is received, the code checks if the data is 'formSubmitted' and, if so, shows the button.

Important Considerations

Security: When using `postMessage`, always validate the `event.origin` to ensure the message is coming from the expected domain.
Error Handling: Implement error handling to gracefully handle cases where the form submission fails or the API is unavailable.
User Experience: Provide visual feedback to the user during the form submission process (e.g., a loading indicator) to improve the overall user experience.

Conclusion

Dynamically controlling button visibility based on third-party form submission in Wix Studio requires a combination of Velo code and understanding of the third-party form's API or communication mechanisms. By following the steps outlined above and adapting the code examples to your specific form and button elements, you can create a seamless and interactive user experience. The original forum discussion provided a starting point, and this article provides a more detailed and actionable solution.

Wix Studio: Dynamically Showing a Button After Form Submission - A Developer's Guide