Get form input to use in page

Design help Custom code
1

Hello everyone,

I would like to know if its possible yo use some input text that a user just submitted on a form for example to say: Thank you for completing this name we’ll get back to you at email.

Thank you very much.

2

Hi

Since Variables not implement in WF you need to use custom code for this purpose.

3

Thank you for your answer,

Do you have a “how to” on this or could you explain me a litlle how to do this?

Thank you very much.

4

Hi

Don’t have A specific link, take this as A good start point for using custom code within Webflow :slight_smile:

5

You could just write a little jquery to “catch” the value the user inputs and re-use it elsewhere.

In jQuery you can use .val() for this > For reference : .val() | jQuery API Documentation
And then writing down the value with .text() > For reference : .text() | jQuery API Documentation

This is pretty easy if everything happens on the same page. If you change pages you’d need to store the value in a cookie to pass it through…

I hope this helps

1 Like
6

Hi @ollo,
@Finsweet made a great tutorial for this.

You basically to change a few class names.

Here’s an example of your specific use case I did for a client.

<script src='https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js'></script>
<script>
// when the DOM is ready
$(document).ready(function() {
	// store a reference to the select field in the $interestSelectField variable
	const $surnameField = $('#prenom');
	// store a reference to the email form in the $emailForm variable
	const $emailForm = $('#wf-form-Formulaire-de-contact');
	// declare & initialize the customSuccessMessage variable 
	// with the value of the option selected 
	// on the interest select field
	let customSuccessMessage = $surnameField.val();

	// every time the option on the select field changes
	$surnameField.change(function(){
		// assign the new selected option's value to the customSuccessMessage variable
		customSuccessMessage = $(this).val();
	});

	// when the form's submit button is clicked 
	$emailForm.submit(function(e){
		// if the user selected an option on the select field
  	if(customSuccessMessage){
  		// save the customSuccessMessage's value in a cookie
  		Cookies.set('successTextCookie', customSuccessMessage);
  		// then we submit the form
  		return true;
  	}
  	else{	// else if no option was selected
  		// focus on the select field
  		$surnameField.focus();
    	// prevent form submission
    	return false;
  	}
	});
});
</script>

Mine is targeting the first name of the sender. The ID is “Prenom” (first name in French).

1 Like
7

Thank you very much @shokoaviv and @pepperclip.

@ColibriMedia I didn’t knew that youtube channel I’m gonna look it up, thanks also! I Think this is exactly what I was looking for.