Instantly Display Submitted Form Content

1234567891011121314151617181920

Hey Peter, that’s super easy, but there’s some missing context.
I’ll assume the form is not actually posting anywhere?
The rest here assumes that;

Webflow doesn’t make it easy to use input fields outside of a form, so you have two options on your setup.

  1. Use an html embed and just create an <input> element manually
  2. Use the form and forms designer, but suppress the form post, since you don’t need it

You may be able to accomplish #2 by setting the action to something meaningless like #, or you might have to script-suppress it. Something like;

<script>
$("form").submit(function(e) {
  e.preventDefault();
  return false;
});
</script>

This script would be placed in your page’s /body custom code area.

To display the value of the input field;

  • Give your input an ID, e.g. text-input
  • Give your button or submit button an ID, e.g. submit-btn
  • Drop a text element or title on your page, and ID it e.g. text-entered

Script also in page /body

<script>
$("#submit-btn").click(function() {
  $("#text-entered").text(
    $("text-input").val()
  );
});
</script>

Code above is typed from memory and not tested, so debug accordingly.

Got it, since we’re triggering off of the button click itself, should work fine, even though at that moment the success message panel is hidden from view.

Make sure you’re setting them as ID’s and not class names.
IDs are at the top of the second settings tab on your element.

image

Excellent, please mark the solution on this one so it’s closed out.

You must be using a multiline text area?

First try changing this line;

$("#text-entered").text(

to;

$("#text-entered").html(

And see if that changes anything.

If not, still do that, and then you’d need to find or write some script to transform plain text with line breaks to HTML so that line breaks appear in your result.

You MAY be able to accomplish that with;

<script>
$("#submit-btn").click(function() {
  $("#text-entered").html(
    $("text-input").val().replace('\n','<br>')
  );
});
</script>

Again, winging it here. This is totally untested script.