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

    I want include this jotform in my website, but can´t center it

    Asked by tascalusa on December 10, 2013 at 01:27 PM

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Contatos : Tasca Lusa</title>
    <link rel="stylesheet" target="_blank" href="stylesheet/stylesheet.css" type="text/css" media="screen" />
    <link target="_blank" href='http://fonts.googleapis.com/css?family=Lobster' rel="nofollow noopener" rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" type="text/css" target="_blank" href="stylesheet/jquery-ui-1.8.9.custom.css" />
    <!-- jQuery and Custom scripts -->
    <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.cycle.lite.1.0.min.js" type="text/javascript"></script>
    <script src="js/custom_scripts.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
    <script type="text/javascript" src="js/tabs.js"></script>
    <!-- Tipsy -->
    <script src="js/tipsy/jquery.tipsy.js" type="text/javascript"></script>
    <link target="_blank" href="js/tipsy/css.tipsy.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.tweet.js" type="text/javascript"></script>
    <link target="_blank" href="js/jquery.tweet.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <!-- MAIN WRAPPER -->
    <div id="container">
     
      <!-- SIDEFEATURES -->
      <div id="sidefeatures">
        <ul>
          <li class="side_cart"><span class="icon">Shopping Cart</span>
            <div id="cart">
              <div class="heading">
                <h4>Shopping Cart</h4>
                <span id="cart_total">3 item(s) - $1099.99</span> </div>
              <div class="content">
                <table class="cart">
                  <tbody>
                    <tr>
                      <td class="image"><a target="_blank" href="#"><img alt="Spicylicious" src="image/cart_pic1.jpg"/></a></td>
                      <td class="name"><a target="_blank" href="#">Product name 1</a>
                        <div> </div></td>
                      <td class="quantity">x&nbsp;1</td>
                      <td class="total">$117.50</td>
                      <td class="remove"><img title="Remove" alt="Remove" src="image/close.png"/></td>
                    </tr>
                    <tr>
                      <td class="image"><a target="_blank" href="#"><img title="Palm Treo Pro" alt="Palm Treo Pro" src="image/cart_pic2.jpg"/></a></td>
                      <td class="name"><a target="_blank" href="#">Product name 2</a>
                        <div> </div></td>
                      <td class="quantity">x&nbsp;1</td>
                      <td class="total">$328.99</td>
                      <td class="remove"><img title="Remove" alt="Remove" src="image/close.png"/></td>
                    </tr>
                    <tr>
                      <td class="image"><a target="_blank" href="#"><img title="Canon EOS 5D" alt="Canon EOS 5D" src="image/cart_pic3.jpg"/></a></td>
                      <td class="name"><a target="_blank" href="#">Product name 3</a>
                        <div> - <small>Extra Cheese</small><br/>
                        </div></td>
                      <td class="quantity">x&nbsp;1</td>
                      <td class="total">$94.00</td>
                      <td class="remove"><img title="Remove" alt="Remove" src="image/close.png"/></td>
                    </tr>
                  </tbody>
                </table>
                <table class="total">
                  <tbody>
                    <tr>
                      <td align="right"><b>Sub-Total</b></td>
                      <td align="right">$459.99</td>
                    </tr>
                    <tr>
                      <td align="right"><b>VAT 17.5%</b></td>
                      <td align="right">$80.50</td>
                    </tr>
                    <tr>
                      <td align="right"><b>Total</b></td>
                      <td align="right">$540.49</td>
                    </tr>
                  </tbody>
                </table>
                <div class="checkout"><a class="button" target="_blank" href="checkout.html"><span>Checkout</span></a></div>
              </div>
            </div>
          </li>
          <li class="side_currency"><span class="icon">Currency</span>
            <div id="currency"> Currency <a target="_blank" href="#" title="Euro">€</a> <a target="_blank" href="#" title="Pound Sterling">£</a> <a title="US Dollar">$</a> </div>
          </li>
          <li class="side_lang"><span class="icon">Language</span>
            <div id="language"> Language <a target="_blank" href="#" title="English"><img src="image/gb.png" alt="Spicylicious store"/></a> <a target="_blank" href="#" title="Deutsch"><img src="image/de.png" alt="Spicylicious store"/></a> <a title="Bylgarski"><img src="image/bg.png" alt="Spicylicious store"/></a> </div>
          </li>
          <li class="side_search"><span class="icon">Search</span>
            <div id="search">
              <input type="text" onkeydown="this.style.color = '#000000';" onclick="this.value = '';" value="Search" name="filter_name"/>
              <a target="_blank" href="#" class="button-search"></a> </div>
          </li>
        </ul>
      </div>
      <!-- END OF SIDEFEATURES -->
     
      <!-- HEADER -->
     <div id="header">
        <div class="inner">
          <ul class="main_menu menu_left">
           
            <li><a target="_blank" href="about.html">Sobre Nós</a></li>
            <li class="warning"><a target="_blank" href="index.html">Início</a>
              <ul class="secondary">
                <li><a target="_blank" href="index2.html">Fotos Tasca Lusa</a></li>
                <ul class="secondary">
                <li><a target="_blank" href="index3.html">ESPECIAL NATAL</a></li>
                </ul>
              </ul>
            </li>
          </ul>
          <div id="logo"><a target="_blank" href="index.html"><img src="image/tascalogo.png" width="226" height="257" alt="Spicylicious store" /></a></div>
          <ul class="main_menu menu_right">
           
            <li><a target="_blank" href="contact.html">Contacte-nos</a></li>
          </ul>
        
          <div class="menu">
            <ul id="topnav">
              <li><a target="_blank" href="category.html">Bolinhos Bacalhau</a>
                <ul class="children">
                  <li><a target="_blank" href="">Bolinhos 4 uni - R$ 16,00</a></li>
                  <li><a target="_blank" href="">Bolinhos 6 uni - R$ 21,99</a><li>
                   <li><a target="_blank" href="">Bolinhos 12 uni - R$ 36,00</a><li>
                   </ul>
              </li>
              <li><a target="_blank" href="">Pratos Bacalhau</a>
                <ul class="children">
                  <li><a target="_blank" href="">Lombo Bacalhau</a>
                  <ul class="children2">
                      <li><a target="_blank" href="">Tasca Lusa - R$ 120,00</a></li>
                      <li><a target="_blank" href="">Zé do Pipo - R$ 110,00</a></li>
                      <li><a target="_blank" href="">Tasquinha- R$ 100,00</a></li>
                      </ul>
                  </li>
                  <li><a target="_blank" href="">Posta de Bacalhau</a>
                  <ul class="children2">
                      <li><a target="_blank" href="">Zé do Pipo - R$ 80,00</a></li>
                      <li><a target="_blank" href="">Tasquinha - R$ 75,00</a></li>
                      </ul>
                    </li>
                  <li><a target="_blank" href="">Desfiados</a>
                      <ul class="children2">
                      <li><a target="_blank" href="">Com Natas - R$ 70,00</a></li>
                      <li><a target="_blank" href="">Ao Gomes de Sá - R$ 70,00</a></li>
                      </ul>
                     </li>
                   <li><a target="_blank" href="">Sardinha - R$ 45,00</a></li>
                 </ul>
                </li>
              <li><a target="_blank" href="">Carnes</a>
                <ul class="children">
                  <li><a target="_blank" href="">Bitoque - R$ 30,00</a></li>
                </ul>
                  <li><a target="_blank" href="">Cabrito</a>
                    <ul class="children">
                      <li><a target="_blank" href="">Pernil de Cabrito - R$ 140,00</a></li>
                      <li><a target="_blank" href="">Aos Pedacinhos - R$ 100,00</a></li>
                      <li><a target="_blank" href="">Costelinha - R$ 80,00</a></li>
                      </ul>
                  </li>
                 <li><a target="_blank" href="category.html">Vinhos</a>
                  <ul class="children">
                      <li><a target="_blank" href="">Tinto da Casa- R$ 35,00</a></li>
                      </ul>
                    </li>
              <li><a target="_blank" href="c">Bebidas</a></li>
              <li><a target="_blank" href="">Sobremesas</a>
              <ul class="children">
                      <li><a target="_blank" href="">Doce Surpresa- R$ 8,00</a></li>
                      </ul>
                    </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- END OF HEADER -->
     
      <!-- CONTENT -->
      <div id="content_holder" class="fixed">
        <div class="inner">
          <div class="breadcrumb"> <a target="_blank" href="index.html">Início</a> » Contatos </div>
          <h2 class="heading-title"><span>Contatos</span></h2>
         
          <!-- LEFT COLUMN -->
          <div id="column-left">
            <div class="box">
              <h3 class="heading-title"><span>Nossa Localização</span></h3>
              <div class="box-content box-contact-details">
                <ul>
                  <li class="address"> <span>Morada:</span><br />
                    Restaurante Tasca Lusa<br />
                    Rua Diógenes Malacarne nº 110  Praia da Costa<br />
                    29101-210 Vila Velha<br>
                    Próximo à Padaria Monte Líbano </li>
                  <li class="phone"> <span>Telefone:</span><br />
                    (27) 3208 1705 | (27) 99959 8857</li>
                  <li class="fax"> <span>Email</span><br />
                    tascalusa.br@gmail.com</li>
                </ul>
              </div>
            </div>
          </div>
          <!-- END OF LEFT COLUMN -->
                                         
         
          <div id="content" class="content-column-left">
            <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com.br/maps?ie=UTF8&amp;q=Restaurante+Tasca+Lusa&amp;fb=1&amp;gl=br&amp;hq=tasca+lusa&amp;hnear=0xb81635625b6987:0x7bc9ac2d2fe35a1c,Vila+Velha+-+ES&amp;cid=0,0,7868658380958705785&amp;t=m&amp;iwloc=A&amp;ll=-20.33022,-40.280414&amp;spn=0.006295,0.006295&amp;output=embed"></iframe><br /><small><a target="_blank" href="https://maps.google.com.br/maps?ie=UTF8&amp;q=Restaurante+Tasca+Lusa&amp;fb=1&amp;gl=br&amp;hq=tasca+lusa&amp;hnear=0xb81635625b6987:0x7bc9ac2d2fe35a1c,Vila+Velha+-+ES&amp;cid=0,0,7868658380958705785&amp;t=m&amp;iwloc=A&amp;ll=-20.33022,-40.280414&amp;spn=0.006295,0.006295&amp;source=embed" rel="nofollow noopener" style="color:#0000FF;text-align:left">Ver mapa maior</a></small>
        </div>

        <div id="content" class="content-column-left">
        <script src="//cdn.jotfor.ms/static/jotform.js?3.1.1287" type="text/javascript"></script>
    <script type="text/javascript">
       JotForm.init(function(){
          $('input_5').hint('ex: meuemail@exemplo.com');
          JotForm.highlightInputs = false;
          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":"There are incomplete required fields. Please complete them.","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://cdn.jotfor.ms/static/formCss.css?3.1.1287" rel="nofollow noopener" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="stylesheet" target="_blank" href="http://cdn.jotfor.ms/css/styles/nova.css?3.1.1287" rel="nofollow noopener" />
    <link type="text/css" media="print" rel="stylesheet" target="_blank" href="http://cdn.jotfor.ms/css/printForm.css?3.1.1287" rel="nofollow noopener" />
    <style type="text/css">
        .form-label{
            width:73px !important;
        }
        .form-label-left{
            width:73px !important;
        }
        .form-line{
            padding-top:2px;
            padding-bottom:2px;
        }
        .form-label-right{
            width:73px !important;
        }
        .form-all{
            width:378px;
            color:#555 !important;
            font-family:'Lucida Grande';
            font-size:14px;
        }
        .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{
            color:#555;
        }

        /* Injected CSS Code */
    /*----.form-all{
    background-image:url('http://www.jotform.com/uploads/pinoytech/form_files/application.png');
    }---*/
    /*---BACKGROUND IMAGE---*/
    img.form-image {
    z-index: -1;
    position: absolute;
    margin-left: -30px !important;
    }
    .form-line { background: none; }
    .form-header {
    margin-top: 60px;
    text-align: center;
    color: #000 !important;
    }
    .form-header-group {
    border-bottom: none !important;
    border-top: none !important;
    }
    #id_4.form-line {
    margin-top: -30px !important;
    }
    .form-textbox, .form-textarea, .form-radio-other-input, .form-captcha input {
    padding: 3px;
    border: 1px solid
    black;
    }
        /* Injected CSS Code */
    </style>

    <link type="text/css" rel="stylesheet" target="_blank" href="http://jotformz.com/css/styles/buttons/form-submit-button-wood.css?3.1.1287" rel="nofollow noopener"/>
    <form class="jotform-form" action="http://submit.jotformz.com/submit/33404479068661/" method="post" name="form_33404479068661" id="33404479068661" accept-charset="utf-8">
      <input type="hidden" name="formID" value="33404479068661" />
      <div class="form-all">
        <ul class="form-section">
          <li class="form-line" id="id_7">
            <div id="cid_7" class="form-input-wide">
              <img alt="" class="form-image" border="0" src="//www.jotform.com/uploads/pinoytech/form_files/application.png" height="479.72" width="358" />
            </div>
          </li>
          <li id="cid_3" class="form-input-wide">
            <div class="form-header-group">
              <h2 id="header_3" class="form-header">
                Mande Seu Pedido
              </h2>
            </div>
          </li>
          <li class="form-line" id="id_4">
            <label class="form-label-top" id="label_4" for="input_4"> Seu Nome </label>
            <div id="cid_4" class="form-input-wide"><span class="form-sub-label-container"><input class="form-textbox" type="text" size="10" name="q4_seuNome[first]" id="first_4" />
                <label class="form-sub-label" for="first_4" id="sublabel_first"> Nome </label></span><span class="form-sub-label-container"><input class="form-textbox" type="text" size="15" name="q4_seuNome[last]" id="last_4" />
                <label class="form-sub-label" for="last_4" id="sublabel_last"> Sobrenome </label></span>
            </div>
          </li>
          <li class="form-line" id="id_8">
            <label class="form-label-left" id="label_8" for="input_8"> Número de Telefone </label>
            <div id="cid_8" class="form-input"><span class="form-sub-label-container"><input class="form-textbox" type="tel" name="q8_numeroDe8[area]" id="input_8_area" size="3">
                -
                <label class="form-sub-label" for="input_8_area" id="sublabel_area"> Código de área </label></span><span class="form-sub-label-container"><input class="form-textbox" type="tel" name="q8_numeroDe8[phone]" id="input_8_phone" size="8">
                <label class="form-sub-label" for="input_8_phone" id="sublabel_phone"> Número de Telefone </label></span>
            </div>
          </li>
          <li class="form-line" id="id_5">
            <label class="form-label-left" id="label_5" for="input_5">
              E-mail:<span class="form-required">*</span>
            </label>
            <div id="cid_5" class="form-input">
              <input type="email" class=" form-textbox validate[required, Email]" id="input_5" name="q5_email" size="30" value="" />
            </div>
          </li>
          <li class="form-line" id="id_6">
            <label class="form-label-top" id="label_6" for="input_6"> Pedidos, Comentários ou Sugestões </label>
            <div id="cid_6" class="form-input-wide">
              <textarea id="input_6" class="form-textarea" name="q6_pedidosComentarios" cols="34" rows="8"></textarea>
            </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-wood">
                  Enviar p.f.
                </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="33404479068661" />
      <script type="text/javascript">
      document.getElementById("si" + "mple" + "_spc").value = "33404479068661-33404479068661";
      </script>
    </form>
      </div>
    </div>
      <!-- END OF CONTENT -->
     
      <!-- PRE-FOOTER -->
      <div id="pre_footer">
        <div class="inner">

        </div>
      </div>
      <!-- END OF PRE-FOOTER -->
     
      <!-- FOOTER -->
      <div id="footer">
        <div class="inner">
          <div class="column_big">
            <!-- FOOTER MODULES AREA -->
            <div class="footer_modules">
              <h3>Sobre Tasca Lusa</h3>
              <p>O Restaurante Tasca Lusa nasceu no 1º dia de Setembro de 2012 e tem conquistado o estômago e o coração de milhares de brasileiros e brasileiras que apreciam e admiram a verdadeira culinária portuguesa. De fato, todas as receitas são genuinamente portuguesas, bem como a decoração do restaurante que apesar de ser pequeno, transmite o ambiente e atmosfera próprias da terrinha que é Portugal, país irmão do grandioso Brasil.</p>
            </div>
            <!-- END OF FOOTER MODULES AREA -->
            <div class="footer_social">
              <h3>Espalhe a Palavra</h3>
              <!-- AddThis Button BEGIN -->
              <div class="addthis_toolbox addthis_default_style "><script type="text/javascript">
          //<![CDATA[
                document.write('<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>');
          //]]>
         </script>
              </div>
              <script type="text/javascript" src="//s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e7280075406aa87"></script>
              <!-- AddThis Button END -->
            </div>
          </div>
          <div class="column_small">
            <h3>Serviço ao Cliente</h3>
            <ul>
              <li><a target="_blank" href="#">Início</a></li>
             
            </ul>
          </div>
          <div class="column_small">
            <h3>Informação</h3>
            <ul>
             
              <li><a target="_blank" href="contact.html">Contacte-Nos</a></li>
             
            </ul>
          </div>
          <div class="column_small">
            <h3>Extras</h3>
            <ul>
              <li><a target="_blank" href="#">Qualidade</a></li>
              <li><a target="_blank" href="#">Ofertas</a></li>
              <li><a target="_blank" href="#">Novidades</a></li>
            </ul>
          </div>
          <div class="clear"></div>
          <span class="copyright">Direitos Reservados - Restaurante Tasca Lusa 2013 <a target="_blank" href=""></a>. </span> </div>
      </div>

      <!-- END OF FOOTER -->
     
    </div>
    <!-- END OF MAIN WRAPPER -->
    <script type="text/javascript" src="//twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="//twitter.com/statuses/user_timeline/d_koev.json?callback=twitterCallback2&amp;count=3"></script>
    <script type="text/javascript"><!--
    $(document).ready(function() {
    $('#twitter_update_list').cycle({
            fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            next:   '#tweet_next',
            prev:   '#tweet_prev'
            });
            });
    //--></script>
    </body>
    </html>

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 10, 2013 at 03:32 PM

    Hi there,

    Have you tried to embed the form using the default script embed code or iframe code? This might help.

    Speaking on the issue, could you please elaborate what was the real problem or what error you've encountered when you place the form to your webpage source? Let us know so we can assist you better.

    Thanks!