User Guide

Pass an Input Field to a Text Field

Last Update: September 16, 2017

If you stumble upon a scenario where you needed a visual confirmation of what your users filled out on your form before they submit it, there's a chance you might have used our Preview Before Submit widget.

But what if you needed something a little simpler, something that shows up right before the SUBMIT button so respondents can see a quick summary of their selections. Or perhaps you just wanted to greet them or create a personalized thank you note showing their name.

Meet the Text Field - It's a nifty powerful tool that allows you to render HTML content and inline CSS. Our guide will be focusing around this form https://www.jotform.com/70421937954967 where a respondent will be sending a simple order. The Text Field's job is to give a quick summary of the respondent's selections.

The setup is really simple:

1. Add a TEXT FIELD to your form.

2. Click the EDIT TEXT icon.

3. Position the text cursor to the section where you want the field to populate.

4. Click FORM FIELDS then click the field you wanted to add.

Now, in our demo form, the order summary looks like this when the form is filled out:

And here's how the Text Field was mapped:

Quick Summary of your Order:

Hey, {name}! You're about to order a {size} sized {shirtType} with your name printed at the {print}.

Looks good? click SUBMIT so we could process your order!

Easy, right? So, give it a spin and let your creativity do the work on how you would utilize this little trick!

1 Comment...

  • amsweb1

    What is this relying on from the client side to work?

    I had it working great in my form, then I tried to hack some code to only pull the state from the address field in, and now the values are not populating in the text at all for me, even in the demo form you referenced above.

    I tried it both in Chrome and Edge, and it doesn't work in either browser.

Send Comment