2

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.

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.

  • Steven, is it expected that the data in the return template will be injected into the target set in the JS? – Brendan Underwood Oct 15 '13 at 6:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.