need help merging old working jquery with new webform

Question

I apologize for the title of this question as I know it seems a little broad. Unfortunately, I am still really new to jquery and I had lots of help in the past to make this work, and now I am wanting to change things and I'm pretty in over my head.

I have a website that is live here: http://www.rattletree.com There is the newsletter signup form where when a user clicks on the email box, the name and city fields drop down to be populated as well. This all works fine, but the way it works now, the info is sent directly to my email address and I need to manually enter the person into our email marketing program. I am now wanting to have this info sent directly to our email marketing program by taking the needed info from the embed code provided by the program. I have been working on it for a few days, and sometimes I manage to get the info sent to the program and not hide the divs and sometimes I manage to hide the divs and not get the form properly sent. I'm a little lost. I'm hoping someone can help me properly merge these two things.

Here is the working code for the current live website that is sending to my own email address:

(in the header)

<div class="outeremailcontainer">
    <div id="emailcontainer">
        <?php include('verify.php'); ?>
        <form action="../index_success.php" method="post" id="sendEmail" class="email">
            <h3 class="register2">Newsletter Signup:</h3>
            <ul class="forms email">
                <li class="name">
                    <label for="yourName">Name: </label>
                    <input type="text" name="yourName" class="info" id="yourName" value="<?php echo $_POST['yourName']; ?>" /><br />
                </li>
                <li class="city"><label for="yourCity">City: </label>
                    <input type="text" name="yourCity" class="info" id="yourCity" value="<?php echo $_POST['yourCity']; ?>" /><br />
                </li>
                <li class="email">
                    <label for="emailFrom">Email: </label>
                    <input type="text" name="emailFrom" class="info" id="emailFrom" value="<?php echo $_POST['emailFrom']; ?>" />
                     <?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>';
                     ?>
                </li>
                <li class="buttons email">
                     <button type="submit" id="submit">Send</button>
                     <input type="hidden" name="submitted" id="submitted" value="true" />
                </li>
            </ul>
        </form>
    <div class="clearing">
    </div>
  </div>
</div>

The script:

$(document).ready(function () {
    $('#emailFrom').focus(function () {
        if ($('#overlay').length) {
            return;
        } // don't keep adding overlays if one exists

        $('#sendEmail').find('.name, .city').slideDown(300, function () {
            $(this).show();
        });

        $('.outeremailcontainer').css({
            position: 'relative',
            bottom: 0,
            left: 0,
            zIndex: 1001
        });

        $('<div id="overlay"></div>').appendTo('body');
    });

    $('#overlay').live('click', function () {
        $('#sendEmail').css({
            backgroundColor: 'transparent'
        }).find('.name, .city').slideUp(300);

        $('.outeremailcontainer').css({
            position: 'static'
        });
        $('#overlay').remove();
    });
});

in an include at the bottom of the page:

$(document).ready(function () {
    $("#submit").click(function () {
        $(".error").hide();
        var hasError = false;
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

        var emailFromVal = $("#emailFrom").val();

        if (emailFromVal == '') {
            $("#emailFrom").after('<span class="error"><br />You forgot to enter the email address to send from.</span>');
            hasError = true;

        } else if (!emailReg.test(emailFromVal)) {
            $("#emailFrom").after('<span class="error"<br />>Enter a valid email address to send from.</span>');
            hasError = true;
        }

        var yourNameVal = $("#yourName").val();
        if (yourNameVal == '') {
            $("#yourName").after('<span class="error"><br />You forgot to enter your name.</span>');
            hasError = true;
        }

        var yourCityVal = $("#yourCity").val();
        if (yourCityVal == '') {
            $("#yourCity").after('<span class="error"><br />You forgot to enter your city.</span>');
            hasError = true;
        }
        if (hasError == false) {
            $(this).hide();
            $("#sendEmail li.buttons").append('<img src="/wp-content/themes/default/images/template/loading.gif" alt="Loading" id="loading" />');
            $.post("/includes/sendemail.php",
                //emailTo: emailToVal, 
                {
                    emailFrom: emailFromVal,
                    yourName: yourNameVal,
                    yourCity: yourCityVal
                },
                function (data) {
                    $("#sendEmail").slideUp("normal", function () {
                        $("#sendEmail").before('<h3 class="register2">Thank you!  You\'re on the email list!</h3><p class="emailbox">Click <a href="http://rattletree.com/Songs/Live_EP/Chikende.mp3">HERE</a> for your free song.</p>');
                    });
                }
            );
        }
        return false;
    });
});

