Contact Form 7
Phone number field? (7 posts)

  1. reneeparisi1
    Posted 3 years ago #

    Hi, I am trying to add a phone field into my contact form.
    I saw a post on here that talks about going into theme functions...is that the only way?
    I'm worried about messing up my theme.
    Thank you,


  2. buzztone
    Posted 3 years ago #

    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.

  3. Dinesh Karki
    Posted 3 years ago #

    Or you can also use this plugin to add jquery validation for your fields.


  4. GrafixerStudio
    Posted 2 years ago #

    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?

  5. buzztone
    Posted 2 years ago #

    @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.

  6. GrafixerStudio
    Posted 2 years ago #

    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?

  7. buzztone
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic