Custom Contact Forms

The Media Shuttle API allows you to implement a customized contact form that is used instead of the default Contact Admin form for Send, Share, and Submit portal interfaces.

Portal members access the Contact Admin form from the Options menu:

contact admin

By implementing a custom contact form, you have greater control over the information requested from portal members and use your own web server to process requests, increasing communication security within your organization.

To implement your own contact form, your form handling application must be hosted on a server you control, have a HTTPS url, and be authorized to be shown in an inline frame (iframe).

As part of your contact form you must include a callback to POST EmbeddedContactFormSubmit back to the portal to close the Contact Admin dialog box.

API Example

To include a custom contact form, you must include contactFormURL in the request when creating a new portal via the /portals endpoint, or by updating an existing portal via the /portals/{portalId} endpoint.

Copy

{
  "name": "New Send Portal",
  "url": "example.mediashuttle.com",
  "type": "send",

  "authentication": {
    "mediaShuttle": true,
    "saml": false
  },
  "linkAuthentication": {
    "allowUnauthenticatedUploads": true,
    "allowUnauthenticatedDownloads": false
  },
  "notifyMembers": true,
  "contactFormUrl": "https://www.example.com/form/form-body.html"
}

Example Form

The following example form uses jQuery with AJAX to submit a form to a PHP-based server using action_page.php script to handle form submissions.

Copy

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example Form Title Page</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Contact Administrator</h2>
  <form action="/action_page.php" id="form">
    <div class="form-group">
      <label for="name">Send a message to portal administrators:</label>
      <textarea class="form-control" id="name" name="name" rows="4" cols="50"></textarea>
    </div>
    <button id="submit">Submit</button>
  </form>
</div>
</body>
  <script>
    $('#submit').click(function () {
      $('#form').submit(function(){
        $.ajax({
          url: $('#form').attr('action'),
          type: 'POST',
          data : $('#form').serialize(),
          success: function(){
            parent.postMessage({"type": "EmbeddedContactFormSubmit"}, '*');
          }
        });
        return false;
      });
  })
  </script>
</html>