Masked Input Widget: how to add a sublabel?

Also - is there no way to have a sub-label on Masked Input fields?

Hi Marty,

I've checked it and, unfortunately, it's currently not possible to add a sublabel to the Masked Input widget. While the feature you’re looking for isn’t currently available, rest assured, we’re always working to add new services and features to Jotform. 

I've gone ahead and escalated your request to our Developer Team. When or if it's developed depends on their workload, how viable it is, and how many other users request it. If there are any updates, we’ll circle back to this thread and let you know.

Let us know if you need any other help.

Thank you, understood! As a work around, is there a CSS option to move the label to below the input?

From there I can CSS a smaller font to match the rest of the sub-labels in my field. Currently I'm 'hiding' all labels and just using sub-labels on my inputs to achieve this, but moving the label location would be a cleaner alternative. The defaults of course only allow me to do left, right (still left side), or top of input.

Hi Marty,

Unfortunately, in Smart PDF Forms, it’s not possible to move the label of the Masked Input widget using CSS. This is because widgets like the Masked Input are embedded inside iframes, which isolate their internal structure from the rest of the form. As a result, CSS applied in the Form Builder can’t affect elements within the widget, including repositioning the label. Also, Smart PDF Forms have more limited layout flexibility since they are mapped to a fixed PDF layout. 

Reach out again if you have any other questions.

Thanks, Shaira.

You mention on the Smart PDF Forms - how about when NOT in the smart PDF form and just a typical form? I'd have other uses cases and am not really using the smart PDF form function on most of my other forms.

Thank you

Hello Marty,

Adding a sub label for the Masked Input Widget is not possible even with the regular form builder. The CSS can help with adding the desired design like positioning and fonts, however, it is not designed to add more features on the widget itself.

Reach out again if you have any other questions.

I understand. Can you assist in telling me how to move the label to below the input field for a Masked input widget? Sorry if my last message was unclear.

Hi Marty,

You can easily position the Masked Input widget's label below its input field by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

/*thread 28515381 - masked input label reversed position*/

li#id_87 {

    display: flex;

    flex-direction: column-reverse;

}





[data-css-selector="id_87"] label.form-label {

    display: block;

    font-size: 0.75em;

    font-family: 'Lora', sans-serif;

    font-weight: normal;

    color: #343434;

}

/*ends here*/

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Check out the screencast below to see how it works now on a cloned form:

Just make sure to change the label to your custom text. You can do that by double-clicking the current label and then typing in the new one, just like in the screenshot below.

Give it a try and let us know how it goes.

Amazing - that worked! Thank you very much.

Hi Marty,

As for your other question, I've moved that to a new thread. You can check that out here.

Let us know if there’s anything else we can do for you.