Buy Now
Sign in

Uppercase in form fields

gabi , September 14 2017
Answered
gabi
Link to my form

How can I change to use both upper and lower cases in the form field input?

calculus00
Hello gabi,
I'm not a Chrono professional, but after checking your new post, I think that the following links may help:
How to post information from a Chronoform to ZoHo
What are the 'Easy Form' and 'Form' Wizards?
How can I add a mask to format a form input?
How can I automatically copy fields from one part of my form to another?
P.S: I'm just an automated service
I'm an automated service, my answers may help, but they may not be accurate.
Gatsman
Hello Gabi
This is a CSS rule in your template's bootstrap.css file.
This is the file you need to change or create an override rule in your custom.css file.
**YOUR DOMAIN**/templates/yoo_avanti/styles/urban/css/bootstrap.css

It's in line: 7392
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
text-transform: uppercase;}
gabi
Hmm. Thought of something like that but I am not an expert in coding CSS.

I now did like this but its not working. I guess I did it wrong somehow.
In my custom CSS file I put this:

.uneditable-input {
/* Reset */
box-shadow: none;
/* Overrides */
height: 22px;
line-height: 22px;
color: #696862;
position: relative;
border-radius: 0;
font-family: 'Oswald', Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: inherit;
letter-spacing: 2px;
}

I simply removed the line:
text-transform: uppercase;

Can you tell me what I did wrong?
Gatsman
Hello Gabi
Removing the rule will not deactivate it, it will still be loaded from the first position.
You have to override the rule in your case you should add:
text-transform: none;


* you also do not have to write all the other css rules just the one you want to change.
gabi
Just changed the code in custom CSS to this, but also not working

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
  box-shadow: none;
  height: 22px;
  line-height: 22px;
  color: #696862;
  position: relative;
  border-radius: 0;
  font-family: 'Oswald', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: inherit;
  letter-spacing: 2px;
}
gabi
Ahh nice. Got it.

In my custom CSS I changed the line to:
text-transform: none !important;

Thank you so much for your help

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
  box-shadow: none;
  height: 22px;
  line-height: 22px;
  color: #696862;
  position: relative;
  border-radius: 0;
  font-family: 'Oswald', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: inherit;
  text-transform: none !important;
  letter-spacing: 2px;
}
Gatsman
What you need to add to the custom.css is the following

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
text-transform: none;
}


If it still does not work try it with !important but check all other fields in your site that they work like you want them to work.

text-transform: none!important;
gabi
Thanks again.
As you can see above, this was the last try I did, and it worked.

I put all the rules in my Custom CSS, then I better remember and know what it means
amheng5
is there a way to make only specific form fields within a form force uppercase format in results form sent as email? For example my first, last name fields. I only want Last name to always be upper case whether the user enters lowercase name. Thanks​
Gatsman
Hello amheng5,
You can make any input field accept only uppercase characters.
Add a class to any input that you want it to have only uppercase. Lets call the class uppercase_fields
Add the following css to your css file:
input.uppercase_fields{ ​
​ text-transform: uppercase;​
​}
Now that field will accept only uppercase characters and therefore send the results in uppercase.​
amheng5
Ok, so here's my code for email message and TCPDF code​
<td class="uppercase_fields" align="left" valign="top" width="70%">{data:last_name}</td>
I entered in my css file:
input.uppercase_fields{ text-transform: uppercase;}​
but results don't make last name Uppercase. Please let me know where I need to correct the code. Thanks​
Gatsman
In the Designer tab 1 click Edit 2 of the field that you want to set as uppercase, click Advanced 3 and add your class there in the Container class 4 (see image).
add_class.jpg
Also change your css to the following​

​.uppercase_fields input{ ​
​ text-transform: uppercase;​
​}​
Attachments
add_class.jpg
add_class.jpg
(71.66 KiB)
238 Downloads/Views
add_class.jpg
add_class.jpg
(212.48 KiB)
341 Downloads/Views
amheng5
Ok success, I got the field to convert to Upper case upon entry of last name. I also want to have the appearance of the label to be the same as the other fields, but I can't figure this out either.​
Capture.PNG
and I ended up embedding code inside email section for the email message results to appear uppercase for last name.​
Capture2.PNG
but I also have TCPDF that I want the Last name to be transform to upper case too. However, it does not transform. I tried to embed the font code inside the TCPDF edit screen, but no luck. Can this be possible to force uppercase format in TCPDF files I send as attachments in email?
And finally I want to save the Last Name field in uppercase format in the database. But can't seem to get this done. I've tried entering in Extra attribute field but no luck.​
Thanks​
Attachments
Capture2.PNG
Capture2.PNG
(31.58 KiB)
364 Downloads/Views
Capture.PNG
Capture.PNG
(22.65 KiB)
372 Downloads/Views
Gatsman
Hello amheng5,
On the "label to be the same as the other fields" issue i would guess that all the other fields are required and that one is not, so try that.
Did you do it the way i told you or in some other way?
Setting the field input provided by the user as uppercase should work for all cases Email, PDF and Database without the need of the "embedding code inside email section".
When the user writes his last name in uppercase it will be kept and handled that way.
Do you have a link of the form?​
amheng5
yes I did your suggestion, but the results were that the email message did not reflect uppercase last name nor did the TCPDF file did not reflect the uppercase last name which is my ultimate goal. Showing the uppercase as the last name is filled in on the form is fine but not the end result which is the appearance in the confirmation email to user or the TCPDF file.
here link....using basic contact form
https://meet-international.org/basic-contact-form.html
GreyHead
Hi amheng5,
I think that you need to use the PHP strtoupper() function in a Custom Code action before the Email and TCPDF actions to format the submitted value.
Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
amheng5
No luck...uppercase not showing in either my TCPDF or email message​
Here's my custom code (not experienced in PHP )​
Capture.PNG
Please advise where my error is.​
​Thanks
Attachments
Capture.PNG
Capture.PNG
(14.13 KiB)
408 Downloads/Views
GreyHead
Hi amheng5,
Please see page 34 of the manual for the code to use with PHP. It will be something like this:
$temp = $this->data('last_name', '');​
​$temp = strtoupper($temp);​
​$this->data('last_name', $temp, true);
Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
Gatsman
Thanks Bob i also had trouble with the correct syntax.​