Contact Form 7 使用指南

Contact Form 7 是一个功能强大的 WordPress 插件，提供了简单、灵活的表单创建和管理功能。本指南将介绍如何自定义表单样式、保存表单数据、设置表单提交后的跳转，以及添加验证和防止机器人提交的方法。

1. 安装和激活 Contact Form 7

登录 WordPress 管理仪表盘。
导航到“插件” > “安装插件”。
在搜索框中输入“Contact Form 7”，点击“现在安装”。
安装完成后，点击“激活插件”。

2. 创建和管理表单

在 WordPress 仪表盘中，导航到“Contact” > “Add New”。
输入表单标题并使用编辑器添加表单字段。
复制生成的短代码，并将其粘贴到你希望显示表单的页面或文章中。

示例：

[text* your-name] [email* your-email] [textarea your-message] [submit "Send"]

3. 自定义表单样式

方法一：添加自定义CSS

在你的主题或子主题的 style.css 文件中添加以下自定义CSS：

/* 修改表单输入框样式 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

/* 修改提交按钮样式 */
.wpcf7 input[type="submit"] {
    background-color: #0073aa;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
    background-color: #005880;
}

在 WordPress 仪表盘中，导航到“外观” > “自定义” > “附加 CSS”，粘贴上述代码。

方法二：修改表单HTML

在 Contact Form 7 表单编辑器中，添加自定义类或ID:

[text* your-name class:my-custom-class id:my-custom-id]
[email* your-email class:my-custom-class id:my-custom-id]
[submit "Send" class:my-submit-button]

定制表单标记：

<div class="form-group">
<label for="your-name">Name:</label>
[text* your-name id:your-name class:form-control]
</div> 
<div class="form-group">
<label for="your-email">Email:</label>
[email* your-email id:your-email class:form-control]
</div> 
<div class="form-group">
<label for="your-message">Message:</label>
[textarea your-message id:your-message class:form-control]
</div> 
[submit "Send" class:btn class:btn-primary]

方法三：使用插件

安装并激活 Contact Form 7 Skins 或 CSS Hero 插件。
使用插件提供的预定义主题、模板或实时编辑器来美化你的表单。

4. 保存表单数据

方法一：使用插件

Flamingo：

在 WordPress 仪表盘中，导航到“插件” > “安装插件”，搜索“Flamingo”并激活。
之后，所有通过 Contact Form 7 提交的表单内容会自动保存。你可以在 WordPress 仪表盘的“Flamingo”菜单下查看。

Contact Form 7 Database Addon (CFDB7)：

同样，通过导航到“插件” > “安装插件”，搜索并激活“Contact Form 7 Database Addon – CFDB7”。
安装后，CFDB7 会自动将所有提交的数据保存到数据库中，可以在“CFDB7”菜单下查看。

方法二：自定义代码保存到数据库

创建数据库表：

CREATE TABLE wp_cf7_submissions (
    id INT(11) NOT NULL AUTO_INCREMENT,
    form_id INT(11) NOT NULL,
    data LONGTEXT NOT NULL,
    submitted_at DATETIME NOT NULL,
    PRIMARY KEY (id)
);

CREATE TABLE wp_cf7_submission_failures (
    id INT(11) NOT NULL AUTO_INCREMENT,
    form_id INT(11) NOT NULL,
    data LONGTEXT NOT NULL,
    submitted_at DATETIME NOT NULL,
    PRIMARY KEY (id)
);

添加自定义代码：

在主题的 functions.php 文件中添加以下代码：

add_action('wpcf7_mail_sent', 'save_cf7_submission');
add_action('wpcf7_mail_failed', 'log_cf7_submission_failure');

function save_cf7_submission($contact_form) {
    global $wpdb;

    $table_name = $wpdb->prefix . 'cf7_submissions';
    $form_id = $contact_form->id();
    $submission = WPCF7_Submission::get_instance();
    if ($submission) {
        $data = json_encode($submission->get_posted_data());
        $submitted_at = current_time('mysql');

        $wpdb->insert(
            $table_name,
            array(
                'form_id' => $form_id,
                'data' => $data,
                'submitted_at' => $submitted_at
            ),
            array(
                '%d', '%s', '%s'
            )
        );
    }
}

function log_cf7_submission_failure($contact_form) {
    global $wpdb;

    $table_name = $wpdb->prefix . 'cf7_submission_failures';
    $form_id = $contact_form->id();
    $submission = WPCF7_Submission::get_instance();
    if ($submission) {
        $data = json_encode($submission->get_posted_data());
        $submitted_at = current_time('mysql');

        $wpdb->insert(
            $table_name,
            array(
                'form_id' => $form_id,
                'data' => $data,
                'submitted_at' => $submitted_at
            ),
            array(
                '%d', '%s', '%s'
            )
        );
    }
}

