How to use input type="tel" in a contact form

Question

PHP newbie here trying to use a simple contact form. The fields I have are: "Name", "Email", "Phone", and "Message". I am trying to figure out what to do with the "Phone" field – I want it to output to the same place that "Message" does, so that when the email is received it will output both the message and the phone number to the body of the email. How do I do this?

    if( isset( $_POST['submit'] ) ) : 
        wp_mail( get_option( 'admin_email' ), 
        'Website Contact Form',
        ( isset($_POST['message'] ) ? $_POST['message'] : '(blank)' ), 
        'From: ' . ( isset( $_POST['from_name'] ) ? $_POST['from_name'] : 'Website Contact Form' ) . ' <' . ( isset( $_POST['from_email'] ) ? $_POST['from_email'] : get_option( 'admin_email' ) ). '>' . "\r\n" );
    $output = '<p>Thank you! Your message has been sent.</p>'; 
    else : 
        $output = '
<form action="" method="post"><ul>
    <li>
        <label for="from_name">Name</label>
        <input type="text" name="from_name" id="from_name" />
    </li>
    <li>
        <label for="from_email">Email</label>
        <input type="email" name="from_email" id="from_email" />
    </li>
    <li>
        <label for="from_tel">Phone</label>
        <input type="tel" name="from_tel" id="from_tel" />
    </li>
    <li>
        <textarea name="message" id="message"></textarea>
    </li>
    <li class="submit">
        <input name="submit" type="submit" value="Say Hello!" />
    </li>
</ul></form>';
    endif;
    return $output;

Teena Thomas · Answer 1 · 2012-09-17T21:36:38.380

0

there's nothing like type=tel, just use type=text and validate it for only numbers, after removing hyphens, braces etc. if any.

$_POST['tel'] = str_replace(array('-','(',')', ' ', '+'), '', $_POST['tel']);
if( is_numeric($_POST['tel']) === FALSE )
  echo 'Telephone # should consist of only numbers.';

edited Sep 17 '12 at 21:36

answered Sep 17 '12 at 21:30

Teena Thomas

5,139
1
13
17

2

HTML5 comes with [type=tel](http://www.w3schools.com/html/html5_form_input_types.asp). – Cesar Castro May 10 '13 at 11:49

score 0 · Answer 2 · answered Sep 18 '12 at 00:52

0

Or, use three input type=text

(____) ___ - _____

and merge them together with php.

answered Sep 18 '12 at 00:52

user1122069

1,767
1
24
52

score 0 · Answer 3 · edited May 23 '17 at 12:12

0

You can validate your phone number with this.

On the front-end, you can use a JavaScript mask to make your input field look sexy.

edited May 23 '17 at 12:12

Community

1
1

answered Sep 18 '12 at 02:33

donutdan4114

1,262
1
8
16

How to use input type="tel" in a contact form

3 Answers3