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.
// https://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.
// https://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?