Form being cut when Submit Button is clicked.

  • Profile Image
    a2016509
    Asked on August 03, 2015 at 05:41 AM

    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.

  • Profile Image
    Mike_G
    Answered on August 03, 2015 at 10:41 AM

    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. 

  • Profile Image
    a2016509
    Answered on August 03, 2015 at 10:49 AM

    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>

     

  • Profile Image
    Mike_G
    Answered on August 03, 2015 at 12:10 PM

    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.

  • Profile Image
    a2016509
    Answered on August 03, 2015 at 12:19 PM

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

     

    where I can edit "larger form"?

  • Profile Image
    Mike_G
    Answered on August 03, 2015 at 12:54 PM

    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" onload="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.

  • Profile Image
    a2016509
    Answered on August 04, 2015 at 03:13 AM

    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?

  • Profile Image
    Chriistian
    Answered on August 04, 2015 at 08:16 AM

    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.