Placeholder | Setup

This tutorial shows you how to set up and use the On2Air Forms Placeholder widget in your JotForm.

Using Placeholder is optional.

Placeholder is used in tandem with the Simple Select dropdown field for cases when you need to utilize response data within your form itself. Because Simple Select provides results in JSON format, values can't easily be passed through to another field without additional formatting.

The Placeholder widget allows you to bypass this roadblock by plucking a specific field from that JSON, so you can utilize the plain text value in your submissions or as you build the rest of your form – including making calculations, manipulating text, and passing the value to another field.

🚩 Before using the Placeholder widget, make sure you've completed the Simple Select initial setup.

Contents

• Initial Setup
• Add Placeholder to Your Form
• Using Placeholder
• Examples

---

Initial setup

Requirements

• JotForm with an On2Air Forms Simple Select field already set up
• Have your On2Air Forms email from Openside handy. You’ll need the Placeholder Widget Link. (Crowded inbox? No worries. Contact us to resend.)

Add the widget to your JotForm account

1. Click on the On2Air Forms Placeholder widget link provided in the email from Openside. This will open up a JotForm widget settings page in a new window.
2. Remove the "Clone of" from the widget name.
   
   
   
3. Scroll down to the bottom of the page. Verify you're a human in the Re-Captcha section, and click Save.
   
   
   