And lastly here is the code that the email marketing program is providing where I am wanting to send the above name, city, and email info to:

<form action="https://madmimi.com/signups/subscribe/66160" method="post" id="mad_mimi_signup_form">
    <fieldset>
        <div class="mimi_field text email required">
            <label for="signup_email">Email</label>
            <input id="signup_email" name="signup[email]" type="text" placeholder="you@example.com" class="required">
            <div class="mimi_field_feedback"></div><span class="mimi_funk"></span>
        </div>
        <div class="mimi_field text required">
            <label for="signup_name" id="wf_label">Name</label>
            <input id="signup_name" name="signup[name]" type="text" class="required">
            <div class="mimi_field_feedback"></div><span class="mimi_funk"></span>
        </div>
        <div class="mimi_field text required">
            <label for="signup_city" id="wf_label">City</label>
            <input id="signup_city" name="signup[city]" type="text" class="required">
            <div class="mimi_field_feedback"></div><span class="mimi_funk"></span>
        </div>
        <div class="mimi_field action">
            <input id="webform_submit_button" value="Sign up!" type="submit" class="submit" data-default-text="Sign up!" data-submitting-text="Sending…" data-invalid-text="? You forgot some required fields">
        </div>
    </fieldset>
</form>

Thank you greatly for any help!

Answer 1

There's an easy way to achieve this, using MadMimi's API and their official PHP wrapper which is available here on GitHub.

It doesn't involve any changes to the jQuery, or CORS.

They have an example of how to add new subscribers to lists which is what you're looking for.

I've customised the example for you: (add this to /includes/sendemail.php)

<?php
require('MadMimi.class.php');
$mailer = new MadMimi('YOUR USERNAME (OR E-MAIL ADDRESS)', 'YOUR API KEY'); 
$user = array('email' => $_REQUEST['emailFrom'], 'name' => $_REQUEST['yourName'], 'city' => $_REQUEST['yourCity'], 'add_list' => 'My List');
$mailer->AddUser($user);
?>

This assumes that you have placed the MadMimi.class.php and Spyc.class.php files in the same directory as your current handler, /includes/sendemail.php.

Be sure to plug in your real username and API key (which you should be able to get from MadMimi when you're signed in).

You could even leave the existing email script in there and simply add the API call to MadMimi, and be notified every time someone subscribes, but not have to do anything :)

Answer 2

Cross site POST in Javascript is a security risk (imagine a website doing posts on paypal site with your paypal cookies set, without you knowing it).

You have to modify /includes/sendemail.php to act as a proxy, receive inputs as it does now and send the POST request to madmimi.com

See for instance this: How to send HTTPS posts using php

If the code on the first answer on that page works, then you can change it like this

/includes/sendemail.php

<?php
$postfields = array('signup[email]'=>$_REQUEST['emailFrom'], 'signup[name]'=>$_REQUEST['yourName'], 'signup[city]'=>$_REQUEST['yourCity']);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://madmimi.com/signups/subscribe/66160');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $postFields);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
$result = curl_exec($ch);
?>

This assumes there is no javascript code on the madmimi form page that modifies the form field names (so that signup[city] is not modified into something else like signup-city before sending the request). Of course all the requests will appear to madimi as arriving from your server, with no cookies of the users set. The solution on the stack overflow page uses curl, so to use that curl must be available in your server PHP installation ( http://php.net/manual/en/book.curl.php ). Other solutions are available, if it is not installed.

If you also want to send the email, as you did, just add this code on top of the current sendemail.php script, so it still does what it did, plus it connects to the madmimi form.

You probably need to return something from the PHP script to the calling page (OK, DONE, SENT, whatever) like your original sendemail.php did, just add that at the end of the script before the ?> line.