Dynamically insert form data on a page

Design help Custom code
1

I have a question about doing something slightly custom with a form.

Let’s say I have a simple form with 3 field elements: Name, Email, and Comments.

A user submits the form with the following data:
Name = Luke
Email = luke@yahoo.com
Comments = How much does it cost?

When the user submits the form, I would like to display a message on the ‘success’ view, which dynamically inserts data from one of the field elements that was submitted in the form.

For example, I might want to display a message which says:

“Thanks for your enquiry “Luke”, we will email you back at “luke@yahoo.com” as soon as possible.”

Is there any possible way to achieve this? Using the input data which was submitted on the form, somewhere on the page?

My intended use case is actually a little different, but if it can work for this simple example, then I can make it work for what i need.

What I am actually trying to achieve is to dynamically insert the users email address in to a javascript conversion tracking script which gets displayed using an “embed widget” on the “success message” of the form. The tracking script requires in question requires capturing a unique identifier for the person who submitted the form. This effectively allows me to do lead conversion tracking.

Thanks for any input or suggestions.

1 Like
2

Great question @lukewd! I just found this article which may be helpful in achieving that effect: javascript - Display HTML form values in same page after submit using Ajax - Stack Overflow

Seems like that would do the trick but I haven’t had a chance to test it yet.

3

Thanks for that Waldo, really helpful. However all of the solutions mentioned there would require modifying the code of the form itself. For example, adding the onclick event on to the submit button:

<input type="submit" onclick="showInput();"><br/>

Is this possible with webflow? I didn’t think I had access to the code of the form?

4

Paid users have access to the page custom code fields as well as embed code components.

You can bind events on forms like this ajax - jQuery's .on() method combined with the submit event - Stack Overflow

5

Many thanks. Can you point me to any Webflow documentation so I can read about the specific feature you mentioned?

(Apologies, I’m a not actually a developer but can wrestle my way through basic code).

Many thanks

6

Here you go. Try to use the search in the help center too…

Custom code in head and body tags - Webflow University Documentation

7

Thanks Sam. I did search the help centre already too :slight_smile: Sorry, I thought you were referring to something else more specific thats all.

Thanks for the suggestions guys. I’m afraid I still don’t get it to be honest. I’m comfortable with placing custom code either in the page itself (header or body), or as a embed code component (inline somewhere), but I can’t work out from those stackoverflow links you shared what the code should be in order to achieve the desired outcome. Any more specific guidance would be greatly appreciated.