Show or hide elements when a specific element is clicked, like pop-up messages.
Note: Want to build the same example as we're about to? Clone this project and you'll have all elements to follow the steps exactly. If you don't, make sure to build a pop-up upfront.
For this example, we want to:
Save the email address that people subscribe within a local database
Show a pop-up message once people have subscribed
First, select the element that the web visitor has to click to show the pop-up message. In our example, this is the submit button that says Get invited. Click on this button and open the Settings tab on the right side. Then add an ID name ("get-invited-button") under Attributes.
In the editor, select the pop-up success message you created in the canvas. Select the parent element of the pop-up.
Open the Settings tab on the right. Under Attributes, give the element an ID name. We named ours ”success-message”.
Then open the Design tab. Under Layout, select the last type of display: Hidden. This will hide your pop-up message, so it doesn't show up.
Now we can start building the workflow. Navigate all the way to the left on your editor screen, and open the Workflows tab. Start a new workflow by clicking + Create workflow.
Add a new event and then choose Elements, followed by Clicked.
From the dropdown menu, select the name that you added for the subscribe button. Earlier, we named it "get-invited-button".
In our example, we want to save people's emails into a Ycode database once they click on the Get invited button. You're free to skip this step if you don't need it for your workflow.
To save the email, click on Click here to add an event and select Data, followed by Submit form. (navigate to Submit a form for more information on the submit form workflow).
Finally, complete this workflow with one last step.
Select Click here to add an event, go to Other, followed by Show element. This will make the pop-up appear.
Then in the dropdown menu, select the element ID name from the success message.
Name your workflow and create it by pressing the blue button. Awesome work!
Now, whenever a visitor adds their email to the form and clicks on the Get invited button, the pop-up will show up. Of course, you also want them to be able to close it. That's what we'll set up in the next workflow.
Head back to the editor and select the Close button. In the Settings tab, give the element an ID. We named ours "close-message".
Then head over to the Workflows tab and create a new workflow. Choose Elements, followed by Clicked.
From the dropdown menu, select "close-message" as the element ID name.
For the final event, create a new one and select Other, and then Hide element. From the dropdown menu, select the element ID name of the pop-up ("success-message").
As a final step, name your workflow and click Create workflow. Then head back to the editor, click Preview, and check whether the workflow is functioning correctly.