What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    The message box covers my 'submit' button

    Asked by BloodBrother on May 13, 2013 at 12:11 PM

    The message box on my saved form shows the submit button.  I've had users write and say there is no submit button.  The attached screen shot shows this.  If the user clicks and holds on the diagonal three lines in the lower right and reduces the size of the message box, the submit button is revealed.  Most people will not try that without a message telling them to do that. 

     

    How can I make the published form look like the saved form?

    Page URL:
    http://www.blood-bros.com/Contact_Us.html

    Screenshot
    message size no submit saved
  • Profile Image
    JotForm Support

    Answered by Morian on May 13, 2013 at 12:39 PM

    Hello! Have you tried to adjust the size of the frame that is holding the form in your site? It seems that the height of the frame is shorter than that of the form.

  • Profile Image

    Answered by glennlee on May 13, 2013 at 12:39 PM

    Hi,

    Thanks for contacting us!

    I checked your website and I cannot find the jotform codes. May I ask if you used the source code and modified it? You can also try adjust the div height where your form is embedded.

    Regards,

  • Profile Image

    Answered by BloodBrother on May 13, 2013 at 12:44 PM

    GlenLee

     

    Here is the source code I copied and pasted into my form.

    <script type="text/javascript" src="//form.jotform.us/jsform/30984574346161"></script>

    I'm not sure how to adjust the div height.  When I click on the form as it appears and drag the form boundary down, the form appears the same.  It does not 'stretch'.

    Thanks

  • Profile Image

    Answered by BloodBrother on May 13, 2013 at 12:47 PM

    Here is a screen shot of the form in place with the code above.

  • Profile Image

    Answered by dinesh-it on May 13, 2013 at 12:49 PM

    Hi, From Seeing the source code of your website, I saw that you mentioned the height of the div tag for contac-us as 399px. change it to 519px. 

     

    Hope it will solve your problem.

    Source Code

    tell us, is that solved your problem or not.

     

    Thank You 

    Dinesh.

  • Profile Image
    JotForm Support

    Answered by Morian on May 13, 2013 at 12:53 PM

    Simply look for this snippet of code in your page :

    <div class="com-apple-iweb-widget-HTMLRegion" id="widget1" style="height: 399px; left: 179px; opacity: 1.00; position: absolute; top: 368px; width: 651px; z-index: 1; ">

     

    Increase the size of the height and that should solve the issue. =) 

  • Profile Image

    Answered by BloodBrother on May 13, 2013 at 12:56 PM

    Dear Dinesh,

    Do I change 399 to 519 by editing my jotform or in my webcreation app.  I use iWeb and the only code I see is this: <script type="text/javascript" src="//form.jotform.us/jsform/30984574346161"></script>

     

    When I try to change the size of the frame, the frame enlarges but the appearance of the form does not.  The form stays small inside the larger frame.

     

    Thank  you.

  • Profile Image

    Answered by dinesh-it on May 13, 2013 at 01:00 PM

    Hi again,

     

    You have to change the height of div tag in webcreation app.

    Can you tell whether you can able to edit or access /Contact_Us.html file?

  • Profile Image
    JotForm Support

    Answered by Morian on May 13, 2013 at 01:01 PM

    Hi BloodBrother. Your jotform is fine. It is that code in your webcreation app that you need to change, the height of the div in particular since the frame is too small for the form.

  • Profile Image

    Answered by BloodBrother on May 13, 2013 at 01:10 PM

    Dinesh,

    I'm not sure how to access the file /Contact_Us.html

    When I click on the form in iWeb, an HTML snippet box appears above, but the only code that appears is <script type="text/javascript" src="//form.jotform.us/jsform/30984574346161"></script>

     

    Changing the div height does not affect the appearing of the actual form, only the frame that surrounds the form.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Morian on May 13, 2013 at 01:18 PM


    "When I try to change the size of the frame, the frame enlarges but the appearance of the form does not.

    That is it! Just change the size of the frame, which as you said you could do, and don't mind the appearance of the form. The form's size is perfect as it is. It is the frame that needs to be enlarged, its height in particular.  

  • Profile Image

    Answered by dinesh-it on May 13, 2013 at 01:22 PM

    Hi again sir,

     

    When I tried to change the height to 519px, It solved the problem. Here is the snippet.

     

    result

     

    But You must need to edit this div tag height to solve the problem sir.

    Thank you.

    Dinesh. 

  • Profile Image

    Answered by dinesh-it on May 13, 2013 at 01:30 PM

    Hi BloodBrother,

    I found an another way to solve your problem (getting submit button)

    Are you able to edit the iframe properties, if yes there you can see an attribute called 

    scrolling="no"

    change this to "yes"

    the iframe tag will be look like this

    <iframe id="widget1-frame" src=".//Contact_Us_files/widget1_markup.html" frameborder="0" style="width: 100%; height: 100%;" scrolling="yes" marginheight="0" marginwidth="0" allowtransparency="true">&amp;amp;lt;/frame&amp;amp;gt;</iframe>

     

    It will solve your problem by simply adding a scrollbar, so that the form now can be scroll down to see the submit button.

     

    This is just an another way that I found. 

    Are you now able to solve the problem?

    Thank you sir.

  • Profile Image

    Answered by BloodBrother on May 13, 2013 at 01:44 PM

    Dinesh,

     

    I am sorry to appear dense and vexing.

    The web application will not allow adding a scroll bar.

    Your previous solution, changing the snippet, how to I apply your solution?  In Jotform, I can only copy the source code, which is very very short, and paste that into my html snippet box.  There is not corresponding code to the one you supplied for me to modify.

    Thank you for your patience.

  • Profile Image

    Answered by dinesh-it on May 13, 2013 at 02:01 PM

    No Problem sir, I am eager to help you.

    But actually the problem is not with the jotform sir, it is with webcreation app.

    Ok let we try a very simple way Reducing the form size.

     

    Why cant you reduce the size of the text area of message box.

    row size

     

    Your Message box row size is 6 reduce it to 3. So that total size of the form will be reduced.

    Then reduce the spacing between the questions

    By Selecting "setup & Embed" tab then select "field styles" and reduce the space as shown below.

     

    question space


    This is not the Good Way, But Since you are unable to edit the source code, this is the solution I can suggest.

    Hope this will Solve your Problem sir.

    Feel Free to ask for further assistance.

    Thank You.

    Dinesh.

  • Profile Image

    Answered by BloodBrother on May 13, 2013 at 02:26 PM

    Dear Dinesh,

    A month ago, I created a form and this was the code supplied.  I back up my old form which is why I have this code.

    <script src="//cdn.jotfor.ms/static/jotform.js?3.1.101" type="text/javascript"></script>
    <script type="text/javascript">
       JotForm.init(function(){
          $('input_4').hint('ex: myname@example.com');
       });
    </script>
    <link target="_blank" href="http://cdn.jotfor.ms/static/formCss.css?3.1.101" rel="nofollow" rel="stylesheet" type="text/css" />
    <link type="text/css" media="print" rel="stylesheet" target="_blank" href="http://cdn.jotfor.ms/css/printForm.css?3.1.101" rel="nofollow" />
    <style type="text/css">
        .form-label{
            width:150px !important;
        }
        .form-label-left{
            width:150px !important;
        }
        .form-line{
            padding-top:12px;
            padding-bottom:12px;
        }
        .form-label-right{
            width:150px !important;
        }
        .form-all{
            width:650px;
            background:url("http://jotform.us/images/styles/style4_2_bg.gif") repeat-x scroll center top rgb(54, 53, 53);
            color:white !important;
            font-family:'Trebuchet MS';
            font-size:12px;
        }
        .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{
            color:white;
        }

    </style>

    <form class="jotform-form" action="http://submit.jotform.us/submit/30984574346161/" method="post" name="form_30984574346161" id="30984574346161" accept-charset="utf-8">
      <input type="hidden" name="formID" value="30984574346161" />
      <div class="form-all">
        <ul class="form-section">
          <li id="cid_1" class="form-input-wide">
            <div class="form-header-group">
              <h2 id="header_1" class="form-header">
                Make Contact!
              </h2>
            </div>
          </li>
          <li class="form-line" id="id_3">
            <label class="form-label-left" id="label_3" for="input_3">
              Full Name<span class="form-required">*</span>
            </label>
            <div id="cid_3" class="form-input"><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="text" size="10" name="q3_fullName3[first]" id="first_3" />
                <label class="form-sub-label" for="first_3" id="sublabel_first"> First Name </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="text" size="15" name="q3_fullName3[last]" id="last_3" />
                <label class="form-sub-label" for="last_3" id="sublabel_last"> Last Name </label></span>
            </div>
          </li>
          <li class="form-line" id="id_6">
            <label class="form-label-left" id="label_6" for="input_6"> Organization </label>
            <div id="cid_6" class="form-input">
              <input type="text" class=" form-textbox" id="input_6" name="q6_organization6" size="20" />
            </div>
          </li>
          <li class="form-line" id="id_4">
            <label class="form-label-left" id="label_4" for="input_4">
              E-mail<span class="form-required">*</span>
            </label>
            <div id="cid_4" class="form-input">
              <input type="email" class=" form-textbox validate[required, Email]" id="input_4" name="q4_email4" size="30" />
            </div>
          </li>
          <li class="form-line" id="id_5">
            <label class="form-label-left" id="label_5" for="input_5"> Subject </label>
            <div id="cid_5" class="form-input">
              <input type="text" class=" form-textbox" id="input_5" name="q5_subject" size="20" />
            </div>
          </li>
          <li class="form-line" id="id_7">
            <label class="form-label-left" id="label_7" for="input_7"> Message </label>
            <div id="cid_7" class="form-input">
              <textarea id="input_7" class="form-textarea" name="q7_message" cols="40" rows="6"></textarea>
            </div>
          </li>
          <li class="form-line" id="id_2">
            <div id="cid_2" class="form-input-wide">
              <div style="margin-left:156px" class="form-buttons-wrapper">
                <button id="input_2" type="submit" class="form-submit-button">
                  Submit
                </button>
              </div>
            </div>
          </li>
          <li style="display:none">
            Should be Empty:
            <input type="text" name="website" value="" />
          </li>
        </ul>
      </div>
      <input type="hidden" id="simple_spc" name="simple_spc" value="30984574346161" />
      <script type="text/javascript">
      document.getElementById("si" + "mple" + "_spc").value = "30984574346161-30984574346161";
      </script>
    </form>

     

    When I changed my form a week ago, this is code supplied by jotform which i copied into my  webbuilder app.

    <script type="text/javascript" src="//form.jotform.us/jsform/30984574346161"></script>

     

    You can see that it's quite different. But since I can see the 'old' code, is there a way to change in the html snippet box of the webbuilder app to achieve the desired change?

     

    Thank you

  • Profile Image

    Answered by dinesh-it on May 13, 2013 at 02:50 PM

    Hello Sir,

    Thank you for providing this much detail.

    But, Unfortunately, we cannot accomplish this using JotForm Code sir, You must have to edit the code of that html page that is created by webcreation app.

     

    But As you asked about Source code, Even now you can able to download the full source code of your form. as shown below.

     

    ebeded code

     

    source code

     

    download source code

     

    But This is nothig related to problem you stated sir, just for the shake I tell you that you can also download the full source code in this way.

     

    Sorry to say this sir, unfortunately we cannot able to solve the problem you stated using jotform. Since the problem is not with the form.

    You need to contact your webcreation app provider (iWeb) support to solve this issue.

    Feel free to ask for further clarification.

    Thank you.

  • Profile Image

    Answered by BloodBrother on May 13, 2013 at 03:37 PM

    Dinesh,

    Thank you for you quick responses.  I will carry on from here.  You've narrowed the focus of my inquiry and I'll see what I can do.

  • Profile Image

    Answered by dinesh-it on May 13, 2013 at 03:40 PM

    Thank you sir,

    Inform us once your problem solved.

    Feel Free to ask if any further clarification needed regarding JotForm.

    -Dinesh.

  • Profile Image

    Answered by jeanettebmz on May 13, 2013 at 11:27 PM

    I have noted that you embedded the source code rather than the javascript or iFrame version. Did you do this? or was someone else did this for you?

    All you would have to do is to remove the source code (the large one) then embed the iframe version or the javascript version (click on Embed)