在WordPress中使用Code Snippets创建自定义联系表单

发表于 分类于 ，
详细介绍如何使用Code Snippets插件在WordPress中创建自定义联系表单，无需安装重型插件，支持Elementor简码插入和邮件发送功能

在WordPress中使用Code Snippets创建自定义联系表单（可通过简码插入Elementor页面）

在外贸独立站建设中，联系表单（Contact Form） 是获取客户询盘的关键入口。对于追求灵活和轻量化的网站开发者来说，不依赖繁重插件（如Contact Form 7、WPForms等），直接使用 Code Snippets + Shortcode 实现一个自定义表单，是一种更高效且可控的方案。本文将介绍如何在WordPress中实现这一功能，并在Elementor页面中轻松插入使用。

一、为什么选择Code Snippets实现表单？

相较于传统插件方式，使用Code Snippets的优势主要体现在以下几个方面：

  1. 更轻量化：无需额外加载大型插件资源，页面加载更快；
  2. 更高可控性：代码可自定义调整样式、字段及提交逻辑；
  3. 无侵入式设计：所有功能封装为简码（shortcode），可在任意位置调用；
  4. 兼容Elementor：直接使用“短代码”模块即可嵌入，样式统一方便管理。

二、通过Code Snippets添加自定义表单

进入WordPress后台，安装并启用 Code Snippets 插件，点击“Add New Snippet”，添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 注册自定义表单 shortcode
function custom_contact_form_shortcode() {
    ob_start();
    ?>
    <form method="post" action="" class="custom-contact-form">
        <p>
            <label for="ccf-name">Your Name <span style="color:red">*</span></label><br>
            <input type="text" id="ccf-name" name="ccf_name" required>
        </p>
        <p>
            <label for="ccf-email">Email Address <span style="color:red">*</span></label><br>
            <input type="email" id="ccf-email" name="ccf_email" required>
        </p>
        <p>
            <label for="ccf-phone">Phone Number <span style="color:red">*</span></label><br>
            <input type="tel" id="ccf-phone" name="ccf_phone" required>
        </p>
        <p>
            <label for="ccf-message">Your Message <span style="color:red">*</span></label><br>
            <textarea id="ccf-message" name="ccf_message" rows="4" required></textarea>
        </p>
        <p>
            <button type="submit" name="ccf_submit" style="background:#0073e6;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;">
                Submit
            </button>
        </p>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('custom_contact_form', 'custom_contact_form_shortcode');

这段代码会在网站中注册一个名为 [custom_contact_form] 的简码，用户可以通过此简码在任意页面插入表单。

三、添加表单提交逻辑（可发送邮件）

如果希望表单提交后自动发送邮件到管理员邮箱，可在同一个代码片段中添加以下部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 表单提交逻辑
function handle_custom_contact_form() {
    if (isset($_POST['ccf_submit'])) {
        $name    = sanitize_text_field($_POST['ccf_name']);
        $email   = sanitize_email($_POST['ccf_email']);
        $phone   = sanitize_text_field($_POST['ccf_phone']);
        $message = sanitize_textarea_field($_POST['ccf_message']);

        $to      = get_option('admin_email');
        $subject = "New Contact Form Submission";
        $body    = "Name: $name\nEmail: $email\nPhone: $phone\nMessage:\n$message";
        $headers = array('Content-Type: text/plain; charset=UTF-8');

        wp_mail($to, $subject, $body, $headers);

        echo '<p style="color:green;">感谢您的留言，我们会在24小时内回复您！</p>';
    }
}
add_action('wp_head', 'handle_custom_contact_form');

这段逻辑会在表单提交后执行邮件发送操作，同时在页面上输出一条确认提示。

四、在Elementor中插入简码

完成以上设置后，你可以在Elementor编辑页面中添加一个 短代码（Shortcode）小工具，在输入框中填写：

1
[custom_contact_form]

保存后，即可在页面上显示完整的联系表单效果。
无论是放在产品详情页、About页面还是独立的“Contact Us”页面，都非常方便。

五、表单样式优化建议

为了让表单更贴合网站整体风格，可以在网站的 自定义CSS 中添加一些样式：

1
2
3
4
5
6
7
8
9
10
11
12
.custom-contact-form input,
.custom-contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.custom-contact-form button:hover {
    background: #005bb5;
}

这些样式会让你的表单更美观，且在移动端也能保持良好的排版效果。

六、总结

通过以上步骤，我们实现了一个：

✅ 无需安装额外插件
✅ 可自定义字段与样式
✅ 可在Elementor中任意插入
✅ 支持邮件发送

的轻量级WordPress联系表单方案。

这种方式特别适合外贸独立站、品牌官网、Landing Page等需要快速部署但又注重加载速度和定制化的网站场景。