Submit button acting strangely

The submit button is acting strangely on some forms

This is one of them https://form.jotformpro.com/71371257579970 

The Submit appears not to do anything but jump up for a split second and does not submit the form but if you click on it and hold the left mouse down and go up to the new button position and as the "hand" appears let go Left Mouse it submits.

Any ideas what has happened?

Willy Scott

Hello,

The CSS code that you injected to align the Submit button and Back button is causing the issue. Please remove this code from CSS panel on the Designer:

Instead of this, please make your back button to align itself to the submit button. Here is the code for it:

button#form-pagebreak-back_106 {

    position: absolute;

    bottom: 85px!important;

}

Here is how it works:

I hope this answer helps. Please don't hesitate to contact us for your further queries.

All the best!

That is fine, thanks for your help.

Where does the "_106" come from is it always the same on each form?

I had always used the re-positioning of the Back button before has something changed ?

Regards Willy Scott

The 'form-pagebreak-back_106' is the ID of the specific Back button, so it will not be the same on different forms. The IDs can be checked using browser developer tools.

In general, it is recommended to use default styles to avoid layout issues in different browsers and mobile devices.

Thank you.

OK sussed that out and I note your comment on default styles.

Thanks again

Willy Scott 

With Reference to the above problem I seem to get a warning that something is not right in the CSS I injected into another form, see screen shot and explanation marks on the left margin.

Can you explain why this is?

https://form.jotformpro.com/63331874300954

.

The yellow indicator is more like a suggestion, hint or reminder, but not necessarily errors.

The first yellow indicator tells that the rule is empty.

The second one says that the selector is overqualified since you can just use the #form-pagebreak-back_11 without the element, button.

And the last yellow indicator indicates the use of !important.

If you go to the Advanced Designer page of your form and you hover your cursor on the line number of the Advance CSS Editor, you will see what the indicator means.

I hope this helps. If you have any further questions or concerns, please feel free to contact us again anytime.