External JS portal help needed

[Vartkat]

HI,

I'm currently using the portal with an external page to get name and phone number of each person who wants to use the network.
The client first gets a page with a 'Connect' button and then is redirected to a form page.

Two problems :
1- I'd like to avoid these two steps and make it one step
2- Validating the form is not really giving access it only gets the filed infos, in real access is already there.

So I think this API could be a solution but my dev skills are at their limits here.

As the form page is running a JS script to post data to a database, as far as I understood I need the script to post to both the database and to the API using only one button and I didn't find how to do that.

Here is the HTML form code :

<style type="text/css" scoped>
    @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic);
    .mauticform_wrapper { max-width: 600px; margin: 10px auto; font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif !important; color: #37302d;}
    .mauticform-innerform {}
    .mauticform-post-success {}
    .mauticform-name { font-weight: bold; font-size: 1.5em; margin-bottom: 3px; }
    .mauticform-description { margin-top: 2px; margin-bottom: 10px; }
    .mauticform-error { margin-bottom: 10px; color: red; }
    .mauticform-message { margin-bottom: 10px;color: green; }
    .mauticform-row { display: block; margin-bottom: 20px; }
    .mauticform-label { color: #ffffff; font-size: 17px; display: block; font-weight: 400; margin-bottom: 4px; }
    .mauticform-row.mauticform-required .mauticform-label:after { color: #e32; content: " *"; display: inline; }
    .mauticform-helpmessage { display: block; font-size: 0.9em; margin-bottom: 3px; }
    .mauticform-errormsg { display: block; color: red; margin-top: 2px; }
    .mauticform-selectbox, .mauticform-input, .mauticform-textarea { width: 100%; padding: 0.5em 0.6em; border: 1px solid #CCC; border-radius: 6px; background: #fff; box-shadow: 0px 0px 0px #fff inset; box-sizing: border-box; }
    .mauticform-checkboxgrp-row {}
    .mauticform-checkboxgrp-label { font-weight: normal; }
    .mauticform-checkboxgrp-checkbox {}
    .mauticform-radiogrp-row {}
    .mauticform-radiogrp-label { font-weight: normal; }
    .mauticform-radiogrp-radio {}
    .mauticform-button-wrapper .mauticform-button.btn-default {}
    .mauticform-button-wrapper .mauticform-button {
      background-color: #ffffff;
      border-color: #cccccc;
      border-radius: 6px;
      color: #333333;
      display: inline-block;
      margin-bottom: 0;
      font-weight: 400;
      letter-spacing: 2px;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      background-image: none;
      border: 1px solid transparent;
      white-space: nowrap;
      padding: 10px 16px;
      font-size: 14px;
      line-height: 1.333;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .mauticform-button:hover {
      background-color: #e6e6e6;
      border-color: #adadad;
    }
    .mauticform-button-wrapper .mauticform-button.btn-default[disabled] { background-color: #ffffff; border-color: #dddddd;}
</style>

<div id="mauticform_wrapper_wificredentials" class="mauticform_wrapper">
    <form autocomplete="false" role="form" method="post" action="https://database.mydomain.com/form/submit?formId=3" id="mauticform_wificredentials" data-mautic-form="wificredentials" enctype="multipart/form-data">
        <div class="mauticform-error" id="mauticform_wificredentials_error"></div>
        <div class="mauticform-message" id="mauticform_wificredentials_message"></div>
        <div class="mauticform-innerform">

            
          <div class="mauticform-page-wrapper mauticform-page-1" data-mautic-form-page="1">

            <div id="mauticform_wificredentials_first_name" data-validate="first_name" data-validation-type="text" class="mauticform-row mauticform-text mauticform-field-1 mauticform-required">
                <label id="mauticform_label_wificredentials_first_name" for="mauticform_input_wificredentials_first_name" class="mauticform-label">First Name</label>
                <span class="mauticform-helpmessage">Please enter your firstname</span>
                <input id="mauticform_input_wificredentials_first_name" name="mauticform[first_name]" value="" placeholder="John" class="mauticform-input" type="text">
                <span class="mauticform-errormsg" style="display: none;">This is required.</span>
            </div>

            <div id="mauticform_wificredentials_last_name" data-validate="last_name" data-validation-type="text" class="mauticform-row mauticform-text mauticform-field-2 mauticform-required">
                <label id="mauticform_label_wificredentials_last_name" for="mauticform_input_wificredentials_last_name" class="mauticform-label">Last Name</label>
                <input id="mauticform_input_wificredentials_last_name" name="mauticform[last_name]" value="" placeholder="Smith" class="mauticform-input" type="text">
                <span class="mauticform-errormsg" style="display: none;">This is required.</span>
            </div>

            <div id="mauticform_wificredentials_mobile" data-validate="mobile" data-validation-type="tel" class="mauticform-row mauticform-tel mauticform-field-3 mauticform-required">
                <label id="mauticform_label_wificredentials_mobile" for="mauticform_input_wificredentials_mobile" class="mauticform-label">Mobile</label>
                <input id="mauticform_input_wificredentials_mobile" name="mauticform[mobile]" value="" class="mauticform-input" type="tel">
                <span class="mauticform-errormsg" style="display: none;">This is required.</span>
            </div>

            <div id="mauticform_wificredentials_email_address" data-validate="email_address" data-validation-type="email" class="mauticform-row mauticform-email mauticform-field-4 mauticform-required">
                <label id="mauticform_label_wificredentials_email_address" for="mauticform_input_wificredentials_email_address" class="mauticform-label">Email Address</label>
                <input id="mauticform_input_wificredentials_email_address" name="mauticform[email_address]" value="" class="mauticform-input" type="email">
                <span class="mauticform-errormsg" style="display: none;">This is required.</span>
            </div>

            <div id="mauticform_wificredentials_access_internet" class="mauticform-row mauticform-button-wrapper mauticform-field-5">
                <button type="submit" name="mauticform[access_internet]" id="mauticform_input_wificredentials_access_internet" value="" class="mauticform-button btn btn-default">Access Internet</button>
            </div>
            </div>
        </div>

        <input type="hidden" name="mauticform[formId]" id="mauticform_wificredentials_id" value="3">
        <input type="hidden" name="mauticform[return]" id="mauticform_wificredentials_return" value="">
        <input type="hidden" name="mauticform[formName]" id="mauticform_wificredentials_name" value="wificredentials">

        </form>
</div>

And the JS code :

<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://database.mydomain.com/media/js/mautic-form.js';
        script.onload       = function() {
            MauticSDK.onLoad();
        };
        head.appendChild(script);
        var MauticDomain = 'https://database.mydomain.com';
        var MauticLang   = {
            'submittingMessage': "Please wait..."
        }
    }else if (typeof MauticSDK != 'undefined') {
        MauticSDK.onLoad();
    }
</script>

As you can read this is Mautic code (but I think the solution could be used for many other) and Mautic is running on PHP, so I beleive the mariage is possible.

An alternative method is calling a JS script which generates these lines, but of course, in this case it's not possible to modify the code or you have to modify Mautic's core code (or make a plugin which is beyond the scope of my question).

If ever somone has a few minutes to look into this...

Thanks a lot

regards

V.