Is it possible for the phone field to auto format when user enters a number?

Gravity Support Forums » Plugin Support » Gravity Forms

risingrevenue
Member

I'm using the phone advanced field with a value of "phone" set (this is my label basically). As of right now when the user enters a number in the field incorrectly it then tells them the format (###)###-#### which is inconvenient for the user. I could just set the value to (###)###-#### but I think it would be more user friendly if it just simply auto formatted the number as they type the numbers in (or after they leave the field). Is this possible? Thanks.

Posted 12 years ago on Thursday August 16, 2012 | Permalink
Rob Harrell
Member

You can use input masks with the single line text field.

See this page:
http://www.gravityhelp.com/documentation/page/Single_Line_Text

Input Masks

Posted 12 years ago on Thursday August 16, 2012 | Permalink
risingrevenue
Member

So far it works great! thank you. One more question, is there anyway I can have the fields initial value say "phone" then have that value disappear when someone clicks into the field?

Posted 12 years ago on Thursday August 16, 2012 | Permalink
Rob Harrell
Member

Right on, glad to help.

You can, I'm not sure how well that will play with the input mask, but it could be worth a shot. I've implemented this for a client that worked great, its semantic and has good fall-back support and validation stays intact.

There is also a variant way to do this here: http://www.gravityhelp.com/clearing-default-form-field-values-with-jquery/

Posted 12 years ago on Thursday August 16, 2012 | Permalink
risingrevenue
Member

Can't thank you enough for your help Rob. I went with the jlabel option and it works very well, I like the effect. It works almost perfect with the phone field except for one minor issue. When I click into the phone field the auto formatting displays like it should and the label "phone" fades away, however, when I click out of the field the label doesn't reappear. It's a pretty minor issue that I can live with, but if there is a solution it would awesome. Thanks.

Posted 12 years ago on Friday August 17, 2012 | Permalink
Chris Hajer
Key Master

@risingrevenue, can you post a link to the form where you have this in use? Thank you.

Posted 12 years ago on Saturday August 18, 2012 | Permalink
risingrevenue
Member

No problem, if you go to http://fbcreditlaw.com/ the form is on the home page at the top.

Posted 12 years ago on Monday August 20, 2012 | Permalink
bamajr
Member

I too, am using the "Phone" field from the "Advanced Fields" and need to continue using it, as it has a direct correlation to the the UI in an iPhone environment. However, the provided "Phone Format" options are not adequate and are a very bad idea, from a UX (User Experience) standpoint. Correcting a user's input, after the fact, is a terrible, terrible idea, if it can be avoided ahead of time.

I need the telephone number stored in the format:
'(999) 999-9999'
notice the space after the area-code parenthesis?

I also want to show the user the format as they are typing.

The format works correctly in the "Single Line Text" field and it shows the user the format as they are populating the field. However, as I eluded to earlier, I need the form's html to include:

'type="tel" '

for use on iPhones. I'm pretty sure masking is allowed on the "tel" input type and I know it defaults to "text" in browsers that don't yet support the "tel" input type.

How can I accomplish this with Gravity Forms?

Posted 12 years ago on Saturday October 6, 2012 | Permalink
Chris Hajer
Key Master

I've asked the developers for their feedback on your comments. Expect to hear something back in the beginning of the week. Our support is closed for the weekend, and for the Columbus Day holiday on Monday as well. Thank you.

Posted 12 years ago on Saturday October 6, 2012 | Permalink
bamajr
Member

So, at this time, there is no way current option/filter, to apply input masks to the "tel" input type or to over-ride the "Single Line Text" form field, to be the "tel" input type?

Posted 12 years ago on Saturday October 6, 2012 | Permalink
Chris Hajer
Key Master

Not that I am familiar with.

Posted 12 years ago on Saturday October 6, 2012 | Permalink
bamajr
Member

Ok, then I guess wee need to see what the developers say. I bought Gravity Forms b/c I've read a lot of positives about it. I think it is great how the Gravity Forms UI is so easy to use, but it seems like something like this, is pretty basic, especially with the implementation of the new HTML5 input types. I do this all the time, when I create my own form elements, so I don't see why I shouldn't be able to do it in Gravity Forms. It seems pretty basic to me.

Posted 12 years ago on Saturday October 6, 2012 | Permalink
Dana Cobb
Administrator
Hi, bamajr,

You can use the gform_field_input filter (http://www.gravityhelp.com/documentation/page/Gform_field_input) to change the input type of your single line text field to "tel". Your input mask will still apply to the field as long as you use the same name and id when creating the input field in your filter. You can view your html source to get the proper naming convention. See the example below:
```
add_filter("gform_field_input", "change_input_type", 10, 5);
function change_input_type($input, $field, $value, $lead_id, $form_id) {
    //if it is form id 8 and field id 2 change the input type to tel
    if($form_id == 8 && $field['id'] == 2)
    {
	//put id and name for input field into variables for creating the <input> tag
    	$input_id = "input_" . $form_id . "_" . $field['id'];
    	$input_name = "input_" . $field['id'];
		//use the variables for input tag id and name in string, include div wrapper so field is formatted
		$input = '<div class="ginput_container"><input id="' . $input_id . '" class="medium" type="tel" tabindex="2" value="" name="' .$input_name . '"></div>';
	}
    return $input;
}
```
There is also another filter which allows you to change the field's label along with the input tag called gform_field_content (http://www.gravityhelp.com/documentation/page/Gform_field_content). You would use this tag very similarly to the example provided but you need to also include the label tags for the field.

Take a look; this should get you what you need.
Posted 12 years ago on Monday October 8, 2012 | Permalink
bamajr
Member
@Dana Cobb

Ok, so I think I have this working...
1. I put this "add_filter" in my theme's function.php file.
2. On line 7 (from the code above), I fill in the Form ID and Field ID from my form.
3. I updated line 10 (from the code above) to reflect the desired output - specifically the type="tel"
4. Then save the function.php file and refresh the displayed website.
Input type="tel" is now reflected correctly and displays the correct numerical keypad in iOS.

Just for my own information...
1. Do you happen to know how long those two recommended filters have existed for Gravity Forms?
2. What does the "10, 5" indicate in line 1 of the filter you provided?
This seems to take care of the input type="tel" issue, so now, how do I handle the input mask, so that it reflects the same way as the input mask on the "Single Line Text" field?
Posted 12 years ago on Tuesday October 9, 2012 | Permalink
bamajr
Member

@Dana Cobb

I appreciate your help and your timely responses. This is an adequate solution for many situations, I'm sure and I'm pretty sure it will work fine for me, after I figure a couple things out.

FYI: This work around causes problems, if ANY conditional logic is used on the same field.

Posted 12 years ago on Friday October 12, 2012 | Permalink