How to hide WFFM Form Submit Button

In one of our project requirement, there is already a MVC Product form with its own fields and Submit button and we must dynamically show different WFFM forms based on product selection. So that finally user feels that it’s only a one form. 

We were able to show WFFM forms dynamically as I covered in my earlier article.

But there was one issue here. WFFM form also rendering its own Submit button. So, there are two Submit button rendering on screen which confuse the visitors.

We have to hide WFFM button anyway.

You will get below HTML when you inspect your web page for WFFM form button on browser

<div class="form-submit-border">

    <input class="btn  btn-default" type="submit" value="Submit">

</div>

So below JQuery done the magic to hide to hide the WFFM Submit button

if ($(".form-submit-border").length > 0) {

    $('.form-submit-border').hide();

}

I am finding DIV with class “form-submit-border” on page load. If this DIV is available on page then just hide it.

I hope you like this Sitecore tip. Stay tuned for more Sitecore related articles.

Till that happy Sitecoring :)

Please leave your comments or share this tip if it’s useful for you.