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

  • fooorex
    Asked on May 15, 2016 at 1: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 href="css/flexslider.min.css" rel="stylesheet" type="text/css" media="all"/>
            <link href="css/line-icons.min.css" rel="stylesheet" type="text/css" media="all"/>
            <link href="css/elegant-icons.min.css" rel="stylesheet" type="text/css" media="all"/>
            <link href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all"/>
            <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
            <link href="css/theme-aspirin.css" rel="stylesheet" type="text/css" media="all"/>
            <link href="css/custom.css" rel="stylesheet" type="text/css" media="all"/>
            <!--[if gte IE 9]>
                <link rel="stylesheet" type="text/css" href="css/ie9.css" />
            <![endif]-->
            <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,600,700%7CRaleway:700' 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 Image0">
                        </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.onSubmissionDISABLEDerror=&quot;jumpToSubmit&quot;; }); </script> <link 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; 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; href=&quot;https://cdn.jotfor.ms/css/printForm.css?3.3.13207&quot; /> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; 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; 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 onDISABLEDload=&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>
                   

  • Kiran Support Team Lead
    Replied on May 15, 2016 at 3: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. 

  • fooorex
    Replied on May 15, 2016 at 4:00 PM

    It's absolutely PERFECT!

    Thanks a lot Kiran!

  • Kiran Support Team Lead
    Replied on May 15, 2016 at 4: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!!