Error message pushing the form fields down on the web page

When a field isn't filled an error message appears and when it does, it pushes the other fields down and the form is expanded. The form changing sizes messes up my website, since it can't adapt to a new size.

Anyway, instead of pushing, it could hover over. How do I do this with CSS? Thanks!

Could you let us know how is the form embedded on your web page? Generally, the height of the form will be automatically adjusted when the form is embedded using default javascript embed method.

You may also try embedding the form using iframe embed method. Please provide us with the web page URL where the form is embedded so that we can take a look and assist you further.

Thank you! 

I use Wix to build my websites and although the form adjusts, the website page does not.
I tried both javascrip and iframe embed method.

Só is it possible to do the hover thing? :)

There are methods to embed the form as a lightbox or feedback button. Since you are using Wix, it is recommended to use iframe embed method to avoid any conflicts with the other scripts. You may also use the direct link to display the form on the web page instead of iframe.

You'll also need to enlarge the frame of HTML widget on the web page to fit the form correctly. Please give it a try and let us know how it goes. If you are still experiencing any issue, please get back to us with the web page URL where the form is embedded so that we can take a look.

Thank you! 

Like I said Kiran, Wix websites do not automatically adjust, they simply won't, no matter what. It's not an error or anything, they are just build that way. I have already tried embedding as an Iframe and as a web page. I already contacted there support. The only changes I can make is with Jotform.

Enlarging the Html widget is a solution, but one I do not wish to use if possible, since it leaves a awkward and big blank gap in my page.

I'm almost giving up on this, but could you please take a look at this and see if it is possible? Thanks! :)

Enter the link below, if you would, and press submit without filling in. You will see the error message just hover over the field. It's a good example. Doesn't have to be exactly the same.

http://grainandmortar.com/contact/new-business/

The following css code make the error massage disappears, hence may be it serves for your problem.

.form-error-message {

display: none;

}

This would be a partial solution for your design problem.

I hope this helps for now.

Cheeers :)

You may try changing the error displaying style from the Form designer. Please see the screencast below that can help you with this.

Alternatively, you may try the solution provided by @sevkiyontem also by injecting the CSS code to hide the error message only.

Let us know if you need any further assistance. We will be happy to assist.  We will be happy to help.