4. The On2Air Forms widget is added to your Jotform account! You only have to do this for your account once. (You can verify what widgets you’ve added to your JotForm account by visiting the List of All Widgets page.

---

Add Placeholder to Your Form

Add the widget to your form

1. Choose the existing form you’d like to edit. Make sure this form already has an On2Air Forms Simple Select dropdown added and set up.
2. Click on Add Form Element + and choose Widgets. Drag and drop the On2Air Forms Placeholder widget onto your form.
3. Placement in your form is important. Arrange your Placeholder field so that is above your Simple Select field. The two fields should be on the same page of your form.

Update widget settings

1. Choose your Placeholder field and go to Widget Settings.
2. Add the Input ID, Field Name, and (optionally) Separator and Empty Value.
   
   

   Item *required input	Format	Where to Find It
   Input ID*	#input_X or X	The Input ID is a unique identifier auto-generated by JotForm for each field, and we'll use this to "link" the Placeholder to the Simple Select dropdown field already on your form. Choose your Simple Select field and go to ⚙️Properties > Advanced > scroll down to Field Details > toggle the v to expand the section > FIELD IDs. You can input the entire ID or just the ID number in the Placeholder widget settings.
   Field Name*	Text value	This is the value you'd like to extract from the Airtable record(s) chosen in the Simple Select field. It should exactly match a field name from your connected Airtable table. Here's the catch – we need to make sure that the Simple Select field on our form is already capturing this value in the Value Fields section of its widget settings. After inputting the Field Name in the Placeholder widget settings, go to the Simple Select widget settings, scroll down to Value Fields, and add the same field name here. Separate multiple fields with a comma.
   Separator	Any standard character	Only use this if you have enabled Multiple Selections in your Simple Select widget settings. Choose whatever character you'd like to use to separate values from multiple selections. (For example, a comma.)
   Empty Value	Text valu	Choose a value for the Placeholder to display if the Simple Select field is empty. (ex. this muppet) If you have indicated a Default Value in your Simple Select field settings, Empty Value does not apply. Placeholder will take the Field Name value of the default selection until the user chooses another option.

3. Scroll down to the bottom of the widget options and Update Widget.
4. Preview your form to test that the Placeholder is functioning as expected. Then scroll on down below for more info on using Placeholder fields in your form.

---

Using the Placeholder

Harness conditional logic

You can use the value in the Placeholder field with JotForm's powerful Conditional Logic capabilities, which use if...thenrules to dynamically control a myriad of form settings based on user input.

• JotForm's Guide on How to Use Conditional Logic to Make Your Forms "Smarter"

View additional Jotform documentation for how to do things like:

• Show or Hide a Field Based on the User's Response
• Pass a Value to Another Field
• Insert Text or a Calculation Using Conditional Logic
• Manipulate Text with Conditions and Calculations

We also have a couple other interesting examples within this article:

• Populate Question Labels Using Your Placeholder
• Use HTML to Show an Image from Airtable on Your Form

Add multiple Placeholder fields

You can add multiple Placeholder fields to your form for each plain text value you'd like to pass from your Simple Select field. Simply add a new Placeholder widget to your form, or duplicate an existing one, and update the Placeholder widget settings.

"Hide" Placeholder fields on your form

For most Placeholder use cases, you won't want the field to be visible on your form. Hiding it via the setting in the field Properties will break its functionality, so use this workaround instead to make Placeholder invisible on your form.

1. Select your Placeholder field and go to ⚙️Properties > General.
2. Under Label, choose Disable.
3. Make Height and Width both 0.
4. Preview your form. This will still leave a small bit of blank space on your form, so you may want to play with placement of the Placeholder field to make it unobtrusive. Remember it should still live above the linked Simple Select field.

If you are utilizing multiple Placeholder fields in your form, you can minimize the blank space overall by re-organizing and shrinking the fields to consolidate them onto one row.

1. Move all Placeholder fields together. Make sure they are above and on the same page as any Simple Select fields they reference. (The top of your form might be a good place to do this.)
2. For each field, "hide" them using the steps above.
3. For each field, go to ⚙️Properties > Advanced and toggle on Shrink.
4. Depending on your form settings, this should allow you to fit about nine Placeholder fields on one row.

---

Examples

Let's return to our Muppets form we're building and take a look at a couple case studies.

Populate question labels using your Placeholder

Sometimes you may want to use the Placeholder response to dynamically populate the label of a subsequent question. This can add a nice personal touch or help with question clarity on a long form.

Notice how the When was _______ born? question in the GIF below changes based on dropdown selections.





Here's how to use the Placeholder value in other question labels.

1. Set up a Placeholder field above your Simple Select dropdown. Go to Widget Settings and input the Input IDand Field Name.
2. Choose an Empty Value that makes sense in the context of the question you want to populate.
   I chose this muppet, so if no muppet is selected yet, the question will read, When was this muppet born?
3. Navigate to ⚙️Properties > Advanced. Scroll down to Field Details and expand the toggle to reveal UNIQUE NAME. If desired, rename this to something more memorable to you. Since this is the only Placeholder on my form right now, I'll choose {placeholder}. No spaces are allowed.
   
   
   
4. Edit the question label to insert the UNIQUE NAME value surrounded by brackets wherever you'd like the Placeholder to appear.
   
   
   
5. Preview your form and cycle through a few Simple Select values to confirm its functioning correctly. Then "hide" the Placeholder widget if desired.

Use HTML to show an image from Airtable on your form

See also: Using HTML in the Simple Select Display FieldDisplay Field

The Placeholder field supports HTML, so let's take advantage of it! Let's say whenever a muppet is selected, we'd like their photo (already stored in Airtable) to appear on our form.





We'll generate the image's HTML in Airtable and then use Placeholder to pull it into our form.

1. Go to your Airtable base. If you're storing your image in an Attachment field, you'll first need to extract the URL of the image. In the Muppets base, their headshot is stored in the {Photo} field. Add a new formula field called something like {Pic URL}, and use the following formula to extract the URL:
   
   

   IF(Photo,RIGHT(LEFT(Photo,LEN(Photo)-1),LEN(Photo)-FIND("https://d1",Photo)))

   
   
   
2. Create a new formula field named {Pic HTML} and wrap your {Pic URL} with HTML tags. Here's our new {Pic HTML}field:
   
   

   '<img src="' & {Pic URL} & '">'

   This basic formula simply specifies {Pic URL} as the source of the image to be displayed. If your images stored in Airtable are uniformly sized and suited to the size you want them to appear in your form, this may be sufficient.
   
   I pulled my muppet photos from Google Search, so sizes might be a bit varied. I also want them to be a reasonable size when they appear on my JotForm, so I added some style attributes. (This is also easy to add or tweak once you test your form, if you realize image sizing isn't what you want.)
   
   

   '<img src="' & {Pic URL} & '" alt="' & Name & '" style="display:block;width:100%;max-width:300px" />'
   

   
   
   
3. Return to your JotForm. In your Simple Select widget settings, add your new field name Pic HTML to the list of Value Fields.
   
   
   
4. Add a Placeholder field to your form.
5. In Widget Settings, fill in the Input ID to link your Simple Select field. Input Field Name as Pic HTML.
6. Optionally, add HTML to the Empty Value field to specify a photo that should be displayed before a muppet is selected. I chose the Muppets logo:
   
   

   <img src="https://i.pinimg.com/originals/7f/6b/ba/7f6bba75b2198967d2841bdf1c185f4c.png" style="display:block;width:100%;max-width:300px" />
   

7. View your form to test how things look. You may want to play around with the Placeholder Properties or {Pic HTML}formula in Airtable to get things to look as desired on your form. Here are the Properties I chose:
   
   
   

💥BONUS COMBO EXAMPLE! Get your image to appear below the Simple Select field.

Since the Placeholder works best when it is above the Simple Select field, simply moving below can cause things to get a little wonky. Specifically, if you want to utilize the Empty Value field, it won't function if the Placeholder is below the Simple Select.

Power users, never fear! You can still easily control where your image appears by combining a few methods we've covered above.

1. Add a new Text field to your form wherever you'd like the image to actually appear.
2. Use the process described in the example above to populate the Text field with the Placeholder value using its UNIQUE ID.
   
   
   
   
   
   
3. Test your form to make sure everything is working. If it all looks good, "hide" your Placeholder field.
4. Be proud of your mastery of On2Air Forms! 🎉