Form being cut when Submit Button is clicked.

Form normal size:

1) After pressing the "send" - a form resize (problem 1):

2) and if the required field is not filled, the form is broken (problem 2):

How can we solve these problems? to shape in both cases remain in their size and color.

I would like to apologize for the inconvenience this have caused you. However, I can't seem to find the Form you are referring to. Can you help us by providing the Form URL of the form you're working on so we may be able to check what's causing this issue, please? Also, we would like to know if the form is embedded on a website. If it is, which embed code did you use?

We will wait for you response. Thank you. 

this form: https://www.jotform.com//?formID=42660778519466

and this: https://www.jotform.com//?formID=52139170427452

this site http://www.roughngems.com/home-rus.html

code: <script type="text/javascript" src="//form.jotform.me/jsform/52139170427452"></script>

Thank you for the additional information you have provided. 

I have checked your website, and I've noticed that the space allotted for the form might be smaller than the size of the form itself.

When you use the normal Embed Script: 

<script type="text/javascript" src="//form.jotform.me/jsform/52139170427452"></script>,

your form is placed within the <form> element which is a Block-level element. A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). That is why it is being cut-off.

I would recommend you try using the <iframe> code instead when embedding your form, which you can, by the way, get from the Embed Form Tool also,

The <iframe> tag specifies an in-line frame. An Inline element does not start on a new line and only takes up as much width as necessary.

References: http://www.w3schools.com/html/html_blocks.asp and http://www.w3schools.com/tags/tag_iframe.asp

I hope this helps. Please feel free to get back to us if you're still having some issues after using Iframe so we may help you further. Thank you.

why a small form, under certain conditions, change the size (becomes large)?

where I can edit "larger form"?

What I mean is that the <div> where your form is contained is smaller that the size of your form: 

Size of your Form width.

Another thing that is noticeable is the width of your TextBox, it is 631px. 

That is why I am suggesting you use the IFrame. Which you can also adjust its width and height to your preference.

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.com/form/42660778519466" frameborder="0" style="width:100%; height:514px; border:none;" scrolling="no"></iframe>

I hope this helps. If you need any further assistance, please feel free to let us know and we will be glad to help you. Thank you.

I see.

but I do not understand why the editor of a small-sized form:

and when I integrated via IFrame it strongly increases the vertical:

how I can see and edit these hidden items that appear when you press the button (send), or empty required fields?

These hidden elements increase the form, I want to find them and edit or delete.

possible?

Hi,

What my colleague is referring to is that the form-width of your form is smaller than the width of your textbox. The Email text box overlaps to the form-width of your form. See screenshot below.

Regarding your concern on the hidden items that appear when you submit the form, are you referring to this fields:

If so, to remove those fields, you can inject the custom CSS code below to your form:

.form-button-error {

    display: none !important;

}

.form-error-message {

    display: none !important;

}

To inject custom CSS code in your form, just follow the instruction provided on this guide: How to Inject Custom CSS Codes.

Do let us know if you need further assistance.

Regards.