Problem with form submission

Product Support
1

Your software
My Mautic version is: 4.2.2
My PHP version is: 7.4.30
My Database type and version is: 10.6.10-MariaDB

Your problem
My problem is:

Hi guys all right? good how can i use this formula below to send to my mautic?

<style>
  .banner-joinnow-form { display: block !important; background-color: transparent !important; padding: 0px 8px 8px 8px !important;  }
  .banner-joinnow-form .form-row { margin: auto !important; background-color: transparent !important;  padding: 7px 0 !important; }
  .banner-joinnow-form input { background-color: #fff !important; height: 40px !important;  width: 50% !important; margin-top: 10px !important; }
  .banner-joinnow-form .wpcf7-form-control-wrap { height: 40px !important; }
  .banner-joinnow-form input[type="submit"] { line-height: 0 !important; text-align: center !important; height: 50px !important; width: 100% !important; margin-top: 15px !important; border-radius: 1px !important; background-color: #fcb94b !important; font-size: 20px !important; font-weight: bold !important; text-transform: none !important;  }
  .banner-joinnow-form input[type="submit"]:hover { background-color: #e18d03 !important; }
  .banner-joinnow-form input[type="email"], .banner-joinnow-form input[type="number"] { width: 242px !important; border-right: 0px !important; margin-bottom: 0 !important; margin-top: 10px !important; }
  .banner-joinnow-form input[type="text"] { width: 242px !important; }
  #signup-form .forms-response-msg:not(:empty),  #signup-form #success-wrap,  #signup-form #error-wrap { text-align: center; color: #fff; font-size: 15px; margin: 0; padding: 0; font-weight: bold; font-size: 14px; }
  #signup-form #errors { margin-left: 20px; }
  #signup-form #error-wrap h3,  #signup-form #success-wrap h2,  #signup-form #success-wrap h3 { color: #ffffff; }
  #signup-form #success-wrap p,  #signup-form #error-wrap p { text-align: center !important; color: #fff; }
  #signup-form #success-wrap .news-signup-text { font-weight: normal; }
  .grecaptcha-badge { visibility: hidden !important; }

  /* mobile */
  @media (max-width: 639px) {
    .banner-joinnow-form { width: 100%; }
    .banner-joinnow-form .form-row { padding: 0px !important; }
    .banner-joinnow-form .wpcf7-form-control-wrap { height: auto !important; }
    .banner-joinnow-form .form-row .col-auto { margin: auto !important; width: 100% !important; }
    .banner-joinnow-form input[type="text"], .banner-joinnow-form input[type="email"] { width: 100% !important; margin: auto !important; margin-top: 10px !important; }
  }

  @media (max-width: 320px) {
    .banner-joinnow-form input[type="email"], .banner-joinnow-form input[type="text"] { height: 30px !important; }
  }
</style>

<div role="form" class="wpcf7" id="wpcf7-f809-p294-o1" dir="ltr">
  <div class="screen-reader-response" aria-live="polite"></div>

  <form id="signup-form" action="#" method="post" class="wpcf7-form" novalidate="novalidate">
    <div id="success-wrap" style="display: none">
      <p>Obrigado por se cadastrar!</p>
    </div>

    <div id="error-wrap" style="display: none">
      <div class="list-wrapper">
        <ul class="errors"></ul>
      </div>
    </div>

    <div id="errors" class="forms-response-msg"></div>

    <div class="banner-joinnow-form form-wrapper">

      <div class="form-row">
        <div class="col-auto">
          <span class="wpcf7-form-control-wrap name">
            <input type="text" name="name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-validates-as-email form-control" aria-required="true" aria-invalid="false" placeholder="Seu nome">
          </span>
        </div>
        <div class="col-auto">
          <span class="wpcf7-form-control-wrap email"><input type="email" name="email" value="" size="40" class="form-control wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Email"></span>
        </div>
      </div>

      <div class="form-row">
        <div class="col-auto">
          <span class="wpcf7-form-control-wrap phone"><input id="phone" type="text" name="phone" value="" size="40" class="form-control wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" placeholder="Celular"></span>
        </div>
        <div class="col-auto">
          <span class="wpcf7-form-control-wrap postalCode"><input id="postalCode" type="text" name="postalCode" value="" size="40" class="form-control wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="CEP"></span>
        </div>
      </div>

      <input id="recaptcha-submit" type="submit" value="Quero fazer parte!" class="wpcf7-form-control wpcf7-submit btn btn-primary"><span class="ajax-loader"></span>

      <input type="hidden" name="country" value="BR" class="wpcf7-form-control wpcf7-hidden"/>
      <input type="hidden" name="origin" value="6e6efc61-205f-469a-bf3d-1bdb0a6407e8" class="wpcf7-form-control wpcf7-hidden"/>
      <input type="hidden" name="organization" value="604eeaf7-139b-4250-addf-b502cecdfc69" class="wpcf7-form-control wpcf7-hidden"/>
      <input type="hidden" name="tags" value="aac07cb5-02ae-4159-b7c9-a74cabe3d816" />

      <div class="g-recaptcha" data-sitekey="#######################" data-size="invisible" data-callback="onSubmit"></div>
    </div>
    <div class="wpcf7-response-output wpcf7-display-none" aria-hidden="true"></div>
  </form>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js'></script>
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<script>
    $ = jQuery;
    jQuery(document).ready(function () {
      $.fn.serializeFormJSON = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
          if (o[this.name]) {
            if (!o[this.name].push) {
              o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
          } else {
            o[this.name] = this.value || '';
          }
        });
        return o;
      };
  
      $('#phone').mask('(99) 9999-99990');
      $('#postalCode').mask('99999-999');
  
      $('.cf7mls_next, .cf7mls_back').click(function(event) {
        if ($('#signup-form').valid()) {
          $('.form-step, .cf7mls_next').toggle();
          $("#error-wrap").hide();
        }
      });
  
      $('#signup-form, .cf7mls_next').validate({
        onkeyup: false,
        errorElement: 'div',
        ignore: ":hidden:not(.force-validation)",
  
        errorPlacement: function (error, element) {
          error.appendTo($("#errors"));
        },
  
        highlight: function (element, errorClass) {
          $('#' + $(element).attr('name') + '-error').remove();
        },
        unhighlight: function (element) {
          $('#' + $(element).attr('name') + '-error').remove();
          $('#error-wrap').fadeOut(300);
        },
  
        rules: {
          email: {required: true, email: true},
          name: {required: true, minlength: 2},
          postalCode: {required: true, minlength: 9, maxlength: 9},
          phone: {required: true, maxlength: 15}
        },
  
        messages: {
          email: "Preencha o campo com um email válido",
          name: "Preencha o campo com um nome válido",
          postalCode: "Preencha o campo com um CEP válido",
          phone: "Preencha o campo com um telefone válido"
        },
      });
  
      $body = $("body");
      $(document)
        .ajaxStart(function () { $body.addClass("loading"); })
        .ajaxStop(function () { $body.removeClass("loading"); });
  
      $("#recaptcha-submit").on("click", function (event) {
        if ($('#signup-form').valid()) {
          grecaptcha.execute();
        }
        return false;
      });
    });
  
    function onSubmitError(response) {
      grecaptcha.reset();
      $("#error-wrap li").remove();
      $("#error-wrap").show();
  
      if (response) {
        if (response.messages) {
          $.each(response.messages, function (index, message) {
            var msg = document.createElement("li");
            msg.innerHTML = message;
            $("#error-wrap ul").append(msg);
          });
        }
      } else {
        var msg = document.createElement("li");
        msg.innerHTML = 'Erro interno, por favor, tente novamente mais tarde.';
        $("#error-wrap ul").append(msg);
      }
    }
  
    function onSubmit(token) {
      var form = $("#signup-form");
      var data = $(form).serializeFormJSON();
      if (typeof(data.tags) === 'string') {
        data.tags = [ data.tags ];
      }
      
      $.ajax({
        type: "POST",
        url: "https://cpm.teste.com/api/public/contact?g-recaptcha-response=" + token,
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
  
        success: function (response) {
          var redirectUrl = "/?go=cadastro-enviado-com-sucesso";
          if (response.success) {
            $("#error-wrap").hide();
            $("#signup-form").addClass("success");
            $("#signup-form #wrap").hide();
            $("#success-wrap").show();
            if (redirectUrl) {
              window.location.href = redirectUrl;
            }
          } else {
            onSubmitError(response);
          }
        },
  
        error: function (error) {
          onSubmitError();
        }
      });
    }
  </script>
2

ok, so you can connect your custom form to a mautic form, the biggest challenge would be the captcha validation, since it depends on a server side validation and your validation seem to be done outside mautic by an ajax / http request to cpm.test.com, so unless the token is validated by the mautic server a bot can easily by pass that validation and send the data directly to mautic.

That Issue aside, here are the steps you can do to connect this form to mautic:

  1. In Mautic, create a form with the same fields (and name) as your form
  2. rename the field names from fieldname to mauticform[fieldname]
  3. create hidden fields with the following names:
    • mauticform[formId] whose value is the id of your mautic form
    • mauticform[formName] with the name of your mautic form
  • mauticform[return] no value.
  1. specify the following attributes for the form tag:
  • action = https://<your mautic instance>/form/submit?formId=<form ID>
  • data-mautic-form = the name of your form

  1. submit the form after your jQuery validation plugin is successful:
    in your code, after the your captcha is successfully validate replace the javascript redirection code with $("form-signup).submit();`

  2. Include the mautic form handling javascript code on the page (preferably inside )

<script type="text/javascript">
    /** This section is only needed once per page if manually copying **/
    if (typeof MauticSDKLoaded == 'undefined') {
        var MauticSDKLoaded = true;
        var head            = document.getElementsByTagName('head')[0];
        var script          = document.createElement('script');
        script.type         = 'text/javascript';
        script.src          = 'https://<mauticdomain>/media/js/mautic-form.js';
        script.onload       = function() {
            MauticSDK.onLoad();
        };
        head.appendChild(script);
        var MauticDomain = 'YOUR MAUTIC URL HERE';
        var MauticLang   = {
            'submittingMessage': "Please wait..."
        }
    }else if (typeof MauticSDK != 'undefined') {
        MauticSDK.onLoad();
    }
  1. (OPTIONAL BUT IMPORTANT) Manually handle mautic response and act accordingly.

What you did so far, handle the data on the client side and at the end submit the data to mautic. if mautic handled the data ok, the success message will be true, but the mautic validation will not be shown to the user because the regular HTML markup mautic is expecting is not there. so you need to hook up additional javascript code to handle the communication with mautic and update the client interface yourself.

this documentation show it how:
https://developer.mautic.org/#js-form-processing-hooks

the recommendation is to at least listen to when the mautic respond and act either by showing an error message or by redirecting to the successful page

MauticFormCallback['replaceWithFormName'] = {
    onResponse: function (response) {
         // called to process the response to the form submission
    },
};

here is an example I have in place for one of my clients:

 onResponse: (response) => { 
                    // after form submit
                    var theform = document.getElementById("mauticform_exclusaopisecofins");

                    if( !response.success ) {
                        console.log(response.validationErrors);
                        if( !!response.validationErrors ) {
                           
                            
                            const vErrors = Object.values(response.validationErrors)
                            
                            var alert_msg = '<div class="alert alert-danger" role="alert" style="display:none;">'+vErrors.join('<br />')+'</div>';
                            $(theform).prepend(alert_msg);
                            $('.alert').slideDown();

                        }

                        
                        document.getElementById("botao_submit_texto").innerText = "QUERO RESGATAR MEU CRÉDITO"                        
                        document.getElementById("botao_submit").disabled=false;
                        

                        return true;
                    } else {

                      var alert_msg = '<div class="alert alert-success" role="alert" style="display:none;">Informações recebidas com sucesso!</div>';
                      $(theform).prepend(alert_msg);
                      $('.alert').slideDown();
                      $(theform).find('input:not([type=hidden])').val('');
                      $(theform).find('input').css('border-color','');
                      $(theform).find('textarea').val('');

                      document.getElementById("botao_submit_texto").innerText = "OBRIGADO!"                        
                      fbq('track', 'Lead');

                    }
4

Got it, now how to score, about the answer I should give my user, I’m trying to do and I’m not going, forgive me I’m a little new to this.

Below is my code

<style>
  .banner-joinnow-form { display: block !important; background-color: transparent !important; padding: 0px 8px 8px 8px !important;  }
  .banner-joinnow-form .form-row { margin: auto !important; background-color: transparent !important;  padding: 7px 0 !important; }
  .banner-joinnow-form input { background-color: #fff !important; height: 40px !important;  width: 50% !important; margin-top: 10px !important; }
  .banner-joinnow-form .wpcf7-form-control-wrap { height: 40px !important; }
  .banner-joinnow-form input[type="submit"] { line-height: 0 !important; text-align: center !important; height: 50px !important; width: 100% !important; margin-top: 15px !important; border-radius: 1px !important; background-color: #fcb94b !important; font-size: 20px !important; font-weight: bold !important; text-transform: none !important;  }
  .banner-joinnow-form input[type="submit"]:hover { background-color: #e18d03 !important; }
  .banner-joinnow-form input[type="email"], .banner-joinnow-form input[type="number"] { width: 242px !important; border-right: 0px !important; margin-bottom: 0 !important; margin-top: 10px !important; }
  .banner-joinnow-form input[type="text"] { width: 242px !important; }
  #signup-form .forms-response-msg:not(:empty),  #signup-form #success-wrap,  #signup-form #error-wrap { text-align: center; color: #fff; font-size: 15px; margin: 0; padding: 0; font-weight: bold; font-size: 14px; }
  #signup-form #errors { margin-left: 20px; }
  #signup-form #error-wrap h3,  #signup-form #success-wrap h2,  #signup-form #success-wrap h3 { color: #ffffff; }
  #signup-form #success-wrap p,  #signup-form #error-wrap p { text-align: center !important; color: #fff; }
  #signup-form #success-wrap .news-signup-text { font-weight: normal; }
  .grecaptcha-badge { visibility: hidden !important; }

  /* mobile */
  @media (max-width: 639px) {
    .banner-joinnow-form { width: 100%; }
    .banner-joinnow-form .form-row { padding: 0px !important; }
    .banner-joinnow-form .wpcf7-form-control-wrap { height: auto !important; }
    .banner-joinnow-form .form-row .col-auto { margin: auto !important; width: 100% !important; }
    .banner-joinnow-form input[type="text"], .banner-joinnow-form input[type="email"] { width: 100% !important; margin: auto !important; margin-top: 10px !important; }
  }

  @media (max-width: 320px) {
    .banner-joinnow-form input[type="email"], .banner-joinnow-form input[type="text"] { height: 30px !important; }
  }
</style>

<div role="form" class="wpcf7" id="wpcf7-f809-p294-o1" dir="ltr">
  <div class="screen-reader-response" aria-live="polite"></div>

  <form id="signup-form" action="https://info.cidgomes.com.br/form/submit?formId=###" method="post" class="wpcf7-form" data-mautic-form="teste" novalidate="novalidate">
    <div id="success-wrap" style="display: none">
      <p>Obrigado por se cadastrar!</p>
    </div>

    <div id="error-wrap" style="display: none">
      <div class="list-wrapper">
        <ul class="errors"></ul>
      </div>
    </div>

    <div id="errors" class="forms-response-msg"></div>

    <div class="banner-joinnow-form form-wrapper">

      <div class="form-row">
        <div class="col-auto">
          <span class="wpcf7-form-control-wrap name">
            <input type="text" name="mauticform[f_name]" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-validates-as-email form-control" aria-required="true" aria-invalid="false" placeholder="Seu nome">
          </span>
        </div>
        <div class="col-auto">
          <span class="wpcf7-form-control-wrap email"><input type="email" name="mauticform[email]" value="" size="40" class="form-control wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Email"></span>
        </div>
      </div>

      <div class="form-row">
        <div class="col-auto">
          <span class="wpcf7-form-control-wrap phone"><input id="phone" type="text" name="mauticform[phone]" value="" size="40" class="form-control wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" placeholder="Celular"></span>
        </div>
        <div class="col-auto">
          <span class="wpcf7-form-control-wrap postalCode"><input id="postalCode" type="text"  name="mauticform[postalcode]" value="" size="40" class="form-control wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="CEP"></span>
        </div>
      </div>

     <input id="recaptcha-submit" type="submit" value="Quero fazer parte!" class="wpcf7-form-control wpcf7-submit btn btn-primary"><span class="ajax-loader"></span>

     <input type="hidden" name="mauticform[formId]" id="mauticform_teste_id" value="###">
     <input type="hidden" name="mauticform[return]" id="mauticform_teste_return" value="">
     <input type="hidden" name="mauticform[formName]" id="mauticform_teste_name" value="teste">
     
		
	  </div>
    <div class="wpcf7-response-output wpcf7-display-none" aria-hidden="true"></div>
  </form>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js'></script>
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<script>

onResponse: (response) => { 
                    // after form submit
                    var theform = document.getElementById("mauticform_teste");

                    if( !response.success ) {
                        console.log(response.validationErrors);
                        if( !!response.validationErrors ) {
                           
                            
                            const vErrors = Object.values(response.validationErrors)
                            
                            var alert_msg = '<div class="alert alert-danger" role="alert" style="display:none;">'+vErrors.join('<br />')+'</div>';
                            $(theform).prepend(alert_msg);
                            $('.alert').slideDown();

                        }

                        
                        document.getElementById("submit").innerText = "Quero fazer parte!"                        
                        document.getElementById("submit").disabled=false;
                        

                        return true;
                    } else {

                      var alert_msg = '<div class="alert alert-success" role="alert" style="display:none;">Informações recebidas com sucesso!</div>';
                      $(theform).prepend(alert_msg);
                      $('.alert').slideDown();
                      $(theform).find('input:not([type=hidden])').val('');
                      $(theform).find('input').css('border-color','');
                      $(theform).find('textarea').val('');

                      document.getElementById("botao_submit_texto").innerText = "OBRIGADO!"                        
                      fbq('track', 'Lead');

                    }
                    </script>

Can I redirect to a url?

5

you should remove the example I gave , it has specific items from another page, and I only included part o the snippet, here it how it should be placed merging with your jquery validator code:

<script>
    $ = jQuery;
    jQuery(document).ready(function () {
      $.fn.serializeFormJSON = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
          if (o[this.name]) {
            if (!o[this.name].push) {
              o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
          } else {
            o[this.name] = this.value || '';
          }
        });
        return o;
      };
  
      $('#phone').mask('(99) 9999-99990');
      $('#postalCode').mask('99999-999');
  
      $('.cf7mls_next, .cf7mls_back').click(function(event) {
        if ($('#signup-form').valid()) {
          $('.form-step, .cf7mls_next').toggle();
          $("#error-wrap").hide();
        }
      });
  
      $('#signup-form, .cf7mls_next').validate({
        onkeyup: false,
        errorElement: 'div',
        ignore: ":hidden:not(.force-validation)",
  
        errorPlacement: function (error, element) {
          error.appendTo($("#errors"));
        },
  
        highlight: function (element, errorClass) {
          $('#' + $(element).attr('name') + '-error').remove();
        },
        unhighlight: function (element) {
          $('#' + $(element).attr('name') + '-error').remove();
          $('#error-wrap').fadeOut(300);
        },
  
        rules: {
          email: {required: true, email: true},
          name: {required: true, minlength: 2},
          postalCode: {required: true, minlength: 9, maxlength: 9},
          phone: {required: true, maxlength: 15}
        },
  
        messages: {
          email: "Preencha o campo com um email válido",
          name: "Preencha o campo com um nome válido",
          postalCode: "Preencha o campo com um CEP válido",
          phone: "Preencha o campo com um telefone válido"
        },
      });
  
      $body = $("body");
      $(document)
        .ajaxStart(function () { $body.addClass("loading"); })
        .ajaxStop(function () { $body.removeClass("loading"); });
  
      $("#recaptcha-submit").on("click", function (event) {
        if ($('#signup-form').valid()) {
          grecaptcha.execute();
        }
        return false;
      });
    });
  
    function onSubmitError(response) {
      grecaptcha.reset();
      $("#error-wrap li").remove();
      $("#error-wrap").show();
  
      if (response) {
        if (response.messages) {
          $.each(response.messages, function (index, message) {
            var msg = document.createElement("li");
            msg.innerHTML = message;
            $("#error-wrap ul").append(msg);
          });
        }
      } else {
        var msg = document.createElement("li");
        msg.innerHTML = 'Erro interno, por favor, tente novamente mais tarde.';
        $("#error-wrap ul").append(msg);
      }
    }
  
    function onSubmit(token) {
      var form = $("#signup-form");
      var data = $(form).serializeFormJSON();
      if (typeof(data.tags) === 'string') {
        data.tags = [ data.tags ];
      }
      
      $.ajax({
        type: "POST",
        url: "https://cpm.teste.com/api/public/contact?g-recaptcha-response=" + token,
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
  
        success: function (response) {

          if (response.success) {
            $("#error-wrap").hide();
            $("#signup-form").addClass("success");
            $("#signup-form #wrap").hide();
            $("#success-wrap").show();

               $("#form-signup").submit();

          } else {
            onSubmitError(response);
          }
        },
  
        error: function (error) {
          onSubmitError();
        }
      });
    }

MauticFormCallback['mauticform_teste'] = {
    onResponse: function (response) {
                             var theform = document.getElementById("signup-form");

                    if( !response.success ) {

                        if( !!response.validationErrors ) {                          
                            
                            const vErrors = Object.values(response.validationErrors)
                            
                            var alert_msg = '<div class="alert alert-danger" role="alert" >'+vErrors.join('<br />')+'</div>';
                            $(theform).prepend(alert_msg);

                        }

                        return true;
                    } else {
                         window.location.href =  "/?go=cadastro-enviado-com-sucesso";
                    }
    },
};
  </script>
6

keep in mind that what I have provided are:

  1. generic steps on how to handle forms builded outside mautic to submit to mautic.
  2. a suggestion code on how to use your form validation code before submitting the data to mautic

further tests is required, and you might still want to work on your captcha, which I am not sure how you would handle without a captcha plugin on mautic server, because this code is basically validating the captcha in another server then submitting the data to mautic, and a bot can skip the validation and send it directly to mautic.

7

I understand, thank you very much for this help that you are doing, I don’t understand much the company’s developer left unexpectedly and I’m trying my best to solve this problem, since we are going to set up another server structure, my idea is to take advantage of this form, to send it to Mautic, since it does not have the captcha plugin, it is not possible to do this validation on the Mautic side, is there a simple way to just send and redirect to another page? if I had a validator with this one?

$.ajax({
        type: "POST",
        url: "https://cpm.teste.com/api/public/contact?g-recaptcha-response=" + token,
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json",

(this code we will not use anymore)