邮件订阅后的Rapidmail订阅表格重定向 - Mailchimp

Question

I am creating a web page which includes a very simple subscription form, basically collecting the email addresses of those interested in the product. For this form I am using rapidmail, which offers a service similar to mailchimp. My issue is that after the email address has been entered, the user is being redirected to a new page where a success (or error, in case the email address was faulty) message is displayed. What I want is for these messages to be displayed on the same page as the form, because the page I am being redirected to is, well, ugly. Rapidmail also offers the alternative to use an iframe, which interestingly enough displays success/error messages on the same page as the form; it is unfortunately equally ugly and its customizing options are very limited and do not fit the design of my page.

I was hoping that a solution like this would be possible, thopugh I do not know if rapidmail provides an "alternative endpoint" that allows me to "work with JSON" as in the link.

this is what my form looks like (pretty standard)

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

</div>

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

So it looks at the URL RapidMail generates and parse it. Finally it gathers all errors and paste it to rapidmail_form_error id element.

Just put the current URL to:

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