I'm working with a BS3 template and a formbuilder for speed, it suits me for now. However, this form when a user submits a contact request and it generates either a success or an error message, it totally throws the vertical sliding left and right panels of the BS3 template out of sync.

It's possibly the

.slideDown();

That's causing the worst of it but I'm only just diving in to jquery and unsure if there's a viable alternative to .slidedown

Try it Here... if you would like to, the contact script is on the final 4th set of left/right sliders of the template. Fill in the form and see what happens.

Therefore, I'm looking into if it's possible to once a user submits the contact form, upon selecting the submit button; the success or error messages would actually open in a modal window and this render the above issue obsolete?

Below is the jquery part of the form builder code, that generates the success / error messages and any help or guidance would be much appreciated indeed.

Thanks in advance.

jQuery(function() { var options = { url: "/coming_soon/helloform/forms/1/process.php", async: false, type: "post", data: { "hfb": 1}, success: function(d) { var jd = JSON.parse(d); var tError = 0; jQuery.each(jd.eleErr, function(i, val) { var eleCon = "form#hfbform_id_1 #" + i + "_con"; //No error if (val === "") { jQuery(eleCon + " .hfb_pd_errormsg").hide(); } else { jQuery(eleCon + " .hfb_pd_errormsg").text(val); jQuery(eleCon + " .hfb_pd_errormsg").slideDown(); tError++; } }); if (tError === 0) { jQuery("form#hfbform_id_1")[0].reset(); if (jd.redirection[0] === true) location.href = jd.redirection[1]; else {