6 Replies Latest reply on Apr 25, 2014 12:03 PM by 5248

    Forms 2.0 Embed Code with Invalid Email Script

    Enget Dang
      We are currently using a form on a non-Marketo web page, but instead of using the old way of placing the form on a blank landing page and then adding that source to an iframe to be placed on a non-Marketo web page, I'd like to use Marketo's new embedded script code, but the tricky part is that we use the invalid email script to gate unwanted email domains (gmail, yahoo, etc.). Does anyone know how to use the new Marketo embed code and invalid email script without using a Marketo landing page as the source for the form? I'd like to try and avoid any iframes.

      Cheers!
      Enget
        • Re: Forms 2.0 Embed Code with Invalid Email Script
          Edward Masson
          There was an update to the developers site regarding emabeding Forms 2.0 to non marketo pages, check this area out:
          http://developers.marketo.com/documentation/websites/forms-2-0/
          • Re: Forms 2.0 Embed Code with Invalid Email Script
            Enget Dang
            Hi Ed,

            Thanks for the recommendation. It looks like this is the script I was looking for, but with limited development skills was wondering if anyone could help modify this a bit to show an error message when someone enters in an invalid email address like gmail.com:

                                
                                          MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621, function(form){
                                            //listen for the submit event
                                            form.onSubmit(function(){
                                              //get the values
                                              varvals = form.getValues();
                                              //Check your condition
                                              if(vals.Country == "USA"&& vals.VehicleSize != "massive"){
                                                //prevent form submission
                                                form.submittable(false);
                                                //Show error message, pointed at VehicleSize element
                                                varvehicleSizeElem = form.getFormElem().find("#VehicleSize");
                                                form.showErrorMessage("All Americans must have a massive vehicle", vehicleSizeElem);
                                              }else{
                                                //enable submission for those who met the criteria.
                                                form.submittable(true);
                                              }
                                            });
                                          });
                           

            • Re: Forms 2.0 Embed Code with Invalid Email Script
              Alok Ramsisaria
                   On your non marketo landing page add the form using the embeded code and then use below mentioned code:-
                    

              <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

              <script type="text/javascript" charset="utf-8">

              var $jQ = jQuery.noConflict();


              var invalidDomains =

              [

              "hotmail.com",

              "yahoo.com",

              "aol.com",

              "gmail.com",

              ];



              $jQ(document).ready(function(){

              if ($jQ('.mktoButtonRow').length == 0) {

              window.setTimeout(function(){

              emailValidation();

              }, 500);

              } else {

              emailValidation();

              }

              });


              $jQ('#Email').bind('blur', function(){

              if (isEmailValid()){

              var $error = $jQ(this).parent().find('.mktoError');

              if ($error.length > 0) {

              $error.fadeOut(200, function(){

              $error.remove();

              $jQ('#Email').removeClass('mktoInvalid');

              });

              }

              }

              });



              function emailValidation() {

              var $buttonRow = $jQ('.mktoButtonRow');

              var submitText = $buttonRow.find('button').html();

              var $replacement = $jQ('<input id="replacementButton" type="button" class="mktoButton" value="' + submitText + '" />');

              $buttonRow.hide();

              var buttonRowContents = $buttonRow.html();

              $span = $jQ(buttonRowContents).html('');

              var $replacementRow = $jQ('<div class="mktoFormRow" />').append($span.append($replacement));

              $jQ('.mktoFormRow :last').after($replacementRow);

              $jQ('#replacementButton').click(function(){

              console.log('debug1');

              if (!isEmailValid()) {

              console.log('debug2');

              var $error = $jQ('#Email').parent().find('.mktoError');

              if ($error.length == 0) {

              $error = getError('Please provide a business or institutional email address');

              $jQ('#Email').after($error);

              }

              $error.fadeIn(200);

              $jQ('#Email').removeClass('mktoInvalid').addClass('mktoInvalid');

              return;

              } else {

              console.log('debug3');

              $jQ('.mktoButtonRow button').trigger('click');

              }

              });

              }


              function isEmailValid() {

              var email = $jQ('#Email').val().toLowerCase();

              for(i=0; i < invalidDomains.length; i++) {

              var invalidDomain = invalidDomains[i].toLowerCase();

              if (email.indexOf(invalidDomain) !== -1) {

              return false;

              }

                 }

              return true;

              }


              function getError(message, detail) {

              var $container = $jQ('<div class="mktoError" style="right: 0px; bottom: -47px; display: none" />');

              var $arrow = $jQ('<div class="mktoErrorArrowWrap"><div class="mktoErrorArrow"></div></div>');

              var $errorMessage = $jQ('<div class="mktoErrorMsg" />').html(message);

              if (typeof detail == 'string' && $jQ.trim(detail) != '') {

              $errorMessage = $errorMessage.append($jQ('<span class="mktoErrorDetail" />').html(detail))

              }

              return $container.append($arrow).append($errorMessage);

              }

              </script>

                         

              • Re: Forms 2.0 Embed Code with Invalid Email Script
                Enget Dang
                Thanks Alok! Saw this on another discussion and it worked pretty well for me. Only functional problem is that the error message is showing under the label and not field, but other than that. Works like a charm!
                • Re: Forms 2.0 Embed Code with Invalid Email Script
                  Enget Dang
                  Actually double-checked and this only works successfully with a Marketo landing page and not a non-Marketo page.
                  • Re: Forms 2.0 Embed Code with Invalid Email Script
                    Worked very well for Forms 2.0 page. Thank you Alok.