3 Replies Latest reply on Aug 9, 2018 12:03 AM by Sanford Whiteman

    Thank you message on same page is disappearing when we use custom html with Marketo form

    Vipin Mp

      Hi,

      I am searching to integrate custom html form with marketo form and found the link -> https://www.websightdesigns.com/creating-custom-marketo-forms

       

      I have implemented this and When I try to add a thank you message on the same page after submitting the form , the message is showing but the page gets reloaded and the message disappeared. I have tried to put e.preventDefault(); but it was not working (I showed the thank you message by using div element and initially this was hidden).

       

      But this was correctly working when we use the Marketo embed form itself (I have followed the http://developers.marketo.com/blog/show-thank-you-message-without-a-follow-up-landing-page/  )

       

      Anyone knows about this ?

        • Re: Thank you message on same page is disappearing when we use custom html with Marketo form
          Sanford Whiteman

          You must provide your URL. It's almost certain that you have a JS syntax error, but we can't tell you what's wrong if you don't link to your code.

            • Re: Thank you message on same page is disappearing when we use custom html with Marketo form
              Vipin Mp

              Thank you San, This is the code I added.

               

              <script src="https://app-xxxx.marketo.com/js/forms2/js/forms2.min.js"></script>

              <form class="form" id="mktoForm_xxxx" style="display:none;"> </form>

              <script>MktoForms2.loadForm("https://app-xxxx.marketo.com", "xxx-xxx-xxx", xxxx);</script>

               

               

              <div class="container news-letter wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">

              <div id="first" style="display:">

              <form action="" data-drupal-form-fields="Unsubscribed" id="contactform" method="post" >

              <div class="container wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">

              <div class="row justify-content-center">

              <div class="col-lg-3 col-md-3">

              <div class="input-field"><input data-invalid-message="Name is required." id="name" required="" type="text" /> <label for="name" id="f-name">First name:</label></div>

              </div>

               

               

              <div class="col-lg-3 col-md-3">

              <div class="input-field"><input id="last-name" required="" type="text" /> <label for="last-name">Last name:</label></div>

              </div>

               

               

              <div class="col-lg-3 col-md-3">

              <div class="input-field"><input id="email" required="" type="email" /> <label for="email">Email:</label></div>

              </div>

               

               

              <div class="col-lg-offset-1 col-lg-6 col-md-6 unsub"><select class="mktoField mktoHasWidth mktoRequired" id="Unsubscribed" name="Unsubscribed" required="" style="width: 150px;"><option value="">Select...</option><option value="No">Yes</option><option value="Yes">No</option> </select> <label for="" style="

                  top: 23px;

              "> By signing up you will receive </label></div>

               

               

              <div class="col-lg-offset-1 col-md-offset-2 col-lg-3 col-md-3" style="

                  margin: 50px 0px;

                  text-align: right;

              ">

              <div class="form"><button class="submit-btn" type="submit">Suscribe now</button></div>

              </div>

              </div>

              </div>

              </form>

              </div>

               

               

              <div class="success-message" id="confirmation" style="display:none;">

              <p class="text-center">Thank you for submitting your details.</p>

              </div>

              </div>

              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">

                       $(document).ready(function() {

               

                // populate the text fields

               

                $('#name').on('change', function() {

                  $('#FirstName').val( $(this).val() );

                });

               

                $('#last-name').on('change', function() {

                  $('#LastName').val( $(this).val() );

                });

               

                $('#email').on('change', function() {

                  $('#Email').val( $(this).val() );

                });

               

                $('#contact_phone').on('change', function() {

                  $('#Phone').val( $(this).val() );

                });

              function changeColor(id, newColor) {

                $("#" + id).prev().css("color", newColor);

              }

              $('#FirstName').on('change', function() {

                  changeColor('FirstName', 'red');

              });

               

               

               

                // populate the select field

               

                $('[name="Unsubscribed"]').on('change', function() {

                  var selected = $(this).val();

                  var matchValue = $('#Unsubscribed option[value="' + selected + '"]');

                  matchValue.prop('selected', true);

                });

               

                // submit button functionality

               

              $('.submit-btn').on('click',function(e) {

                var myForm = MktoForms2.allForms()[0];

                          if(!$('#FirstName').val()== "" && !$('#LastName').val()== "" && !$('#Email').val()== "" && !$('[name="Unsubscribed"]').val() == "") {

                              myForm.submit();

                            document.getElementById('contactform').style.display = 'block';

                            document.getElementById('confirmation').style.display = 'block';

                            e.preventDefault();

                          }

               

               

                });

               

               

              }); 

               

               

                    </script>