Phone number field - 2 error boxes on submission

Gravity Support Forums » Plugin Support » Gravity Forms

ab24
Member

Hello :)

I have a basic form with a (required) telephone number field, however when it is submitted as blank, the field has 2 validation error boxes added underneath it, the first one is empty, and the second displays the correct message to the user.

If i change the phone number format to "(###) ### - ####" in the admin, the empty error message box now comes up with "Phone format: (###)###-####" - how can i disable this error message without making the phone number not required?

Many thanks,

Aaron

Posted 12 years ago on Monday June 27, 2011 | Permalink
Carl Hancock
Administrator

The phone number field wants the phone number in a specific format. If you don't care about the format, use a Single Input field instead of the Phone Number field and label it Phone Number. You can then set it as required and it will accept any input by the user.

Posted 12 years ago on Monday June 27, 2011 | Permalink
Tom Bevington
Member

Am having related problems in working with the Advanced Phone Number field.

I'd like to be able to have a mandatory advanced phone field:

1) whose size (i.e. width) is equal to the LARGE advanced name and email fields directly above it. This is a single-column form, and it's aesthetically jarring to have the Name and Email fields the same width followed by a phone field that's roughly half the width. See following link:

http://rtcwp.rtcriverside.webfactional.com/

2) that actually DISPLAYS to both the user AND in the captured entry fields the format:
(###) ### - ####. Notice the SPACE immediately following the 2nd parentheses. The built-in format eliminates this space and displays the number as (###)### - ####

If the built-in advanced phone field can't do this, how to I set the desired input format so that it's displayed both to the user after completing the field and in the entries display after being captured.

3) I would also like to center and size the Form's Title and Submit button - if possible WITHOUT having to do massive CSS push-ups. If each field has to be tweaked individually, could you provide me a link to an example of how to size and center such form field titles, form field text, etc?.

Thanks in advance

Posted 12 years ago on Wednesday July 20, 2011 | Permalink
Kevin Flahaut
Administrator
The phone number field is shorter because it has character limitations and doesn't need to have the same width as the others by default. I'm sorry to hear that you find it "aesthetically jarring". Its easy enough to change without "massive CSS pushups" as you called them. There are specific samples in the documentation to help you out.

http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

This should get you started for your sidebar form.
```
[css]

/* resize form input */
body #gform_wrapper_1 input#input_1_3 {
    width: 92%!important;
}

/* center form title */
body #gform_wrapper_1 .gform_heading .gform_title {
	text-align:center
}

/* center submit button in form footer */
body #gform_wrapper_1 .gform_footer {
	text-align:center
}
```
Posted 12 years ago on Wednesday July 20, 2011 | Permalink
Carl Hancock
Administrator

1) Currently the Phone Number doesn't have the Field Size selector. We will be adding that in the 1.6 release. Until then you would have to use CSS to resize the field. You can create a custom class in your themes stylesheet that sets the width and then apply that class in the Advanced settings for your Phone Number field by entering the class name you created.

2) The Phone Number field doesn't format the phone number as it is entered. So if you wanted to do this you'd have to do this using custom jQuery. Gravity Forms v1.6 will introduce Javascript input masks which will enable you to do this easily.

3) If you want to center the Title and Submit Button you would have to do this with CSS. You'd need a line of CSS for the Title and a line of CSS for the button to align them so they are centered. You would have to write this CSS. There is a page in documentation that provides samples of how to target and style every single form element that makes up a form. You can find it here:

http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

In the future please create a new support forum post when you have an issue rather than adding your issue to an existing old thread which while related to the field type in question, is an unrelated issue.

Posted 12 years ago on Wednesday July 20, 2011 | Permalink

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