Ajax subscribe form

I have successfully added an ajax subscribe form to a website that i'm building but there are a couple of issues.

Firstly, the form doesn't forward to my set page after successful submission (which would be fine and whole point of using an ajax based form except for the issue below)

Secondly, I can't find anyway to change the default wording of the ajax pop-ups.

Phil Phil, 4 years ago

Hi Carl,

The alert boxes are controlled by this little function here (from the GitHub gist):

function (data) {
    if (data.Status === 400) {
        alert("Error: " + data.Message);
    } else { // 200
        alert("Success: " + data.Message);
    }
});

But you can put anything you want in those alert boxes:

function (data) {
    if (data.Status === 400) {
        alert("Try again sucker");
    } else { // 200
        alert("Profit!");
    }
});

In fact, you don't have to use alerts (which are a bit ugly) at all. You could put code in there which fades out the subscription form and leaves a simple success message. It's really up to you. Perhaps decide what you want to do and we'll try and help you out here.

If after all that you decide you still want to redirect to your signup page, you do so by referencing window.location and the RedirectUrl property of the returned data:

function (data) {
    if (data.Status === 400) {
        alert("Try again sucker");
    } else { // 200
        window.location.href = data.RedirectUrl;
    }
});
carl.michael, 4 years ago

Your idea of fading out the form and replacing it with a success message sounds great.

I'd love to get some help on doing that.

Thanks

Phil Phil, 4 years ago

Hi carl.michael,

I've put up a slightly different version of the original code. After a successful submission it slides up the form and then slides down a success message. There's no styling at all, of course. You'll have to figure out how to put this into your own page and make it look decent.

If you want to do some tweaking or use different effects, now's the time to do some learning:
1. Compare this version of the code with the original, and figure out what has changed.
2. Start playing with things. Change little bits, one by one, and see what difference it makes.
3. This uses the jQuery functions for slideUp and slideDown. Check out that documentation and if figure out if you understand what's happening.
4. If you don't like the effects i've used, jQuery has plenty of other options. Try out the examples and see what you like best!
5. Test in all the major browsers!

Good luck,
Phil

carl.michael, 4 years ago

That's awesome.

Just dropped it in here: http://www.fruitfulthoughts.co.uk

Will have a play with it over the next few days

atblue, 3 years ago

Hi, phil. Thanks for the link and the code, that's almost exactly what I was looking for, too. I've managed to get it to work from the code you posted on github but I am wondering if you can offer one final piece of instruction:

how can I get it to also return the error message in the small success div (#successMessage)? I'd rather eliminate any popups whatsoever and essentially do exactly what you guys do down in the footer. Simple div (animated or not) underneath the form input that says "Good job, my friend." or "Eeek. Errors!" (if those are the only two callbacks allowed so far?

Any thoughts there?

Thanks,
Chris

Phil Phil, 3 years ago

Hi Chris,

I've done a new gist with something similar to what you're looking for. Basically we populate a variable called message and then display that message in a div on both success and failure.

You might not actually want to include data.Message - it's up to you.

Let me know if anything's not clear there :)

Phil

atblue, 3 years ago

Works perfectly, phil. THANK YOU. I can take and customize it from here.

I think the only lingering question is how can I determine that an email address is already signed up and return that information (if at all). I've seen it in some wordpress implementations (i think).

But either way, this is great. Appreciate your efforts here.

Phil Phil, 3 years ago

Hi atblue,

Apologies for not replying before now.

I think the only lingering question is how can I determine that an email address is already signed up and return that information (if at all). I've seen it in some wordpress implementations (i think).

Good question - the only way to do this is using the API and a teensy bit of server-side programming. It would be a very simple script, and client libraries are available in many major languages.

All the best :)

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098