Contact form in custom modal window

Home > Technical Support > Integrations and plugins > Advanced contact / chat widgets integration > Contact form in custom modal window

A customer of ours requested a contact form which would open in a modal window when an inline text in his website navigation was clicked. So instead of navigating the customer to your Contact us page by clicking you can directly open the contact form in a modal window over the content of the page the customer is currently visiting.

There is one aspect to keep in mind before you decide that you would like to use this implementation and it is the fact that there will be no online visitors tracking with this code and no proactive chat invitations. If you need to track these then you need to add another LiveAgent code to your website. This might be an advantage for some since the network traffic is limited and a downside for others.

Here is how it looks

Once the "open form" text is clicked on the website the form is opened in its own modal window:

 

This is how you can set it up

1. Create an In-page Form from your LiveAgent admin panel Configuration->Contact form->In-page Forms. During creation note down the ID of the form from the Integration section:

2. When editing your form go to Contact form->Design section and at the bottom find the option to set custom css and insert the following:
 

html, body, .MainElement {
  width:100% !important;
  height:100% !important;
}

.KbSidePanel {
  border:none;
  border-radius:0;
}

.g-FormField2 .MessageArea textarea {
    height: 250px;
}

.FormTitle {
    font-size: 17px;
    padding: 26px 0;
}

3. Add the below code into your website. Replace YOUR_LIVEAGENT_URL and YOUR_FORM_ID in the following code with the ID you noted in step 1 and with your LiveAgent URL address:
 

<!DOCTYPE html>
<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>


<!-- OPEN FORM JS CODE -->
<script type="text/javascript">
  var integrationWidgetID = "YOUR_FORM_ID";
  var integrationSRC = "https://YOUR_LIVEAGENT_URL/scripts/track.js";
  var integrationID = 'la_x2s6df8d';
  var myLaForm;
    function openForm() {

    var node = document.createElement("div");
    node.setAttribute("id", "modal_plugin");
    node.innerHTML =  '<div id="modal_blocker" style="position: fixed; top:0; left:0; width:100%;height:100%;opacity:0.6;z-index:999998;background:#000;"></div>'
      + '<div id="modal_window" style="z-index:200; position:fixed; left:50%; top:50%; width:80%; max-width:1000px; height:90%; max-height:800px; z-index:999999; background:#fff; border: 0px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5);">'
      + '<style>iframe[id*="b_' + integrationWidgetID + '"], #modal_content_wrapper {width:100% !important; height:100% !important;} #modal_content_wrapper {z-index:2; position:relative;} #modal_loading { z-index:1; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .dot { width: 10px; height: 10px; border: 2px solid rgba(0, 0, 0, 0.5); border-radius: 50%; float: left; margin: 0 5px; -webkit-transform: scale(0); transform: scale(0); -webkit-animation: fx 1000ms ease infinite 0ms; animation: fx 1000ms ease infinite 0ms; } .dot:nth-child(2) { -webkit-animation: fx 1000ms ease infinite 300ms; animation: fx 1000ms ease infinite 300ms; } .dot:nth-child(3) { -webkit-animation: fx 1000ms ease infinite 600ms; animation: fx 1000ms ease infinite 600ms; } @-webkit-keyframes fx { 50% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 100% { opacity: 0; } } @keyframes fx { 50% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 100% { opacity: 0; } } }</style>'
      + '<div id="modal_loading"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>'
      + '<div id="modal_content_wrapper"><div id="modal_content"></div></div>'
      + '<div id="modal_close" style="position:absolute; top:0; right:0; margin-top:-30px; margin-right:-30px; cursor:pointer; color: #fff; font-size: 25px; font-family:Arial; display: inline-block; padding:5px;">&#x2716;</div></div>';
    document.body.appendChild(node);
    var modalWrapper = document.getElementById("modal_blocker");
    var modalWindow  = document.getElementById("modal_window");
    modalWindow.style.marginTop = (-modalWindow.offsetHeight)/2 + "px";
    modalWindow.style.marginLeft = (-modalWindow.offsetWidth)/2 + "px";

    var closeModal = function(e)
    {
      document.getElementById("modal_close").removeEventListener("onclick", closeModal);
      document.getElementById("modal_blocker").removeEventListener("onclick", closeModal);
      if (document.getElementById("la_x2s6df8d") != null) {
            var scriptEl = document.getElementById(integrationID);
            scriptEl.parentNode.removeChild(scriptEl);
      }
      if (document.getElementById("modal_plugin") != null) {
            var modalEl = document.getElementById("modal_plugin");
            modalEl.parentNode.removeChild(modalEl);
      }
      delete LiveAgent;
      delete LiveAgentTracker;
      delete LiveAgentTrackerXD;
    };

    document.getElementById("modal_close").addEventListener("click", closeModal, false);
    document.getElementById("modal_blocker").addEventListener("click", closeModal, false);

    var my_awesome_script = document.createElement('script');
    my_awesome_script.setAttribute('src',integrationSRC);
    my_awesome_script.setAttribute('id',integrationID);
    my_awesome_script.setAttribute('name','formScript');
    my_awesome_script.onload = function(){ myLaForm = LiveAgent.createForm(integrationWidgetID, document.getElementById('modal_content')); };
    document.body.appendChild(my_awesome_script);

    }
</script>


<!-- LINK FOR OPEN FORM -->
<a href="#" onclick="openForm(); return false;">open form</a>

</body></html>

The element which opens the form is specified at the bottom of the code. Basically you could call the openForm() function on any element of your website when you'd want to.

Updated:

Other Articles