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.
| Option | Default | Notes |
|---|---|---|
| container | .quform-elements | The jQuery selector of the element container |
| loading | .quform-loading-wrap .loading | The jQuery selector of the loading image/text |
| submitButton | .quform-submit-button | The jQuery selector of the submit button |
| reset | true | Reset the form to its default state after successful submit |
| hideFormSpeed | false | The jQuery animate speed that the form will fade out, if false the form will not fade out |
| successFadeInSpeed | slow | The jQuery animate speed that the success message will fade in |
| successFadeOutSpeed | slow | The jQuery animate speed that the success message will fade out |
| successTimeout | 8000 | The time to display the success message in milliseconds. 1000 = 1 second. Set to 0 to never hide the message. |
| scrolling | true | Scroll automatically to errors and messages |
| scrollSpeed | 400 | The jQuery animate speed of the scrolling animation |
| scrollThreshold | 20 | If the scroll target is this number of pixels or less inside the viewport, scrolling to it will still happen |
| scrollOffset | -50 | How far above the target to scroll too |
| errorTitle | There was a problem | The title of the error message if a serious error occurs |
| errorResponseEmpty | An error occurred and the response from the server was empty. | The error message text if there is a server side problem |
| errorAjax | An Ajax error occurred. | The error message if there is an Ajax problem |
| errorPosition | above | The 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.'
});