You are viewing limited content. For full access, please sign in.

Question

Question

Implementing Chat in Forms

asked on August 17, 2018

Hello!

We have a customer wanting to have a chat option available in Laserfiche Forms while filling out a form (somewhat like a need help? Click here! option). We're thinking that we could likely implement such a thing in Javascript, using a custom HTML object as a container for it, but it's proving difficult to get anything to stick. Has anyone else ever attempted this, or know a solid way to try and implement it?

Thanks in advance!

0 0

Replies

replied on August 22, 2018

Hi Peter,

That is a great idea!! I haven't implemented something like that but I might - instead of a chat I played with a secondary form (let's call it Contact Form) that will email our IT's department ticket system and automatically make a ticket (if you want to get fancy, you can even add a workflow on the Contact Form that will escalate it after certain time, depending on urgency).

Let's pretend that this is your form and the top you have the option to Contact the IT department (or really whoever):

Then they can click on "Contact Us" button that will show the embedded Contact Form in an iframe. This gives you all kinds of creative possibilities again - you can disable the main Submit button when the Contact Form is submitted and display instructions in the window, or even redirect the entire page elsewhere - really depends of your need.
So this is what the Contact Form looks like when open:

My code is setup to hide the main Submit button after they open the Contact Form and right now I didn't add a way to close it but that is doable as well.

The main form setup is fairly simple:

Add two HTML fields.

1st one is your alert window (in this case form section!) with the "Contact Us" button.

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<b>TIP:</b> Need help filling out this form? Let us know and help will be on the way!
<br><br>
<input type="button" name="answer" value="Contact Us" id="clickMe">
</div>

2nd HTML field will automatically be hidden after click to be Done with Editing since we want it to be hidden by default:

<div id="contact" style="display:none;">
<br>
<iframe src="URLtoYourContactForm#inside" width="600px" height="670px" align="center"></iframe>
</div>

Now the CSS :

.alert {
    padding: 20px;
    background-color: #6BBD6E; /* Green */
    color: white;
    margin-bottom: 15px;
}

/* The close button */
.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}
.closebtnForm {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
    color: black;
}

Javascript:

$( document ).ready(function() {

 //Displays the iframe form 
  function showDiv() {
   document.getElementById('contact').style.display = "block";
    //hides the submit button
    $(".action-btn.Submit").hide();
}
  

 //Makes the "Contact Us" button run the showDIV function 
  var el = document.getElementById("clickMe");
	if (el.addEventListener)
    	el.addEventListener("click", showDiv, false);
	else if (el.attachEvent)
    	el.attachEvent('onclick', showDiv);  
});


Let me know if this helps, I know that it is not exactly what you needed but it might help you for now.
 

1 0
replied on October 11, 2019 Show version history

Hi, I'm trying to recreate the scenario Lidija Bell suggested. I'm a bit confused. Do I create a starting form and a separate form for the need help? Or do I build everything into one form? At any point am I going to use field rules? If so, what would that look like?

 

replied on October 11, 2019

Hey Sandra,

My understanding is that this is set up in one single form. You have a Contact Us button which will open an iFrame inside a Custom HTML object in the form, which will send the email once it's submitted. This all is contained within the iFrame, so when that task is complete, the actual form doesn't need to be submitted, and the user doesn't need to hop from form to form to get help. 

Field Rules aren't really required here, it's all handled by the CSS/Javascript.

replied on October 11, 2019

Hi Peter,

Thank you for the clarification. It makes sense what you said. However, I think I may be missing something because when I click on my submit button the iframe opens, however, it captures what's on my form. I thought that the iFrame would launch a secondary form specific to only the questions I want to ask on the contact us form. 

 

I've attached screenshots. Grateful for any advice information you can provide me with.

 

 

You are not allowed to follow up in this post.

Sign in to reply to this post.