Back to all Elements

Contact form as a Chat widget

A contact form disguised as a chat widget.

This small cloneable project is 90% webflow native NoCode elements. The only code part here is the 'click outside to close' thingy...
Basically a few lines of code to  close the widget whenever the user is clicking anywhere else on the page.

So, we start by adding the toggle animation for opening and closing the widget when clicking the Chat icon:

<script>
$('.email-widget-icon').click(function() {
 $('.email-widget-form-block').toggleClass('open-widget');
})
</script>

Copy

And of-course the relevant class (which can be also created in Webflow, but then there's the possibility of deleting it when performing a cleanup):

<style>
.open-widget {
transform: scale(1);
 Opacity: 1;
}
</style>

Copy

And lastly we add the 'click-outside-to-close' part, which checks if our mouse pointer is inside or outside the widget:

<script>
$(document).mouseup(function(e)
{
   var container = $(".email-widget-wrap");

   if (!container.is(e.target) && container.has(e.target).length === 0)
   {
       $(".email-widget-form-block").removeClass('open-widget');
   }
});
</script>

Copy

Preview:

Michael's Vsauce was my gateway Youtube channel to the world of fun educational vlogs. This was the 1st video I stumbled upon.

Might also interest you:

Hover to reveal Mask

Cloneable
Code
Design

A fixed background image that is revealed by mouse hover all over the section

Read more

Auto Change Tabs 2.0

Cloneable
Code
Interactions

A new and improved version for a Tabs element that automatically change tabs

Read more

Changing Text

Interactions
Cloneable
Tricks

Change text in a sentence/headline with Webflow's interactions

Read more