freeform Ajax submission

Question

This is the first time trying this with Freeform 4 but I don’t see any reason why this shouldn’t work.

I have a basic contact form:

{exp:freeform:form
form_id="2"
ajax="yes"
required="name|email"
return="embeds/thankyou"
form:class="contact-form"
form:id="contact-form"
}

<fieldset>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" class="form-text" />

</fieldset>

<fieldset>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" class="form-text" />
</fieldset>

<fieldset>
    <label for="message">Message</label>
    <textarea id="message" name="message"></textarea>
    <p class="form-help">Tell us if you'd like to adopt a dog or support us.</p>
</fieldset>

<fieldset class="form-actions">
    <input type="submit" class="btn--orange  btn--x-large" value="Contact" />
</fieldset>


{/exp:freeform:form}
<div id="contact-thanks"></div> 

and it works fine without Ajax. Form gets submitted, email gets sent, user gets redirected. I add my JS into the mix (adding my jQuery and plugin call before it)

$('#contact-form').ajaxForm({  
    target: '#contact-thanks', 
    success: function() {
        $('#contact-form').hide();
        $('#contact-thanks').fadeIn('slow');
    } 
});

the form submits, email gets sent but the success message doesn’t load into the placeholder.

Is there anything glaringly obvious I’ve missed? This did work on other sites albeit they were using Freeform 3.

Answer 1

So it appears with the new version of Freeform I need to set the ajax parameter to ajax="no" for use with Malsup's form plugin otherwise the output is a JSON response.

Hopefully that will help others.