l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在WordPress中显示浮动联系表单（3种方法）

如何在WordPress中显示浮动联系表单（3种方法）

Bug编译狮

Bug编译狮

在WordPress中实现浮动联系表单是一种常见需求，尤其是在网站的底部或侧边栏展示联系信息。下面是三种不同的方法来创建和展示这样的联系表单：

方法一：使用内置插件

  1. 安装“Contact Form 7”插件：

    • 登录到您的WordPress后台。
    • 找到并点击“插件”->“添加新插件”。
    • 在搜索框中输入“Contact Form 7”，然后选择并安装该插件。

  2. 配置联系表单：

    • 安装完成后，您可以在后台的“插件管理器”中找到并激活“Contact Form 7”插件。
    • 然后，在页面编辑器中添加一个新的联系表单。
    • 通过拖放界面设置表单字段，如姓名、电子邮件、电话等。
    • 最后保存并发布页面，这样表单就会在页面底部显示。

示例代码：

<form id="contact-form" method="post">
    <label for="name">Name:</label>
    <input type="text" name="name" required>

    <label for="email">Email:</label>
    <input type="email" name="email" required>

    <label for="message">Message:</label>
    <textarea name="message"></textarea>

    <button type="submit">Send Message</button>
</form>
  • 这段HTML代码创建了一个简单的联系表单，用户可以填写他们的姓名、邮箱和一条消息。
  • 表单提交时会通过POST方式发送数据到服务器。

方法二：使用自定义插件

  1. 安装“Custom Contact Form”插件：

    • 同样地，登录到WordPress后台，点击“插件”->“添加新插件”。
    • 搜索并选择“Custom Contact Form”插件。

  2. 定制联系表单：

    • 插件安装后，可以通过后台设置界面创建新的联系表单。
    • 设置表单标题、描述以及各个字段的位置和样式。

  3. 测试表单：

    • 使用预设的模板或者自定义的CSS样式来调整表单布局。
    • 测试表单功能，确保所有的表单元素都能正常工作。

示例代码：

// 添加一个自定义联系表单
add_action('wp_footer', 'custom_contact_form');

function custom_contact_form() {
    ?>
    <div class="contact-form-container">
        <h2>Contact Us</h2>
        <form action="<?php echo esc_url(home_url('/')); ?>" method="post">
            <label for="name">Name:</label><br>
            <input type="text" name="name" id="name" placeholder="Your Name"><br>
            <label for="email">Email:</label><br>
            <input type="email" name="email" id="email" placeholder="Your Email"><br>
            <label for="message">Message:</label><br>
            <textarea name="message" id="message" rows="5" cols="40"></textarea><br>
            <input type="submit" value="Submit">
        </form>
    </div>
    <?php
}

方法三：使用JavaScript动态加载表单

这种方法不需要额外的插件，适用于需要频繁更改表单结构的情况。

  1. 编写JavaScript脚本：

    document.addEventListener("DOMContentLoaded", function() {
   const form = document.createElement("form");
   form.innerHTML = `
       <label for="name">Name:</label>
       <input type="text" name="name" id="name" placeholder="Your Name">

       <label for="email">Email:</label>
       <input type="email" name="email" id="email" placeholder="Your Email">

       <label for="message">Message:</label>
       <textarea name="message" id="message" rows="5" cols="40"></textarea>

       <button type="submit">Send Message</button>
   `;

   // 将表单添加到body中
   document.body.appendChild(form);

   // 添加表单提交事件监听器
   form.addEventListener("submit", function(event) {
       event.preventDefault();
       // 发送表单数据到服务器
       fetch("/your-contact-page-url")
           .then(response => response.json())
           .then(data => console.log(data))
           .catch(error => console.error(error));
   });
});

以上三种方法可以根据您的具体需求和站点环境灵活选择。每种方法都有其优缺点，建议根据实际情况和个人偏好做出选择。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

