Pass an Input Field to a Paragraph Element

July 21, 2020

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 Paragraph element (formerly known as Text) – 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 Paragraph element’s job is to give a quick summary of the respondent’s selections.

The setup is really simple:

1. Add a Paragraph to your form

2. Click the Edit Text pencil 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.

Please note: Both curly braces, “{ }“, must be highlighted to format the field’s text. (e.g. bold, font color, alignment)

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

And here’s how Paragraph element 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!

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact JotForm Support: https://www.jotform.com/contact/

Send Comment:

JotForm Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: