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

    Problem form in dreamweaver

    Asked by windattivazioni on August 30, 2012 at 04:24 PM

    Hi, I have created a web page in dreamweaver with a script that makes the background uniform for all types of resolution of the visitor of the site, adding my jotform the form does not work because invalid data entered cmq and sends the data without any insertion. thanks

    Page URL:
    http://windattivazioni.altervista.org

  • Profile Image

    Answered by pinoytech on August 30, 2012 at 04:35 PM

    Hi,

    Sorry for any inconvenience that may have caused. Regarding on this issue, may I suggest you to re-embed your form code in to your website using iFrame.

    Thank you!

  • Profile Image

    Answered by windattivazioni on August 30, 2012 at 04:42 PM

    Hi ,

    thank you for the 'help that you're giving me could you maybe tell me how I can manage the position of the form on my paginaweb, I'm sorry they are not very practical this is the first site with a form for me, could you explain how to program the frame? or center the form on the web page in dreamweaver?
    thanks again

  • Profile Image

    Answered by fxr on August 30, 2012 at 06:19 PM

    We may be able to help position your form correctly, but we need to see it first. 

    The website URL given is blank, would it be possible to upload the webpage you are working on with the form embedded (even if its just to a test page) and we will see if we can offer any advice?

  • Profile Image

    Answered by windattivazioni on August 30, 2012 at 08:23 PM

    Hi,
    I'll post the source code of my web page hoping for a solution, I think the script to resize the background according to the different screen resolutions of visitors to the site prevents the jotform working, it does not perform validation of input data. Thank you very much for your help!

     

    url: http://windattivazioni.altervista.org

     

     

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Windattivazioni</title>
    </head>
    <script src="fixedbackground.js" type="text/javascript"></script>
    <body onload="fixedBackground('background.png')">
    <script src="http://max.jotfor.ms/min/g=jotform?3.0.3882" type="text/javascript"></script>
    <script type="text/javascript">
       JotForm.init(function(){
          JotForm.description('input_8', 'Inserisci il tuo nome');
          JotForm.description('input_10', 'Inserisci il tuo indirizzo email<br />');
          JotForm.description('input_9', 'Inserisci un recapito telefonico<br />');
          JotForm.alterTexts({"alphabetic":"This field can only contain letters","alphanumeric":"This field can only contain letters and numbers.","confirmClearForm":"Are you sure you want to clear the form","confirmEmail":"E-mail does not match","email":"Enter a valid e-mail address","incompleteFields":"Please complete required (*) fields.","lessThan":"Your score should be less than","numeric":"This field can only contain numeric values","pleaseWait":"Please wait...","required":"This field is required.","uploadExtensions":"You can only upload following files:","uploadFilesize":"File size cannot be bigger than:"});
       });
    </script>
    <link target="_blank" href="http://max.jotfor.ms/min/g=formCss?3.0.3882" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .form-label{
            width:150px !important;
        }
        .form-label-left{
            width:150px !important;
        }
        .form-line{
            padding-top:10px;
            padding-bottom:10px;
        }
        .form-label-right{
            width:150px !important;
        }
        .form-all{
            width:285px;
            background:#DBD3D3;
            color:#555 !important;
            font-family:'Verdana';
            font-size:12px;
        }
        .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{
            color:#969696;
        }

        /* Injected CSS Code */
    /*--submit button font--*/
    .form-submit-button{
    font-family: verdana !important;
    margin-bottom:10px !important;
    }
    /*--textbox, textarea style--*/
    .form-textbox, .form-textarea {
    font-family: verdana !important;
    -webkit-transition-property: -webkit-box-shadow, background;
    -webkit-transition-duration: 0.25s;
    padding: 5px;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    border-top: 1px solid #C0C0C0;
    -moz-box-shadow: 0px 0px 2px #000;
    -webkit-box-shadow: 0px 0px 2px #000;
    margin-bottom: 10px;
    background: #fff;
    width: 230px;
    }
    .form-textbox:hover, .form-textarea:hover{
    -webkit-box-shadow: 0px 0px 4px #000;
    }
    /*--label style--*/
    .form-label-top{
    font-weight:bold;
    color: #969696 !important;
    }
    /*--form bg style--*/
    .form-all {
    padding-top:0px !important;
    padding-left:20px;
    border: 1px solid #C0C0C0;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    background: -moz-linear-gradient(9% 25% 90deg,#E0E0E0, #FFF);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E0E0E0), to(#FFF));
    margin:5px;
    -moz-box-shadow: -1px 1px 10px #C0C0C0;
    -webkit-box-shadow: -1px 1px 10px #C0C0C0;
    }.form-html {
    padding-left: 0px !important;
    }
    /*--move error below submit button--*/
    .form-button-error{
    display:block;
    }
    /*--remove error button--*/
    .form-error-message {
    display: none !important;
    }
    .form-line-error {
    background:none repeat scroll 0 0;
    }
    /*--remove focus border--*/
    .form-textbox:focus, .form-textarea:focus{
    outline:none;
    }
    /*--fix captcha--*/
    .form-captcha{
    width: 229px !important;
    max-width: 229px !important;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    border-top: 1px solid #C0C0C0;
    -moz-box-shadow: 0px 0px 2px #000;
    -webkit-box-shadow: 0px 0px 2px #000;
    border-radius:0px !important;
    -webkit-border-radius:0px !important;
    -moz-border-radius:0px !important;
    font-family: verdana !important;
    -webkit-transition-property: -webkit-box-shadow, background;
    -webkit-transition-duration: 0.25s;
    }
    .form-captcha:hover{
    -webkit-box-shadow: 0px 0px 4px #000;
    border-bottom: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-top: 1px solid #C0C0C0 !important;}
    .form-captcha div img{
    margin-left:10px;
    }
    .form-captcha div input{
    width: 139px !important;
    }
    /*--add red border on error--*/
    .form-validation-error {
    border: 1px solid red !important;
    }
    .form-all {
    float: right !important;
    }
        /* Injected CSS Code */
    </style>

    <link type="text/css" rel="stylesheet" target="_blank" href="http://jotformeu.com/css/styles/buttons/form-submit-button-light.css?3.0.3882"/>
    <form class="jotform-form" action="http://submit.jotformeu.com/submit/22397742414355/" method="post" name="form_22397742414355" id="22397742414355" accept-charset="utf-8">
      <input type="hidden" name="formID" value="22397742414355" />
      <div class="form-all">
        <ul class="form-section">
          <li class="form-line" id="id_5">
            <div id="cid_5" class="form-input-wide">
              <div id="text_5" class="form-html">
                <p style="text-align: center;"><span style="color: white; font-size: large;"><strong><span style="color: #e88428;">Richiedi Informazioni</span>
                      <br />
                    </strong></span>
                </p>
              </div>
            </div>
          </li>
          <li class="form-line" id="id_8">
            <label class="form-label-top" id="label_8" for="input_8">
              Nome<span class="form-required">*</span>
            </label>
            <div id="cid_8" class="form-input-wide"><span class="form-sub-label-container"><input type="text" class="form-textbox validate[required, Alphabetic]" id="input_8" name="q8_email8" size="20" maxlength="20" />
                <label class="form-sub-label" for="input_8"> Es: Mario </label></span>
            </div>
          </li>
          <li class="form-line" id="id_10">
            <label class="form-label-top" id="label_10" for="input_10">
              Indirizzo Email<span class="form-required">*</span>
            </label>
            <div id="cid_10" class="form-input-wide"><span class="form-sub-label-container"><input type="text" class="form-textbox validate[required, email]" id="input_10" name="q10_email10" size="20" maxlength="20" />
                <label class="form-sub-label" for="input_10"> Es: tuoindirzzo@esempio.com </label></span>
            </div>
          </li>
          <li class="form-line" id="id_9">
            <label class="form-label-top" id="label_9" for="input_9">
              Recapito Telefonico<span class="form-required">*</span>
            </label>
            <div id="cid_9" class="form-input-wide">
              <input type="text" class="form-textbox validate[required, Numerico]" id="input_9" name="q9_email9" size="20" maxlength="20" />
            </div>
          </li>
          <li class="form-line" id="id_11">
            <label class="form-label-top" id="label_11" for="input_11"> *Autorizzo al trattamento dei miei dati , ai sensi della legge 196/2003. </label>
            <div id="cid_11" class="form-input-wide">
              <div class="form-single-column"><span class="form-checkbox-item" style="clear:left;"><input type="checkbox" class="form-checkbox" id="input_11_0" name="q11_autorizzoAl[]" checked="checked" value="" />
                  <label for="input_11_0">  </label></span><span class="clearfix"></span>
              </div>
            </div>
          </li>
          <li class="form-line" id="id_2">
            <div id="cid_2" class="form-input-wide">
              <div style="text-align:center" class="form-buttons-wrapper">
                <button id="input_2" type="submit" class="form-submit-button form-submit-button-light">
                  Invia
                </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="22397742414355" />
      <script type="text/javascript">
      document.getElementById("si" + "mple" + "_spc").value = "22397742414355-22397742414355";
      </script>
    </form>
    </html>

  • Profile Image
    JotForm Support

    Answered by jonathan on August 30, 2012 at 09:59 PM

    @windattivazioni

    Hi, first off, I would like to tell you that I checked the form on the website using the URL you provided.

    I was able to fill-up the form and submit it, and got the thank you page. This was the form http://www.jotformeu.com/form/22397742414355

    Since you are using dreamweaver, you may want to check this JotForm guide first -Adding-Form-to-Dreamweaver .

    To get instead the iframe code of the form to be embedded, please check this one -How-to-get-your-Form-s-Iframe-Code .

    In the guide for dreamweaver, in Step #3, it refers to the script code. You can replace that code with the iframe code, and follow on the next steps in dreamweaver guide.

    Please inform us if you need more assistance on this, and we will be more than willing to assist you.

    Thanks.

     

  • Profile Image

    Answered by windattivazioni on August 31, 2012 at 05:25 AM

    Hi, I modified the page dremweaver but I did not get the desired result, the source code of my web page in dreamweaver is as follows.

     


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Windattivazioni</title>
    </head>
    <script src="fixedbackground.js" type="text/javascript"></script>
    <body onload="fixedBackground('background.png')">
    <iframe allowtransparency="true" src="http://form.jotformeu.com/form/22397742414355" frameborder="0" style="width:100%; height:490px; border:none;" scrolling="no">
    </iframe>
    </html>
     

    I hope, please help me to modify the source code so that the form is isolated from the background you remember the 'address of my web page:
    url: http://windattivazioni.altervista.org

    Thank you very much for your help you are fantastic!

     

  • Profile Image

    Answered by fxr on August 31, 2012 at 03:23 PM

    Put the iframe in a DIV and center div horizontally and vertically:

    This upcode would work:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Windattivazioni</title>

    </head>

    <script src="fixedbackground.js" type="text/javascript"></script>

    <body onload="fixedBackground('background2.png')">

     

    <div style="position: absolute; top: 50%; left: 50%; width: 320px; height: 500px; margin-top: -250px; margin-left: -160px;">

    <iframe allowtransparency="true" src="//form.jotformeu.com/form/22397742414355" frameborder="0"align="right"style="width:318px; height:493px; border:none;" scrolling="no"></iframe>

    </div>

     

    </html>