在WordPress中创建和展示一个浮动的联系方式表单是一个常见的需求，特别是对于那些希望用户可以方便地与网站管理员或其他重要人员联系的站点来说。以下是一些实现此功能的方法：

方法1：使用内置插件

代码示例：

  1. 首先，在WordPress主题的functions.php文件中添加以下代码以启用浮点导航插件：
function enable_contact_form() {
    add_theme_support( 'wc-contact-form' );
}
add_action( 'after_setup_theme', 'enable_contact_form' );
  1. 然后，激活并配置该插件。

HTML 示例：

<div class="contact-form">
    <form action="" method="post" id="contact-form">
        <h2>Contact Us</h2>
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" required>
        </div>
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" name="email" id="email" required>
        </div>
        <div class="form-group">
            <label for="message">Message:</label><br />
            <textarea name="message" id="message" rows="5" required></textarea>
        </div>
        <button type="submit" name="submit" value="Submit">Send Message</button>
    </form>
</div>

CSS 示例：

.contact-form {
    width: 60%;
    margin: auto;
}

.form-group {
    margin-bottom: 1.5em;
}

方法2：自定义HTML模板

代码示例：

  1. 创建一个新的CSS类来处理表单布局：
#contact-form .form-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5em;
}
  1. 在HTML页面上引用这个新的CSS类，并将其应用于包含表单的元素：
<div class="contact-form">
    <form action="" method="post" id="contact-form">
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" required>
        </div>
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" name="email" id="email" required>
        </div>
        <div class="form-group">
            <label for="message">Message:</label><br />
            <textarea name="message" id="message" rows="5" required></textarea>
        </div>
        <button type="submit" name="submit" value="Submit">Send Message</button>
    </form>
</div>

方法3：利用WordPress插件库

代码示例：

  1. 安装并激活WordPress插件库中的WP Contact Form。

  2. 在插件管理器中找到Contact Form 7或类似的插件，然后安装它。

  3. 将其设置为默认插件。

  4. 编辑wp-includes/contact-form-7/contact-form.php文件，将表单字段添加到相应的位置：

<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
...
// Add fields to contact form.
if ( isset( $_POST['contact_form'] ) && is_admin() ) {
    $fields = array(
        'name' => array(
            'type'   => 'text',
            'class'  => 'contact-name',
            'placeholder' => __( 'Your Name' ),
            'id'     => 'name',
            'required' => true,
        ),
        'email' => array(
            'type'   => 'email',
            'class'  => 'contact-email',
            'placeholder' => __( 'Your Email' ),
            'id'     => 'email',
            'required' => true,
        ),
        'message' => array(
            'type'   => 'textarea',
            'class'  => 'contact-message',
            'placeholder' => __( 'Your message' ),
            'rows'   => 5,
            'id'     => 'message',
            'required' => true,
        ),
    );

    // Add the form field.
    wp_add_filter( 'contact_form_fields', 'custom_contact_form_field', 999, 2 );
    function custom_contact_form_field($fields, $form) {
        foreach ($fields as $key => $field) {
            $field['id'] = $key;
            $fields[$key] = $field;
        }
        return $fields;
    }

    // Add the fields to the form.
    $form->add_field( $fields['name'], 'name' );
    $form->add_field( $fields['email'], 'email' );
    $form->add_field( $fields['message'], 'message' );
}

HTML 示例：

<form action="" method="post" id="contact-form">
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" required>
    </div>
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" required>
    </div>
    <div class="form-group">
        <label for="message">Message:</label><br />
        <textarea name="message" id="message" rows="5" required></textarea>
    </div>
    <button type="submit" name="submit" value="Submit">Send Message</button>
</form>

通过以上三种方法之一，您可以轻松地在WordPress中创建和展示一个有效的、能够让用户快速提交信息的浮动联系方式表单。这些方法都是基于WordPress提供的强大功能和插件库，适合于各种规模和复杂度的网站需求。

最新更新