Use the customers name from the form in the success message

Hey everyone,

I was just messing around in the designer and thought it would be good if you could use the name that was entered in a form, to personalise the success message.

Here is the live demo:
https://myformtest.webflow.io/
(try it out with some fake data and meet my amusing pet :wink: )

I’m not sure if it’s been done on the forum already, but here’s a quick way you could do it with a small copy and paste of some JavaScript :smile:

Set up

This set up will allow you to copy and paste the code and not have to change anything. You can of course edit however you like.

  • Add a form element
  • Add an ID to the submit button called submitbutton
  • In the success area of the form, and a div and give it an ID of namehere. This is where the name from the form input will get displayed.
  • You can style this element in the text however you like.
    16%20pm

Adding the code

Copy this code, and add it to the page settings before the </body> section. You will need all of this including the <script> tags. I’ve used ES5 syntax for more support, although it works with ES6 in most browsers I believe.

<script>
var userName = document.getElementById('name')
var showName = document.getElementById('namehere')
var submit = document.getElementById('submitbutton')

window.onload = function() {
  submit.onclick = function() {
    showName.innerHTML = userName.value
  }
} 
</script>

This just takes the input value when the submit button is clicked, stores it, and adds it to the div with the namehere ID. You can style it all however you like.

I hope you enjoy meeting my pet! :joy:

7 Likes

Niceeee @magicmark

Thanks for sharing :webflow_heart:

2 Likes

Yeaaaa, great idea! Well done!

1 Like

Hey, what if i want to have both first name and last name to be shown in the success message?
Thanks

Hi, so you would need to add another element for the last name…

In the original script, you should be able to see the correlation between getting the username, and adding it to the Success message.

So for first and last names, you will need the value from each field, and show them in individual elements. In this case I made two variables firstName and lastName.

<script>
var firstName = document.getElementById('first-name')
var lastName = document.getElementById('last-name')
var showName = document.getElementById('namehere')
var submit = document.getElementById('submitbutton')

window.onload = function() {
  submit.onclick = function() {
    firstName.innerHTML = usersFirstName.value
    lastName.innerHTML = usersLastName.value
  }
} 
</script>

Hope that makes sense?

Thanks. It works! Haha. Do you mind I asked you another question? Do you know how to generate a permanent membership / counter number like how thefutur.com created after user registered?

Example:

Appreciate if you can help me out with this.

Thanks.

Hey @Chooi_Keng_Leong, glad that works.

As for the last question, this would be with more custom code, I would create a new thread in the custom code section asking the question so that others can see and help out.

My guess would be that each new member is added to a database, and they can then access that number via an API and render it when you log in. :man_shrugging:

Great. Thanks, wish someone can guide me with that.

1 Like

Works beautifully! Thanks Mark, really awesome!

Hi @magicmark mine doesn’t work, please can you hlp?

1 Like