Quform JavaScript options

There are a number of options you can use to customize the Quform JavaScript. See the table below for all options and below the table for examples.

OptionDefaultNotes
container.quform-elementsThe jQuery selector of the element container
loading.quform-loading-wrap .loadingThe jQuery selector of the loading image/text
submitButton.quform-submit-buttonThe jQuery selector of the submit button
resettrueReset the form to its default state after successful submit
hideFormSpeedfalseThe jQuery animate speed that the form will fade out, if false the form will not fade out
successFadeInSpeedslowThe jQuery animate speed that the success message will fade in
successFadeOutSpeedslowThe jQuery animate speed that the success message will fade out
successTimeout8000The time to display the success message in milliseconds. 1000 = 1 second. Set to 0 to never hide the message.
scrollingtrueScroll automatically to errors and messages
scrollSpeed400The jQuery animate speed of the scrolling animation
scrollThreshold20If the scroll target is this number of pixels or less inside the viewport, scrolling to it will still happen
scrollOffset-50How far above the target to scroll too
errorTitleThere was a problemThe title of the error message if a serious error occurs
errorResponseEmptyAn error occurred and the response from the server was empty.The error message text if there is a server side problem
errorAjaxAn Ajax error occurred.The error message if there is an Ajax problem
errorPositionaboveThe position of global form error message, ‘above’ or ‘below’ the form

Examples

On line 3 of the quform/js/scripts.js file you will find a line of code that sets up the Quform script on all <form> tags with the attribute class="quform".

1
$('form.quform').Quform();
$('form.quform').Quform();

To use the examples below, replace that line with the code from one of the examples below. You are then free to add option to (or remove options from) the new JavaScript object passed into the Quform() function. Note that this will affect all forms.

Modifying the scroll offset

1
2
3
$('form.quform').Quform({
    scrollOffset: -150
});
$('form.quform').Quform({
    scrollOffset: -150
});

Never hiding the success message

1
2
3
$('form.quform').Quform({
    successTimeout: 0
});
$('form.quform').Quform({
    successTimeout: 0
});

Translating the global error messages

1
2
3
4
5
$('form.quform').Quform({
    errorTitle: 'Er was een probleem',
    errorResponseEmpty: 'Er is een fout opgetreden, probeer het aub opnieuw.',
    errorAjax: 'Er is een fout opgetreden, probeer het aub opnieuw.'
});
$('form.quform').Quform({
    errorTitle: 'Er was een probleem',
    errorResponseEmpty: 'Er is een fout opgetreden, probeer het aub opnieuw.',
    errorAjax: 'Er is een fout opgetreden, probeer het aub opnieuw.'
});
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy