PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Input Mask Uppercase?

Gravity Support Forums » Plugin Support » Gravity Forms

  1. Dancing Bay
    Member

    I have some single charater text field that I would like to force to be uppercase. These are fields for monogram letters. Is this possible using Input Mask - Custom? If not, how would I go about forcing the user to enter an uppercase letter?

    Additionally, on the 3 letter monogram, I would like to make the text box for the middle letter larger with larger font-size. This is a "would like" and not a "have to", so if it's too much trouble, I will probably just leave it. I'm thinking this would be done through css, right?

    The other thing I would like on this is to have the text boxes narrower, so that it's more obvious that only 1 letter is allowed.

    Thanks,
    Alisa

    Posted 11 years ago on Monday April 8, 2013 | Permalink

  2. Chris Hajer
    Key Master

    Please share a URL to the page on your site where the form is embedded. We can help you better with the CSS at that point.

    The input mask script does not differentiate between upper and lowercase letters. You can force the display of the user's input to uppercase by adding this to your theme's stylesheet:

    [css]
body .gform_wrapper input#input_1_2 {
    text-transform: uppercase.
}

    You will need to find the ID of your input and change input_1_2 to that, for the fields you want to display in uppercase.

    Posted 11 years ago on Wednesday April 10, 2013 | Permalink

  4. Chris Hajer
    Key Master

    Here is the actual CSS to add to your theme's stylesheet to make that happen:

    [css]
body .gform_wrapper input#input_1_10,
body .gform_wrapper input#input_1_12,
body .gform_wrapper input#input_1_13 {
    text-transform: uppercase;
    text-align: center;
}

body .gform_wrapper input#input_1_12 {
    font-size: 20px;
}

    Here is a screenshot: http://minus.com/let3s5rGQmI5d

    Posted 11 years ago on Thursday April 11, 2013 | Permalink

This topic has been resolved and has been closed to new replies.