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 ?

[SanfordWhiteman]

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.

[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>

[SanfordWhiteman]

Please, your URL, not a giant unreadable code dump!  If you do paste code here, always highlight it using the Advanced Editor's syntax highlighter.

I can tell you straight away that you're not using the Forms 2 JS API correctly. You can't just mix-and-match direct DOM methods with API methods. Forms don't work that way and you will always create hard-to-find errors.