在 WordPress 后台查看提交数据

添加以下代码在 WordPress 仪表盘中创建自定义页面来查看提交的数据：

add_action('admin_menu', 'cf7_submissions_menu');

function cf7_submissions_menu() {
    add_menu_page(
        'Contact Form Submissions',
        'CF7 Submissions',
        'manage_options',
        'cf7-submissions',
        'cf7_submissions_page',
        'dashicons-email-alt',
        6
    );
}

function cf7_submissions_page() {
    global $wpdb;

    $table_name = $wpdb->prefix . 'cf7_submissions';
    $results = $wpdb->get_results("SELECT * FROM $table_name");

    echo '<div class="wrap">';
    echo '<h2>Contact Form Submissions</h2>';
    echo '<table class="widefat fixed" cellspacing="0">';
    echo '<thead><tr><th>ID</th><th>Form ID</th><th>Data</th><th>Submitted At</th></tr></thead>';
    echo '<tfoot><tr><th>ID</th><th>Form ID</th><th>Data</th><th>Submitted At</th></tr></tfoot>';
    echo '<tbody>';
    foreach ($results as $row) {
        echo '<tr>';
        echo '<td>' . esc_html($row->id) . '</td>';
        echo '<td>' . esc_html($row->form_id) . '</td>';
        echo '<td>' . esc_html($row->data) . '</td>';
        echo '<td>' . esc_html($row->submitted_at) . '</td>';
        echo '</tr>';
    }
    echo '</tbody>';
    echo '</table>';
    echo '</div>';
}

add_action('admin_menu', 'cf7_submission_failures_menu');

function cf7_submission_failures_menu() {
    add_submenu_page(
        'cf7-submissions',
        'Failed Submissions',
        'Failed Submissions',
        'manage_options',
        'cf7-submission-failures',
        'cf7_submission_failures_page'
    );
}

function cf7_submission_failures_page() {
    global $wpdb;

    $table_name = $wpdb->prefix . 'cf7_submission_failures';
    $results = $wpdb->get_results("SELECT * FROM $table_name");

    echo '<div class="wrap">';
    echo '<h2>Failed Contact Form Submissions</h2>';
    echo '<table class="widefat fixed" cellspacing="0">';
    echo '<thead><tr><th>ID</th><th>Form ID</th><th>Data</th><th>Submitted At</th></tr></thead>';
    echo '<tfoot><tr><th>ID</th><th>Form ID</th><th>Data</th><th>Submitted At</th></tr></tfoot>';
    echo '<tbody>';
    foreach ($results as $row) {
        echo '<tr>';
        echo '<td>' . esc_html($row->id) . '</td>';
        echo '<td>' . esc_html($row->form_id) . '</td>';
        echo '<td>' . esc_html($row->data) . '</td>';
        echo '<td>' . esc_html($row->submitted_at) . '</td>';
        echo '</tr>';
    }
    echo '</tbody>';
    echo '</table>';
    echo '</div>';
}

查看自定义表单提交数据

到 WordPress 管理仪表盘中，你会在侧边菜单中看到一个新添加的菜单项，名称为“CF7 Submissions”。
点击“CF7 Submissions”即可查看提交的数据。点击子菜单“Failed Submissions”即可查看失败的提交数据。

5. 设置提交后的跳转

在 Contact Form 7 表单编辑器中找到“其他设置”标签。
添加以下代码以实现表单提交后的跳转：

on_sent_ok: "location = 'https://example.com/thank-you';"
on_submit: "if (event.detail.contactFormId == FORM_ID { window.alert('提交失败，请重试。') })"

将 https://example.com/thank-you 替换为你希望用户提交表单后跳转的页面 URL，并将 FORM_ID 替换为你的表单ID。

6. 添加验证和防止机器人提交

验证表单字段

在 Contact Form 7 表单编辑器中，为字段添加必填项或者特定格式的验证规则：

[text* your-name id:your-name class:form-control] <!-- 必填项 -->
[email* your-email id:your-email class:form-control] <!-- 必填项并验证电子邮件格式 -->
[tel* your-phone id:your-phone class:form-control use:tel-intl] <!-- 必填项并验证电话号码格式 -->
[url your-website id:your-website class:form-control] <!-- 验证URL格式 -->

防止机器人提交

Google reCAPTCHA：

前往 Google reCAPTCHA 网站并注册一个新的网站，以获取站点密钥和密钥。
在 WordPress 仪表盘中，导航到“Contact” > “Integrations”。
点击“reCAPTCHA”并输入你的站点密钥和密钥。
更新表单，在表单编辑器中添加 [recaptcha] 短代码以启用 Google reCAPTCHA 保护。

