README

Send in Blue API 的联系表单集成

要求

此插件需要 Craft CMS 3.0.0-beta.23 或更高版本。

安装

要安装此插件，请按照以下说明操作。

打开您的终端并转到您的 Craft 项目
```
 cd /path/to/project
```

然后告诉 Composer 加载插件

 composer require sib-contact-form-integration/sib-contact-form-integration

在控制面板中，转到设置 → 插件，并点击 sib-contact-form-integration 的“安装”按钮。

craft sib contact form 概览

此插件是基于 craftcms/contact-form 的分支，并使用其基本联系表单逻辑通过用户的 SMTP 邮件设置发送电子邮件。除了这个之外，此插件还有额外的设置和逻辑来处理与 Send In Blue API 的通信。此插件允许您将联系人添加到您的 SendInBlue 联系名单，并将这些联系人添加到邮件列表中。

配置 sib-contact-form-integration

CMS 设置

在 craft CMS 中，转到设置页面，并点击 sib-contact-form-integration 设置。从这里您可以将您的 Send In Blue API 密钥作为 SIB API Key 添加，并在 SIB Lists 文本框中输入逗号分隔的新闻通讯列表 ID。

自定义逻辑

要添加自定义逻辑，插件扩展了来自原始 craftcms/contact-form 的 afterValidate 和 beforeSend 事件钩子。

要使用以下事件钩子，请将它们添加到您的项目 /config 目录中的 sib-contact-form-integration.php 文件中。

例如，my-project/config/sib-contact-form-integration.php

afterValidate

插件具有原始的 afterValidate，但使用插件命名空间。这是您可以添加自定义验证表单元素的的地方。例如。

use wc4b\sibcontactformintegration\models\Submission;
use yii\base\Event;


Event::on(Submission::class, Submission::EVENT_AFTER_VALIDATE, function(Event $e) {
    /** @var Submission $submission */
    $submission = $e->sender;

    // Make sure that `message[fromName]` was filled in
    if (!isset($submission->fromName) || empty($submission->fromName)) {
        // Add the error
        // (This will be accessible via `message.getErrors('message.phone')` in the template.)
        $submission->addError('fromName', "Name cannot be blank");
    }
    
    // Make sure that `message[termsCondCheck]` was filled in
    if (!isset($submission->message['termsCondCheck']) || empty($submission->message['termsCondCheck'])) {
        // Add the error
        // (This will be accessible via `message.getErrors('message.phone')` in the template.)
        $submission->addError('message.termsCondCheck', "Please review our T'&C's");
    }
});

beforeSend & afterSend

插件具有原始的 beforeSend，但使用插件命名空间。插件还添加了额外的 afterSend 事件钩子以供使用。这是您可以添加自定义验证表单元素的地方。

例如。

use wc4b\sibcontactformintegration\events\MailEvent;
use wc4b\sibcontactformintegration\Mailer;
use yii\base\Event;


Event::on(Mailer::class, Mailer::EVENT_BEFORE_SEND || Mailer::EVENT_AFTER_SEND , function(MailEvent $e) {

});

beforeSignup & afterSignup

除了上述之外，插件还有在用户注册到 Send In Blue 邮件列表时的事件钩子。

例如。

use wc4b\sibcontactformintegration\events\SignupEvent;
use wc4b\sibcontactformintegration\Subscriber;
use yii\base\Event;


Event::on(Subscriber::class, Subscriber::EVENT_BEFORE_SIGNUP || Subscriber::EVENT_AFTER_SIGNUP  , function(SignupEvent $e) {

});

使用 sib-contact-form-integration

您可以通过页面提交使用联系表单，如 craftcms/contact-form 文档中所述。但是，建议使用 Ajax 请求处理表单提交，以提高用户体验。

以下是一个示例模块可能看起来像这样

