Popup contact form – Html

could you please help me find the problem in the below code?

When I open it in codepen it works. When I add it to my website, the JS is not working "$ is not defined". I’m a beginner so I don’t know how to define $.

HTML is:

<div id="contact">Contact</div>

<div id="contactForm">

  <h1>Keep in touch!</h1>
  <small>I'll get back to you as quickly as possible</small>
  
  <form action="#">
    <input placeholder="Name" type="text" required />
    <input placeholder="Email" type="email" required />
    <input placeholder="Subject" type="text" required />
    <textarea placeholder="Comment"></textarea>
    <input class="formBtn" type="submit" />
    <input class="formBtn" type="reset" />
  </form>
</div>

`$(function() {

$('#contact').click(function() {
  $('#contactForm').fadeToggle();
})
$(document).mouseup(function (e) {
  var container = $("#contactForm");

  if (!container.is(e.target) 
      && container.has(e.target).length === 0) // ... nor a descendant of the container
  {
      container.fadeOut();
  }
});

});`