Styling Submit Button – Easy Jquery styling option if anybody wants to use it

[pietkruger]

Hi,

We are using Quform on a large number of our clients’s sites, and it is by far the most potent form builder out there.

Styling of most elements are very easily accomplished inside the form builder itself, but styling and positioning the submit button has been giving our clients grey hairs (maybe themecatcher can improve this functionality in future releases…).

We eventually wrote two tiny Jquery functions that we include in our theme file templates to take care of this issue. The first function essentially removes the submit element and all the related styling and replaces it with a button class that is styled in your css files and the second makes it responsive and centers the button below the form.

As per the example below, we use bootstrap, so ours include the standard bootstrap btn class, but you can use any of the free online css button generators out there to create the look and feel and then just add that btn style to your style sheet.


function centerIphormSubmit(){
$('.iphorm-submit-wrap, .iphorm-submit-input-wrap, button.iphorm-submit-element, button.iphorm-submit-element *').removeAttr('style');
$('button.iphorm-submit-element').empty();
$('button.iphorm-submit-element').html('<div class="btn btn-dark-grey btn-lg">Send Your Message</div>');
var formwidth = $('.iphorm-submit-wrap').width();
var buttonwidth = $('.iphorm-submit-wrap').find('.btn').width();
var offsetThisButton = ((formwidth - buttonwidth)/2);
if(offsetThisButton > 0){$('.iphorm-submit-wrap').find('.btn').css('margin-left', offsetThisButton); }
}
centerIphormSubmit();

$(window).resize(function(){
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {

centerIphormSubmit();

}, 100));

});

By calling the centerIphormSubmit() function it takes care of the submit button styling and positioning.

Hope this helps.

Cheers
Piet

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[pierres]

Hi, I’m using Quform on my website and I am really looking to center the submit button. Can you explain to me where I must use this code?

Thank you

Regards,

Pierre

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[pierres]

Hi,

Thank you it’s working. In the same way, is that possible to center the captcha image please?

Thank you

Regards

Pierre

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Author]

Posts