const contactFormSubmission = (function () {

    const axios = require('axios').default;
    const DOM = {};
    function init(formElement) {
        DOM.form  = formElement;
        addEvents();

    }
    function addEvents() {

        DOM.form.addEventListener("submit", function (e) {

            e.preventDefault();
            var data = new FormData(DOM.form)

            handleReset();

            axios.post('/', data)
                .then(function (response) {
                    if (response.data.errors) {
                        handleErrors(response.data);
                    }
                    else {
                        handleSuccess();
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        });
    }

    function handleSuccess() {
       
        var submitButton = DOM.form.getElementsByClassName("submit-button");
        submitButton[0].classList.add("inactive");

        var success = DOM.form.getElementsByClassName("success-message");
        success[0].classList.add("active");


        var inputs = DOM.form.getElementsByClassName("form-input");

        for (let index = 0; index < inputs.length; index++) {
            var element = inputs[index];

            element.value = "";
            element.checked = false;

        }

    }

    function handleReset() {

        var errorMessages = DOM.form.getElementsByClassName("error-message");

        for (let index = 0; index < errorMessages.length; index++) {
            var element = errorMessages[index];
            element.innerHTML = "";
            element.classList.remove('active');
        }

    }

    function handleErrors(data) {

        if (data.errors) {
            Object.keys(data.errors).forEach(function (key) {
                var string = "";

                data.errors[key].forEach(function (e) {
                    string += "<p>" + e + "<p>";
                });

                var errorDivs = DOM.form.getElementsByClassName("error-message");
                var errorDiv = null;

                for (let index = 0; index < errorDivs.length; index++) {
                    const element = errorDivs[index];
                    
                    if(element.id == key + ".errors"){                        
                        var errorDiv = element;
                        errorDiv.innerHTML = string;
                        errorDiv.classList.add('active');
                    }
                }
              
            });
        }   

    }

    return {
        init: init
    };


})('Contact Form Submission');


document.addEventListener("DOMContentLoaded", function () {
    var form = document.getElementById("contact-form");
    if (form) {
        contactFormSubmission.init(form);
    }
});

具有以下模板

<form id="contact-form" method="post" accept-charset="UTF-8">
    {{ csrfInput() }}
    <input type="hidden" name="action" value="sib-contact-form-integration/mail">

    <div class="py-2">
        <div>
            <input id="from-name" type="text" name="fromName" class="form-input p-4 w-full" placeholder="Name" value="{{ message.fromName ?? '' }}">
        </div>
        <div id="fromName.errors" class="error-message w-full bg-primary text-white p-2"></div>
    </div>

    <div class="py-2">
        <div>
            <input id="from-email" type="email" name="fromEmail" class="form-input p-4 w-full" placeholder="Email" value="{{ message.fromEmail ?? '' }}">
        </div>
        <div id="fromEmail.errors" class="error-message w-full bg-primary text-white p-2"></div>
    </div>

    <div class="py-2">
        <div>
            <textarea rows="10" cols="40" id="message" class="form-input p-4 w-full" placeholder="Message" name="message[body]">{{ message.message.body ?? '' }}</textarea>
        </div>
        <div id="message.errors" class="error-message w-full bg-primary text-white p-2"></div>
    </div>

    <div class="py-2 text-white">
        <div>
            <input class="form-input styled-checkbox" id="message[termsCondCheck]" type="checkbox" name="message[termsCondCheck]" value="true">
            <label for="message[termsCondCheck]">I have read the and agree to the <a href="/privacy-policy" class="c-link c-link--primary" targer="_blank" rel="noreferrer noopener" el>Privacy Policy<a></label>
        </div>
        <div id="message.termsCondCheck.errors" class="error-message w-full bg-primary text-white p-2"></div>
    </div>


    <div class="py-2 text-white">
        <div>
            <input class="form-input styled-checkbox" id="message[newsletterSignup]" type="checkbox" name="message[newsletterSignup]" value="true">
            <label for="message[newsletterSignup]">I want to sign up to the newsletter</label>

        </div>
        <div id="message.newsletterSignup.errors" class="error-message w-full bg-primary text-white p-2"></div>
    </div>

    <div class="py-2 relative">
        <div class="success-message">
            <h2 class="text-white">Thanks for your message</h2>
        </div>
        <div class="submit-button">
            <button type="submit" class="c-btn c-btn--ghost-nearly-black">Subscribe</button>
        </div>
    </div>
</form>

sib-contact-form-integration 路线图

要完成的事情和潜在功能的想法

使条款和条件检查成为必填项的选项

由 WillCodeForBeer 提供

wc4b / sib-contact-form-integration

维护者

详细信息