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

<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