signup-modal.php

<div class="modal" id="modal">
    <div class="modal-frame">
        <div class="modal-content">
            <div class="modal-window modal-window-branded">
                <h2>Organize Your Receipts with a Shoeboxed Account</h2>
                <p>Enter your email address below to get started with a <strong>Shoeboxed monthly or annual plan</strong> of your choice.</p>
                <form class="ui-form signup-form" action="https://register.shoeboxed.com//#main" method="POST" autocomplete="off">
                    <div class="ui-form-row">
                        <div class="ui-form-element">
                            <input type="email" placeholder="[email protected]" class="ui-field ui-field-large" id="<?php echo ( $field_id ) ? $field_id : 'email'; ?>" name="email" required />
                        </div>
                        <div class="ui-form-element">
                            <input type="submit" value="Get Started" class="ui-action ui-action-main ui-action-large" />
                        </div>
                    </div>
                </form>
                <a href="#" class="modal-close">Close</a>
            </div>
        </div>
    </div>
</div>
<?php
/* Intercept #modal form submit, send data to HubSpot, then continue on with
   form submission. NB: this script is here, instead of modal.js, so that we
   can use variables from functions.php. */
?>
<script type="text/javascript">
 $(document).ready(function() {
     $('#modal form').one('submit', function(e) {
         e.preventDefault();
         let f = $(this);
         let emailAddress = $('form').find('input[name="email"]').val();
         if (emailAddress.trim()) {
             let payload = {
                 submittedAt: new Date().getTime().toString(),
                 fields: [{
                     name: "email",
                     value: emailAddress
                 }],
                 context: {
                     hutk: $.cookie('hubspotutk'),
                     pageUri: window.location.href,
                     pageName: document.title
                 },
                 skipValidation: true
             };
             $.ajax({
                 type: "POST",
                 url: "https://api.hsforms.com/submissions/v3/integration/submit/<?php echo get_hubspot_portal_id(); ?>/<?php echo get_hubspot_registration_form_id(); ?>",
                 data: JSON.stringify(payload),
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 timeout: 2000,
                 success: function (data) { f.submit(); return; },
                 failure: function (data) { console.error('form post got error ' + data); f.submit(); return; }
             });
         }

         return;
     });
 });
</script>