Support » Plugin: Contact Form 7 » How can I handle the client side myself completely?

  • How can I use Contact Form 7 to do the mail() **server side** only and I handle the **client side** myself?

    I have this form that uses Zurb Foundation to validate the submission:

    `<form class=”form-comment form-submit” id=”formComment” data-abide novalidate action=”” data-aos=”fade-up”>

    <!– grid container –>
    <div class=”grid-container”>

    <!– grid x –>
    <div class=”grid-x grid-padding-x”>

    <div class=”medium-12 cell”>
    <div data-abide-error class=”alert callout” style=”display: none;”>
    <p><i class=”fi-alert”></i> There are some errors in your form.</p>
    </div>
    </div>

    <div class=”medium-6 cell”>
    <label>
    <input type=”text” name=”author” class=”form-input” placeholder=”Name” required>
    <span class=”form-error”>Yo, you had better fill this out, it’s required.</span>
    </label>
    </div>

    <div class=”medium-6 cell”>
    <label>
    <input type=”text” name=”phone” class=”form-input” placeholder=”Phone number” pattern=”UK_number_only”>
    <span class=”form-error”>Yo, UK landline or mobile numbers only.</span>
    </label>
    </div>

    <div class=”medium-12 cell”>
    <label>
    <input type=”email” name=”email” class=”form-input” placeholder=”Email” pattern=”email” required>
    <span class=”form-error”>Yo, you had better fill this out, it’s required. Or, it is invalid.</span>
    </label>
    </div>

    <div class=”medium-12 cell”>
    <label>
    <textarea placeholder=”Message” name=”comment” class=”form-input” rows=”10″ required></textarea>
    <span class=”form-error”>Yo, you had better fill this out, it’s required.</span>
    </label>
    </div>

    <div class=”medium-12 cell”>
    <input type=”submit” class=”button button-send float-right” value=”Send”>
    <input type=”hidden” name=”task” value=”comment” />
    </div>

    </div>
    </div>

    </form>

    <div class=”reveal” id=”reveal1″ data-reveal>
    <!– Content will be loaded here from somwhere else, crazy! –>
    <h3>Loading…</h3>
    </div>`

    JS:

    `Foundation.Abide.defaults.patterns[‘UK_number_only’] = /^(((\(?0\d{4}\)?\s?\d{3}\s?\d{3})|(\(?0\d{3}\)?\s?\d{3}\s?\d{4})|(\(?0\d{2}\)?\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?|(\+44\s?7\d{3}|\(?07\d{3}\)?)\s?\d{3}\s?\d{3})$/

    // Must call it after the pattern.
    $(document).foundation()

    // Submit message form.
    // http://foundation.zurb.com/forum/posts/37267-foundation-6-abide-trigger-without-submit-button
    var form = $(“form.form-submit”)
    form.bind(“submit”,function(e) {
    e.preventDefault()
    console.log(“submit intercepted”)
    return false
    })
    form.bind(“forminvalid.zf.abide”, function(e,target) {
    console.log(“form is invalid”)
    })

    form.bind(“formvalid.zf.abide”, function(e,target) {
    console.log(“form is valid”)

    var param = target.serialize()
    $.ajax({
    type: “POST”,
    url: target.attr(‘action’),
    data: param,
    contentType: “application/x-www-form-urlencoded”,
    success: function(responseData, textStatus, jqXHR) {
    // Clear the form.
    target.find(“input[type=text], input[type=email], textarea”).val(“”)

    $(‘#reveal1’).foundation(‘open’)

    // Artificially slow down load to let you see the loading state
    setTimeout(function() {
    $(‘#reveal1’).html(responseData)
    $(‘#reveal1’).trigger(‘resizeme.zf.reveal’)
    }, 500)

    // Foundation Reveal – trigger reveal.
    // http://zurb.com/university/lessons/ajaxing-dynamic-content-with-foundation
    $(‘#reveal1’).foundation(‘open’)
    },
    error: function(jqXHR, textStatus, errorThrown) {
    console.log(errorThrown)
    }
    })
    })`

    How can use the code I have above with Contact Form 7? Any ideas?

  • The topic ‘How can I handle the client side myself completely?’ is closed to new replies.