使用 Akismet 防止垃圾邮件：

确保已安装并激活 Akismet 插件。
在 Contact Form 7 表单编辑器中，添加以下隐含字段以启用 Akismet 垃圾邮件检查：

[hidden akismet:author your-name]
[hidden akismet:author_email your-email]
[hidden akismet:author_url your-website]

CAPTCHA：

使用 Contact Form 7 自带的 CAPTCHA 功能。
在表单编辑器中，添加以下代码：

[captchac captcha-1]

Cloudflare Turnstile：

前往 Cloudflare Turnstile 网站并登录你的账户。
在仪表板上，导航到“Turnstile”部分，注册一个新的网站以生成站点密钥和密钥。

配置 Turnstile 插件

在 WordPress 仪表盘中，导航到“插件” > “安装插件”。
搜索“Simple Cloudflare Turnstile”，点击“现在安装”并激活插件。
激活插件后，导航到“设置” > “Cloudflare Turnstile”并输入你的站点密钥和密钥，然后保存。

在表单中添加 Turnstile

打开你要编辑的 Contact Form 7 表单。
在表单编辑器中，添加以下代码在表单中启用 Turnstile 保护：

[turnstile]

保存表单。

7. 快速模板

这是一个包含常见字段、防机器人机制以及提交成功后的跳转和失败记录的 Contact Form 7 快速模板，供你快速修改和使用。

<div class="form-group">
    <label for="your-name">Name:</label>
[text* your-name id:your-name class:form-control]
</div> 
<div class="form-group">
 <label for="your-email">Email:</label>
[email* your-email id:your-email class:form-control]
</div> 
<div class="form-group">
 <label for="your-phone">Phone:</label>
[tel* your-phone id:your-phone class:form-control use:tel-intl]
</div> 
<div class="form-group">
 <label for="your-website">Website:</label>
[url your-website id:your-website class:form-control]
</div> 
<div class="form-group">
 <label for="your-message">Message:</label>
[textarea* your-message id:your-message class:form-control]
</div>
<div class="form-group">
[recaptcha]
<!-- 或者使用 CAPTCHA 或 Turnstile --> 
<!-- [captchac captcha-1] [captchar captcha-1] --> 
<!-- [turnstile] --> 
</div> 
<div class="form-group">
[submit "Send" class:btn class:btn-primary]
</div> 
<script> 
document.addEventListener('wpcf7mailsent', function(event) { location = 'https://example.com/thank-you'; }, false); 
document.addEventListener('wpcf7invalid', function(event) { alert('表单验证失败，请检查输入内容。'); }, false); 
document.addEventListener('wpcf7mailfailed', function(event) { alert('表单提交失败，请稍后再试。'); }, false); 
</script>

通过这些步骤，你可以确保你的 Contact Form 7 表单不仅看起来美观，还能通过多种机制（如验证、CAPTCHA、Akismet 和 Cloudflare Turnstile）防止垃圾邮件和机器人提交，并确保数据的安全性和完整性。现在你可以根据自己的需求从这个指南中选择适当的部分进行设置和调整。

目录

1. 安装和激活 Contact Form 7

2. 创建和管理表单

3. 自定义表单样式

方法一：添加自定义CSS

方法二：修改表单HTML

方法三：使用插件

4. 保存表单数据

方法一：使用插件

方法二：自定义代码保存到数据库

创建数据库表：

添加自定义代码：

在 WordPress 后台查看提交数据

查看自定义表单提交数据

5. 设置提交后的跳转

6. 添加验证和防止机器人提交

验证表单字段

防止机器人提交

配置 Turnstile 插件

在表单中添加 Turnstile

7. 快速模板

如何为您的网站选择最佳的SEO插件：全面指南

2021 在Ubuntu 20.04上部署LAMP环境并安装Wordpress

我用的Wordpress 速度优化方法

Wordpress如何实现强制登录并跳转到指定页面

在VPS上搭建WordPress网站并通过Redis Cache和Fastcgi Cache提速

Ubuntu18.04针对LNMP和Wordpress的优化【不断更新中】

发表回复取消回复

目录

1. 安装和激活 Contact Form 7

2. 创建和管理表单

3. 自定义表单样式

方法一：添加自定义CSS

方法二：修改表单HTML

方法三：使用插件

4. 保存表单数据

方法一：使用插件

方法二：自定义代码保存到数据库

创建数据库表：

添加自定义代码：

在 WordPress 后台查看提交数据

查看自定义表单提交数据

5. 设置提交后的跳转

6. 添加验证和防止机器人提交

验证表单字段

防止机器人提交

配置 Turnstile 插件

在表单中添加 Turnstile

7. 快速模板

类似文章

发表回复 取消回复

发表回复取消回复