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

    When submit button is clicked on Source code embedded form, it opens in a new tab

    Asked by fooorex on May 15, 2016 at 01:50 PM

    I'm struggling setup a simple form since website css make the form completely different from what i get in Jotform editor.

    I can't use embed funciton, i need to embed the source.

    So i tried to inject the source code in htlm

    Everything seems to work fine but the two fields user has to fill and the fact that open the welcome page on a new window.

    I know is pretty tricky, if someone can help me it will be great, if not freelacers are welcome :)

    Here is the form:

    Here the webpage: http://bmeet.net/site/formaccio.htm

    Here the html code:


    <!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="no-js"> <!--<![endif]-->
        <head>
            <meta charset="utf-8">
            <title>Variant HTML Builder by Medium Rare</title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <link target="_blank" href="css/flexslider.min.css" rel="stylesheet" type="text/css" media="all"/>
            <link target="_blank" href="css/line-icons.min.css" rel="stylesheet" type="text/css" media="all"/>
            <link target="_blank" href="css/elegant-icons.min.css" rel="stylesheet" type="text/css" media="all"/>
            <link target="_blank" href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all"/>
            <link target="_blank" href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
            <link target="_blank" href="css/theme-aspirin.css" rel="stylesheet" type="text/css" media="all"/>
            <link target="_blank" href="css/custom.css" rel="stylesheet" type="text/css" media="all"/>
            <!--[if gte IE 9]>
                <link rel="stylesheet" type="text/css" target="_blank" href="css/ie9.css" />
            <![endif]-->
            <link target="_blank" href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,600,700%7CRaleway:700' rel="nofollow" rel='stylesheet' type='text/css'>
            <script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
        </head>
        <body>
            <div class="loader">
                <div class="spinner">
                  <div class="double-bounce1"></div>
                  <div class="double-bounce2"></div>
                </div>
            </div>
                   
            <div class="nav-container">
            </div>
           
            <div class="main-container">
                <header class="signup">
                        <div class="background-image-holder parallax-background">
                            <img src="img/hero9.jpg" class="background-image" alt="Background Image">
                        </div>
                       
                        <div class="container">
                            <div class="row">
                                <div class="col-md-10 col-md-offset-1 col-sm-12 text-center">
                                    <h1 class="text-white">We're getting ready to launch<br>Subscribe now to stay informed</h1>
                                </div>
                            </div>
                           
                            <div class="row text-center">
                           
                                <div class="col-sm-12 text-center">
                                    <div class="photo-form-wrapper clearfix">
                                        <form class="mail-list-signup">
                                            <div class="row">
                                                <div class="col-md-3 col-sm-4 col-md-offset-3 col-sm-offset-2">
                                                    <input type="text" class=" form-textbox validate[required]" placeholder="Your Name" data-type="input-textbox" id="input_20" name="q20_fname" size="30" value="" />
                                                </div>
                                   
                                                <div class="col-md-3 col-sm-4">
                                                    <input class=" form-textbox validate[required, Email]" placeholder="Your Email Address" type="email" id="input_4" name="q4_email" size="10" value="" />
                                                </div>
                                               
                                                <div class="col-md-12 col-md-offset-0 col-sm-4 col-sm-offset-4 text-center">
                                                    <input class="btn btn-primary btn-filled" value="Subscribe" type="submit">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                   
                                    <span class="text-white">We <strong>never</strong> share emails with third parties</span>
                                </div>
                           
                            </div>
                            <iframe class="mail-list-form" srcdoc="<script src=&quot;https://cdn.jotfor.ms/static/prototype.forms.js&quot; type=&quot;text/javascript&quot;></script> <script src=&quot;https://cdn.jotfor.ms/static/jotform.forms.js?3.3.13207&quot; type=&quot;text/javascript&quot;></script> <script src=&quot;https://js.jotform.com/vendor/postMessage.js?3.3.13207&quot; type=&quot;text/javascript&quot;></script> <script src=&quot;https://js.jotform.com/WidgetsServer.js&quot; type=&quot;text/javascript&quot;></script> <script type=&quot;text/javascript&quot;> JotForm.init(function(){ setTimeout(function() { $('input_20').hint('Nome o Nick'); }, 20); setTimeout(function() { $('input_4').hint('La Tua Migliore Mail'); }, 20); JotForm.alterTexts({&quot;alphabetic&quot;:&quot;Questo campo può contenere solo lettere.&quot;,&quot;alphanumeric&quot;:&quot;Questo campo può contenere solo lettere e numeri&quot;,&quot;confirmClearForm&quot;:&quot;Sei sicuro di voler cancellare il modulo&quot;,&quot;email&quot;:&quot;Inserisci un indirizzo email valido&quot;,&quot;incompleteFields&quot;:&quot;Alcuni campi non sono stati compilati, ti preghiamo di completarli.&quot;,&quot;lessThan&quot;:&quot;Il tuo score deve essere inferiore a&quot;,&quot;numeric&quot;:&quot;Questo campo può contenere solo numeri.&quot;,&quot;pleaseWait&quot;:&quot;Attendere prego...&quot;,&quot;required&quot;:&quot;Campo richiesto&quot;,&quot;uploadExtensions&quot;:&quot;Possono essere caricati solo i seguenti file:&quot;,&quot;uploadFilesize&quot;:&quot;Il file non può essere superiore a:&quot;}); JotForm.clearFieldOnHide=&quot;disable&quot;; JotForm.onSubmissionError=&quot;jumpToSubmit&quot;; }); </script> <link target="_blank" href=&quot;https://cdn.jotfor.ms/static/formCss.css?3.3.13207&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; target="_blank" href=&quot;https://cdn.jotfor.ms/css/styles/nova.css?3.3.13207&quot; /> <link type=&quot;text/css&quot; media=&quot;print&quot; rel=&quot;stylesheet&quot; target="_blank" href=&quot;https://cdn.jotfor.ms/css/printForm.css?3.3.13207&quot; /> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; target="_blank" href=&quot;https://cdn.jotfor.ms/themes/CSS/566a91c2977cdfcd478b4567.css?themeRevisionID=56f6e67c977cdf2e558b4567&quot;/> <style type=&quot;text/css&quot;> .form-label-left{ width:150px !important; } .form-line{ padding-top:10px; padding-bottom:10px; } .form-label-right{ width:150px !important; } .form-all{ width:690px; color:#555 !important; font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, &quot;Lucida Sans&quot;, Verdana, sans-serif; font-size:14px; } .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{ color: Black; } </style> <style type=&quot;text/css&quot; id=&quot;form-designer-style&quot;> /* Injected CSS Code */ #input_20{text-transform:capitalize;}#input_25{text-transform:capitalize;} /* Injected CSS Code */ </style> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; target="_blank" href=&quot;https://cdn.jotfor.ms/css/styles/buttons/form-submit-button-simple_white.css?3.3.13207&quot;/> <form class=&quot;jotform-form&quot; action=&quot;https://submit.jotformpro.com/submit/61354488157968/&quot; method=&quot;post&quot; name=&quot;form_61354488157968&quot; id=&quot;61354488157968&quot; accept-charset=&quot;utf-8&quot;> <input type=&quot;hidden&quot; name=&quot;formID&quot; value=&quot;61354488157968&quot; /> <div class=&quot;form-all&quot;> <ul class=&quot;form-section page-section&quot;> <li class=&quot;form-line jf-required&quot; data-type=&quot;control_textbox&quot; id=&quot;id_20&quot;> <label class=&quot;form-label form-label-left form-label-auto&quot; id=&quot;label_20&quot; for=&quot;input_20&quot;> Fname <span class=&quot;form-required&quot;> * </span> </label> <div id=&quot;cid_20&quot; class=&quot;form-input jf-required&quot;> <input type=&quot;text&quot; class=&quot; form-textbox validate[required]&quot; data-type=&quot;input-textbox&quot; id=&quot;input_20&quot; name=&quot;q20_fname&quot; size=&quot;30&quot; value=&quot;&quot; /> </div> </li> <li class=&quot;form-line jf-required&quot; data-type=&quot;control_email&quot; id=&quot;id_4&quot;> <label class=&quot;form-label form-label-left form-label-auto&quot; id=&quot;label_4&quot; for=&quot;input_4&quot;> Email <span class=&quot;form-required&quot;> * </span> </label> <div id=&quot;cid_4&quot; class=&quot;form-input jf-required&quot;> <input type=&quot;email&quot; class=&quot; form-textbox validate[required, Email]&quot; id=&quot;input_4&quot; name=&quot;q4_email&quot; size=&quot;10&quot; value=&quot;&quot; /> </div> </li> <li class=&quot;form-line form-line-column form-col-1&quot; data-type=&quot;control_button&quot; id=&quot;id_2&quot;> <div id=&quot;cid_2&quot; class=&quot;form-input-wide&quot;> <div style=&quot;text-align:center&quot; class=&quot;form-buttons-wrapper&quot;> <button id=&quot;input_2&quot; type=&quot;submit&quot; class=&quot;form-submit-button form-submit-button-simple_white&quot;> GO! </button> </div> </div> </li> <li class=&quot;form-line&quot; data-type=&quot;control_widget&quot; id=&quot;id_24&quot;> <label class=&quot;form-label form-label-left form-label-auto&quot; id=&quot;label_24&quot; for=&quot;input_24&quot;> </label> <div id=&quot;cid_24&quot; class=&quot;form-input jf-required&quot;> <div style=&quot;width:100%; text-align:Left;&quot;> <iframe onload=&quot;widgetFrameLoaded(24)&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; allowTransparency=&quot;true&quot; data-type=&quot;iframe&quot; class=&quot;custom-field-frame&quot; id=&quot;customFieldFrame_24&quot; src=&quot;&quot; style=&quot;border:none;width:300px;height:30px;&quot; data-width=&quot;300&quot; data-height=&quot;30&quot;> </iframe> <div class=&quot;widget-inputs-wrapper&quot;> <input id=&quot;input_24&quot; class=&quot;form-hidden form-widget &quot; type=&quot;hidden&quot; name=&quot;q24_password&quot; value=&quot;&quot; /> <input id=&quot;widget_settings_24&quot; class=&quot;form-hidden form-widget-settings&quot; type=&quot;hidden&quot; value=&quot;%5B%7B%22name%22%3A%22charsNumber%22%2C%22value%22%3A%225%22%7D%2C%7B%22name%22%3A%22charsType%22%2C%22value%22%3A%22alphanumeric%22%7D%2C%7B%22name%22%3A%22letterCase%22%2C%22value%22%3A%22lowercase%22%7D%2C%7B%22name%22%3A%22hide%22%2C%22value%22%3A%22Yes%22%7D%2C%7B%22name%22%3A%22apiKey%22%2C%22value%22%3A%22encoded%3Az%2F9glHhYUBjrptsgLBzZC79ttJHgdyCZprzdgWjKmlM%3D%22%7D%5D&quot; data-version=&quot;2&quot; /> </div> <script type=&quot;text/javascript&quot;> setTimeout(function() { var _cFieldFrame = document.getElementById(&quot;customFieldFrame_24&quot;); _cFieldFrame.src = &quot;//data-widgets.jotform.io/randomValueGenerator/?qid=24&amp;ref=&quot; + encodeURIComponent(window.location.protocol + &quot;//&quot; + window.location.host); _cFieldFrame.addClassName(&quot;custom-field-frame-rendered&quot;); }, 0); </script> </div> </div> </li> <li style=&quot;display:none&quot;> Should be Empty: <input type=&quot;text&quot; name=&quot;website&quot; value=&quot;&quot; /> </li> </ul> </div> <input type=&quot;hidden&quot; id=&quot;simple_spc&quot; name=&quot;simple_spc&quot; value=&quot;61354488157968&quot; /> <script type=&quot;text/javascript&quot;> document.getElementById(&quot;si&quot; + &quot;mple&quot; + &quot;_spc&quot;).value = &quot;61354488157968-61354488157968&quot;; </script> <script src=&quot;https://cdn.jotfor.ms/js/widgetResizer.js?REV=3.3.13207&quot; type=&quot;text/javascript&quot;></script> <input type=&quot;hidden&quot; class=&quot;form-hidden&quot; value=&quot;9&quot; id=&quot;input_15&quot; name=&quot;q15_idPersonale15&quot; /> <input type=&quot;hidden&quot; class=&quot;form-hidden&quot; value=&quot;@nome@&quot; id=&quot;input_10&quot; name=&quot;q10_nomeReferente&quot; /> <input type=&quot;hidden&quot; class=&quot;form-hidden&quot; value=&quot;@id@&quot; id=&quot;input_11&quot; name=&quot;q11_idReferente&quot; /> <input type=&quot;hidden&quot; class=&quot;form-hidden&quot; value=&quot;@mail@&quot; id=&quot;input_19&quot; name=&quot;q19_mailReferente19&quot; /> <input type=&quot;hidden&quot; class=&quot;form-hidden&quot; value=&quot;@tel@&quot; id=&quot;input_14&quot; name=&quot;q14_telefonoReferente&quot; /> <input type=&quot;hidden&quot; class=&quot;form-hidden&quot; value=&quot;http://bmeet.com/@id@&quot; id=&quot;input_12&quot; name=&quot;q12_sitoReferente&quot; /> <input type=&quot;hidden&quot; class=&quot;form-hidden&quot; value=&quot;bmeet&quot; id=&quot;input_17&quot; name=&quot;q17_programma&quot; /> <input type=&quot;hidden&quot; class=&quot;form-hidden&quot; value=&quot;Italiano&quot; id=&quot;input_23&quot; name=&quot;q23_language&quot; /> </form> <script type=&quot;text/javascript&quot;>JotForm.ownerView=true;</script>">
                            </iframe>
                           
                        </div>   
                </header>
            </div>
           
            <div class="footer-container">
            </div>
                   
            <script src="https://www.youtube.com/iframe_api"></script>
            <script src="js/jquery.min.js"></script>
            <script src="js/jquery.plugin.min.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <script src="js/jquery.flexslider-min.js"></script>
            <script src="js/smooth-scroll.min.js"></script>
            <script src="js/skrollr.min.js"></script>
            <script src="js/spectragram.min.js"></script>
            <script src="js/scrollReveal.min.js"></script>
            <script src="js/isotope.min.js"></script>
            <script src="js/twitterFetcher_v10_min.js"></script>
            <script src="js/lightbox.min.js"></script>
            <script src="js/jquery.countdown.min.js"></script>
            <script src="js/scripts.js"></script>
        </body>
    </html>
                   

    Emails form class background image JotForm checkbox
  • Profile Image
    JotForm Support

    Answered by Kiran on May 15, 2016 at 03:01 PM

    I have checked your JotForm and the code embedded on the web page. I see that some scripts on the form are called from iframe along with some changes in the form tag. I have removed all the embedded code except for the fields Name, Email and Submit button and added again to the source code. Also, I see that there are some hidden fields on the form and it seems that they are not included within the form to retrieve data.

    Please see the form below and check if that works for you. I have submitted some test submissions using this source code embedded web page and see that they are in your submission list.

    https://shots.jotform.com/kiran/shared/839575/839575.html

    You may get the full source code of the HTML page from the link below:

    http://pastebin.com/iw9tkDCv

    I've set this script to expire in 7 days and hence you'll need to download/copy it within 7 days.

    Please check the form and let us know if you need any further assistance. We will be happy to assist. 

  • Profile Image

    Answered by fooorex on May 15, 2016 at 04:00 PM

    It's absolutely PERFECT!

    Thanks a lot Kiran!

  • Profile Image
    JotForm Support

    Answered by Kiran on May 15, 2016 at 04:02 PM

    You are welcome. It's our pleasure to assist you. Please do not hesitate to get in touch with us if you need any further assistance. We will be happy to help. 

    Thank you for using JotForm!!