如何在联系表单中使用 input type="tel"答案

【问题标题】：How to use input type="tel" in a contact form如何在联系表单中使用 input type="tel"
【发布时间】：2012-09-10 03:32:44
【问题描述】：

PHP 新手在这里尝试使用简单的联系表格。我拥有的字段是：“姓名”、“电子邮件”、“电话”和“消息”。我试图弄清楚如何处理“电话”字段 - 我希望它输出到与“消息”相同的位置，以便在收到电子邮件时将消息和电话号码都输出到电子邮件的正文。我该怎么做？

    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;

【问题讨论】：

标签： php html contact-form

【解决方案1】：

没有像 type=tel 这样的东西，只需使用 type=text 并仅对数字进行验证，如果有的话，在删除连字符、大括号等之后。

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

【讨论】：

HTML5 自带type=tel.

【解决方案2】：

或者，使用三个输入 type=text

(____) ___ - _____

并将它们与 php 合并在一起。

【讨论】：

【解决方案3】：

您可以使用this 验证您的电话号码。

在前端，您可以使用JavaScript mask 让您的输入字段看起来很性感。

【讨论】：