How to Clean Up the "Mark as Complete" Feature in Webflow

Welcome to the final lesson of this course on Webflow. In this lesson, we'll be focusing on cleaning up the "Mark as Complete" button for a better user experience. Currently, the interaction with the button is a little jarring, and when clicked, it triggers the whole "thank you for your form submission" message. We'll address this issue and enhance the functionality by adding some custom code to update member stack profiles with metadata based on the completion status of a video. This will allow us to hide or display the "Mark as Complete" form based on a user's interaction. While the core functionality doesn't require this custom code, it significantly improves the user experience.

Let’s start by styling the success state of the "Mark as Complete" form to match the button, creating a more seamless transition. We'll also add a text label styled as a button to show that a video has been completed and to hide the form altogether. We want to present the button if the video has been completed by the user and hide the form entirely.

To achieve this, we need to incorporate some custom code. Don't worry; the necessary code will be available in the notes below. However, you'll need to make slight adjustments to the code provided to ensure it works for your specific site.

First, navigate to the 'Lessons Template' or 'Episode Template' where the "Mark as Complete" form resides. Style the "completed" button to match the button's design by adjusting padding, background color, and font color. Additionally, wrap the form in a div block and change the form's state to "Mark as Watched" and "Completed" to ensure a smoother interaction.

Next, we'll add an additional text block styled as the "Completed" button. The styling will enable us to hide or show the form as needed. Once the modifications are applied, let’s move on to adding the necessary custom code.

Firstly, add an ID of "mark-as-watched" to the form block. Then, assign the ID of "video-complete" to the completed button. This step is crucial in preparing the elements for manipulation using custom code.

Now, let’s incorporate the custom code. In the Webflow template settings, add the provided custom code before the body tag. Before copying and pasting the code, ensure the "data-member-stack-ID" is set to your specific ID. You can find your Memberstack ID in the Memberstack settings, where you can access the installation code. Similarly, the "constant item ID" needs to be updated with the video item ID from the CMS using "episode item ID".

The added code performs several operations by:

• Checking if the user is logged in
• Verifying if they have video metadata
• Adding metadata if it doesn't exist
• Hiding the form and displaying the video completion label if the metadata exists after checking the item ID

Now that the form and custom code have been set, we need to finalize by modifying the "Completed" text block to hide by default but still hold the "video complete" ID.

After completing these steps, publish the changes and test their functionality.

Upon testing, the form submission should trigger the custom code to update member stack profiles with appropriate metadata, indicating video completion. The metadata should be added seamlessly, and the "Mark as Complete" form should hide, displaying the "Completed" label instead.

In conclusion, we have successfully improved the user experience by enhancing the "Mark as Complete" feature using Webflow and custom code. This not only provides a smoother interaction for users but also adds a valuable feature to your membership site.

By incorporating these principles into your build, you can elevate various types of not only membership sites but also different no-code application builds. This course has equipped you with the knowledge to enhance user experiences through effective functionality.

We hope you've enjoyed this course and learned valuable insights. You can find more resources and updates on our website: Kinsley Child's Website or connect with us on Twitter at @MackenzieChild. We look forward to helping you with your future projects. Have a wonderful day, and we'll see you soon!