Format Text Input Fields?

Questions
1

Is there a way to control how text is entered into input fields? Take for example an input field for first names. I would like the first letter of every entry to be capitalized. So if a user enters john (all lower case) it appears as John in the text input field.

Any suggestions?

2

I would recommend using a text element that uses the input fields value and formats it the way you are talking about. You can place that next to the input box.

1 Like
3

That’s a decent idea. Won’t look very nice and it won’t make for the best UI

4

Agreed.
Another idea would be to put a text element initially set to hidden that does the formatting you want and place it exactly on top of the input box. Then have a condition to show the text element and hide the input element when the user sets focus on the next text box or their next step so it will appear capitalized. I think the logic would also work for going back to change it.

So it wouldn’t change immediately as they type but would appear to change in the exact spot they typed as soon as the focus shifted on the page or they did another action on the page.

1 Like
5

But how do you format the text element?

6

Oh it’s pretty easy just do.

In the text box initial appearance select dynamic data then select the formatting you want.
Just like this… I set it to capitalize the first letter of whatever is typed in Input C box.

1 Like
7

Is it possible to change the vertical padding for a text input? I have a tall box so the user can type a message but when the user types the text stays in the center

8

Changing the style of the input box looks promising as it has many of those types of features.

Screen Shot 2016-11-10 at 3.33.31 PM.png768Ă—750 40.7 KB

1 Like
9

thank you, I didn’t know I had to use a multiline input :slight_smile:

2 Likes
10

To automatically capitalize upon entry while entering, there are two pieces:

  1. Use CSS to style the input box
    a) Add an ID name to the input field:

    image
    image776Ă—302 36 KB

    b) Then add some CSS to the page-level HTML
    image
    where the HTML text is:

    input#firstname { text-transform: capitalize !important; }

The important parts to note are:

  • input <= is the name of the control type

  • <== is the separator

  • firstname <== is the ID of the component you want this CSS command to apply to.
    This will cause the visible box to capitalize each word.
  1. Then, you need to ACTUALLY capitalize the value when you save it. inside your “Sign up the User” or “Make changes to a thing” workflow step, grab the Value from the Input element and append the function “:Capitalized Words”. That way it will save the data to the database the way you saw it. Otherwise, it will save what they typed, NOT what they saw (because the CSS from Step 1 above only really changes what they SEE, not what is captured in the control.
    image

Enjoy, Paul