The new “tel” HTML5 type was added to CF7 in version 3.4 (see – http://contactform7.com/text-fields/) and seems to have good cross-browser support (see – http://www.wufoo.com/html5/). You should be able to simply use this new CF7 tag.
Or you can also use this plugin to add jquery validation for your fields.
http://wordpress.org/plugins/jquery-validation-for-contact-form-7/
I inserted a new field through CF7 and it does appear in my form. My only problem is, that the field itself is totally different from all the other boxes. It is smaller and shorter, plus it has a different border. It does look like an “after thought” and unprofessional.
Any suggestion what did I do wrong? And how to correct it?
@grafixerstudio – This is due to CSS styling applied to standard HTML form elements within your current WordPress theme.
To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.
See Styling Contact Form for a general explanation of styling CF7 forms using CSS.
There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.
Buzztone, thank you so much. I do have some graphic design background, but from the old school, before Internet design came around. Hence I know what looks unprofessional or unacceptable, even though it might not be able to correct it.
I am using a premium theme (Clean Retina Pro) which recommended CF7 as a seamless integration. I am petrified to mess around with HTML or CSS coding. I feel so disappointed as I was promised an easy experience. This is nothing like that.
I will check out your suggestion nevertheless. Just as a backup suggestion, would there be another form out there which would work better? What other option(s) do I have?
RE: What other option(s) do I have?
I simple answer could be to use a [text] tag rather than a [phone] tag. The [phone] tag is based on the relatively new “phone” HTML5 type and it sounds that your theme does not provide a CSS style for this newer CF7 tag.
RE: I am petrified to mess around with HTML or CSS coding.
It isn’t that hard and if you’ve done any computer based graphic design you should find it quite logical. Unfortunately it is very difficult to produce high quality web designs without some understanding of HTML & CSS. As a result it’s well worth learning these basic web design skills.
