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

我正在创建一个包含非常简单的订阅表单的网页，基本上是收集对产品感兴趣的人的电子邮件地址。对于此表单，我使用的是rapidmail，它提供类似于mailchimp的服务。我的问题是输入电子邮件地址后，用户将被重定向到新页面，其中显示成功（或错误，如果电子邮件地址有问题）消息。我想要的是将这些消息显示在与表单相同的页面上，因为重定向到的页面非常丑陋。 Rapidmail还提供了使用iframe的替代方法，有趣的是，该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>

最佳答案

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" />