How can I prevent the automatic scroll to the first input with an error when the submit button is clicked?

Adelina_adelina

Asked on April 2, 2020 at 7:29 AM

I have embedded a form in my webpage, which looks like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/punycode/1.4.1/punycode.min.js"></script>

<script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>

<script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.16620" type="text/javascript"></script>

<script type="text/javascript">

JotForm.setConditions([{ "action": [{ "id": "action_1585822182854", "field": "4", "visibility": "Require", "isError": false }], "id": "1585822201522", "index": "0", "link": "Any", "priority": "0", "terms": [{ "id": "term_1585822182854", "field": "4", "operator": "isEmpty", "value": "", "isError": false }], "type": "require" }, { "action": [{ "id": "action_1585822119041", "field": "3", "visibility": "Require", "isError": false }], "id": "1585822159837", "index": "1", "link": "Any", "priority": "1", "terms": [{ "id": "term_1585822119041", "field": "3", "operator": "isEmpty", "value": "", "isError": false }], "type": "require" }]);

JotForm.init(function () {

setTimeout(function () {

$('input_3').hint('Email');

}, 20);

if (window.JotForm && JotForm.accessible) $('input_4').setAttribute('tabindex', 0);

setTimeout(function () {

$('input_4').hint('First Name');

}, 20);

if (window.JotForm && JotForm.accessible) $('input_5').setAttribute('tabindex', 0);

setTimeout(function () {

$('input_5').hint('Last Name');

}, 20);

JotForm.newDefaultTheme = false;

JotForm.alterTexts(undefined);

JotForm.clearFieldOnHide = "disable";

JotForm.submitError = "jumpToFirstError";

/*INIT-END*/

});

JotForm.prepareCalculationsOnTheFly([null, null, { "name": "submit2", "qid": "2", "text": "GET YOUR FREE EBOOK", "type": "control_button" }, { "description": "", "name": "input3", "qid": "3", "subLabel": "", "text": "", "type": "control_email" }, { "description": "", "name": "input4", "qid": "4", "subLabel": "", "text": "", "type": "control_textbox" }, { "description": "", "name": "input5", "qid": "5", "subLabel": "", "text": "", "type": "control_textbox" }]);

setTimeout(function () {

JotForm.paymentExtrasOnTheFly([null, null, { "name": "submit2", "qid": "2", "text": "GET YOUR FREE EBOOK", "type": "control_button" }, { "description": "", "name": "input3", "qid": "3", "subLabel": "", "text": "", "type": "control_email" }, { "description": "", "name": "input4", "qid": "4", "subLabel": "", "text": "", "type": "control_textbox" }, { "description": "", "name": "input5", "qid": "5", "subLabel": "", "text": "", "type": "control_textbox" }]);

}, 20);

</script>

<div class="ebook-form">

<form class="" action="https://submit.jotformeu.com/submit/200921935327050/" method="post" name="form_200921935327050"

id="200921935327050" accept-charset="utf-8" autocomplete="on">

<input type="hidden" name="formID" value="200921935327050" />

<input type="hidden" id="JWTContainer" value="" />

<input type="hidden" id="cardinalOrderNumber" value="" />

<ul class="form-section page-section ebook-form__list">

<li class="form-line ebook-form__list-item" data-type="control_email" id="id_3">

<div id="cid_3" class="ebook-form__field">

<input type="email" id="input_3" name="q3_input3" class=" validate[Email] ebook-form__input" size="30"

value="" placeholder="Email" data-component="email" aria-labelledby="label_3" />

</div>

</li>

<li class="form-line ebook-form__list-item" data-type="control_textbox" id="id_4">

<div id="cid_4" class="ebook-form__field">

<input type="text" id="input_4" name="q4_input4" data-type="input-textbox" class="ebook-form__input" size="30"

value="" placeholder="First Name" data-component="textbox" aria-labelledby="label_4" />

</div>

</li>

<li class="form-line ebook-form__list-item" data-type="control_textbox" id="id_5">

<div id="cid_5" class="ebook-form__field">

<input type="text" id="input_5" name="q5_input5" data-type="input-textbox" class="ebook-form__input" size="30"

value="" placeholder="Last Name" data-component="textbox" aria-labelledby="label_5" />

</div>

</li>

<li class="form-line ebook-form__list-item" data-type="control_button" id="id_2">

<div id="cid_2" class="ebook-form__field">

<div style="text-align:left" data-align="left" class="form-buttons-wrapper">

<button id="input_2" type="submit" class="form-submit-button ebook-form__submit" data-component="button"

data-content="">

GET YOUR FREE EBOOK

</button>

</div>

</div>

</li>

</ul>

<input type="hidden" id="simple_spc" name="simple_spc" value="200921935327050" />

<script type="text/javascript">

document.getElementById("si" + "mple" + "_spc").value = "200921935327050-200921935327050";

</script>

</form>

</div>

<script type="text/javascript">JotForm.forwardToEu = true;</script>

and I would like to prevent the default behaviour when the form is submitted with errors, which is that the page is scrolled to the first input field with an error. I want to prevent this behaviour. Is there a way to do it within Jotform itself, or do I need to hack it and prevent it on my side?

Due to the fixed header (as shown in the screenshot), it looks very poor.
Kiran Support Team Lead

Replied on April 2, 2020 at 9:59 AM

It seems that you have embedded the form using full source code on your web page. I understand that the form is scrolling to the first empty field when Submit button is clicked without filling the form. This is the default behavior of the required field and unfortunately, it is not possible to change it.

Thanks!