Multiple Success Message

Display a unique success message based on the logic branch that the user went through, for a more personalised end screen experience.

Additional code/setup

Add these scripts before the </body> tag

<!-- Call Code Select Script-->
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@latest/countrycode.js"> </script>

Add a select input

Add a 'select' element, add 1 choice with the placeholder text and set the value as empty.

You add powerups to this select element.

Setup

Success Message Cards

Add your custom success messages inside the Webflow Success Message element.

On Success Message Cards

Add this attribute to each of your custom success messages and give the value a unique name.

Custom <div> attributes
data-success-card
=
{card-name}

On Submit Buttons

Add this attribute to the Submit Button so that, on click, it shows the correct Success Message div.

Ensure that the {card-name} value is exactly the same as the one you set for the Success Message Card.

Custom <div> attributes
data-success
=
{card-name}
03

Multiple Success Message Cloneable

Depending on the path chosen by the user, they will see a different success message that you can fully customise.

Join our awesome Slack community with over 300+ Webflow users!

Seek support, vote on new features, stay updated and network with other community members.

Join Slack community