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>
... View more
Customize up to 8 badges at the top of your trophy case for all other Community members to see!
Give Back 5
Earned on 2.08.21
Earned by 925 people
Select to learn more
Ignite 5
Earned on 2.08.21
Earned by 517 people
Select to learn more
Give Back 3
Earned on 2.08.21
Earned by 1431 people
Select to learn more
Give Back 10
Earned on 2.08.21
Earned by 553 people
Select to learn more
Ignite 3
Earned on 2.08.21
Earned by 918 people
Select to learn more
Give Back 1
Earned on 2.08.21
Earned by 3134 people
Select to learn more
Ignite 1
Earned on 2.08.21
Earned by 3135 people
Select to learn more
Applaud 5
Earned on 2.08.21
Earned by 1502 people
Select to learn more
.png)