javascript - Rapidmail 订阅表格在电子邮件订阅后重定向 - Mailchimp

Question

我正在创建一个网页，其中包含一个非常简单的订阅表单，主要收集对该产品感兴趣的人的电子邮件地址。对于此表格，我使用 rapidmail ，它提供类似于 mailchimp 的服务。我的问题是，输入电子邮件地址后，用户将被重定向到新页面，其中显示成功(或错误，如果电子邮件地址错误)消息。我想要的是这些消息与表单显示在同一页面上，因为我被重定向到的页面很丑陋。 Rapidmail 还提供了使用 iframe 的替代方案，有趣的是，它在与表单相同的页面上显示成功/错误消息；不幸的是，它同样丑陋，并且它的自定义选项非常有限，并且不适合我的页面设计。

我希望有像 this 这样的解决方案有可能，虽然我不知道rapidmail是否提供了一个“替代端点”，允许我“使用JSON”，如链接中所示。

这就是我的表单的样子(非常标准)

<form action="https://tools.emailsys.net/121/1550/18cxn42/subscribe/form.html" method="post">
    <div class="form">
        <div class="form_border">
            <ul>
                <li>
                    <label class="field_label required" for="email">E-Mail: </label>
                    <input type="text" class="form_field" name="email" id="email" value="" />
                </li>
                <li id="firstname_form">
                    <label id="firstname_label" class="field_label" for="firstname">Vorname: </label>
                    <input type="text" class="form_field" name="firstname" id="firstname" value="" />
                </li>
                <li class="form_button">
                    <input type="submit" class="form_button_submit" value="Anmelden" />
                </li>
            </ul>
        </div>
    </div>
</form>

Answer 1

JS:

/*
* Get errors of RapidMail forms
 */
var rapidmail_form = document.getElementById('rapidmail_form');
if (typeof(rapidmail_form) != 'undefined' && rapidmail_form != null && rapidmail_form.length)// if we have a RapidMail form
{
    function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
            vars[key] = value;
        });
        return vars;
    }

    // email
    var field_email = getUrlVars()["field_email"];
    if (field_email.length > 0) {
        document.getElementById("email").value = field_email;// get previous email
    }
    // lastname
    var field_lastname = getUrlVars()["field_lastname"];
    if (field_lastname.length > 0) {
        document.getElementById("lastname").value = field_lastname;// get previous lastname
    }
    // Error message
    var error_email = getUrlVars()["error_email"];
    var error_lastname = getUrlVars()["error_lastname"];

    // Gather all errors into one.
    var error_text = '';
    // error_email
    if (error_email != 'undefined' && error_email != null && error_email.length > 0) {
        error_email = error_email.replace(/\+/g, ' ');
        error_text += '<p>' + error_email + '</p>';
    }
    // error_lastname
    if (error_lastname != 'undefined' && error_lastname != null && error_lastname.length > 0) {
        error_lastname = error_lastname.replace(/\+/g, ' ');
        error_text += '<p>' + error_lastname + '</p>';
    }

    // Input gathered text to h5
    if (document.getElementById("rapidmail_form_error") != 'undefined' && document.getElementById("rapidmail_form_error") != null) {
        document.getElementById("rapidmail_form_error").innerHTML = error_text;// show Error
    }
}

HTML:

<div id="rapidmail_form_error"></div>
<form action="https://tools.emailsys.net/121/1550/18cxn42/subscribe/form.html" method="post" id="rapidmail_form">

因此它会查看 RapidMail 生成的 URL 并对其进行解析。最后，它收集所有错误并将其粘贴到 rapidmail_form_error id 元素。

只需将当前 URL 放入:

<input type="hidden" name="url_error" value="THE_URL_OF_YOUR_FORM" />