Custom Online Form Phone Field Styling

Jason D asked on July 22, 2016 02:00

I have a default Zurb-Foundation (6) instance in our project, but when I create an online form with phone field (which adds the three input fields for validation as phone, etc.), it puts each span and input field on their own line. I could probably do a bunch of intercepting and change that behavior with jquery and css, but is am I missing something? I'm sure Foundation is probably causing this because it doesn't know that it's a group meant for one line, but the phone input is all in a concealed control and it looks like I can only intercept/inject css to change it's styling.

Example:
(
[===========================]
)
-
[===========================]
-
[===========================]

Instead of:
{[====])-[====]-[=========]

Recent Answers

Trevor Fayas answered on July 22, 2016 03:13 (last edited on July 22, 2016 03:14)

Default phone styling is a bit of a pain, what i ended up doing is just using CSS to style that section. It looks fine if you have Kentico's core css class, but i would rather add a small rule and be done than try to resolve any styling breaking by introducing Kentico's core style.

Otherwise you can set the form field to a textbox instead, if you add the condition "Is USA phone number" in the validation it still catches things well.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on July 22, 2016 07:27

Can't agree with Trevor more. Toss the phone number control out the door and just use a textbox with a phone number validation on it.

0 votesVote for this answer Mark as a Correct answer

Jason D answered on July 25, 2016 21:16

Thanks guys. I'll look into using a text field versus phone field.

0 votesVote for this answer Mark as a Correct answer

Chetan Sharma answered on July 27, 2016 17:40

You may also use input field with pattern attribute of HTML5 to do validation for any phone number.

You may look for their regex here

Cheers, Chetan

0 votesVote for this answer Mark as a Correct answer