Popup Contact Form

By Rafi

F6
#
form contact js interaction show hide
How do I use This?

A nice contact form that is fixed to the bottom of the viewport and slides up when clicked.

HTML
<div class="contact-panel" id="contact-panel" data-toggler=".is-active">
  <a class="contact-panel-button" data-toggle="contact-panel">Contact us</a>
  <form action="">
    <div class="row">
      <label>Full name *
        <input type="text" placeholder="Full name">
      </label>
    </div>
    <div class="row">
      <label>Email *
        <input type="email" placeholder="Email address">
      </label>
    </div>
    <div class="row">
      <label>Message *
        <textarea placeholder="Describe your needs" rows="3"></textarea>
      </label>
    </div>
    <div class="contact-panel-actions">
      <button class="cancel-button" data-toggle="contact-panel">Nevermind</button>
      <input type="submit" class="button submit-button" value="Submit">
    </div>
  </form>
</div>


$contact-panel-bg: $black;
$contact-panel-height: 375px;
$contact-panel-width: 350px;
$contact-panel-right-offset: 20px;
$contact-panel-button-arrow: ⥣;

.contact-panel-button {
  background: $contact-panel-bg;
  color: $white;
  width: auto;
  padding: 0.25rem 1.25rem;
  text-align: center;
  position: absolute;
  top: -30px;
  right: 20px;
  transition: background 0.25s ease-in-out;

  &:after {
    content: "⥣";
    margin-left: 5px;
  }

  &:hover {
    background: lighten($contact-panel-bg, 10%);
    color: lighten($contact-panel-bg, 90%);
  }
}

.is-active .contact-panel-button:after {
  content: "⥥";
}

.contact-panel {
  padding: 1rem;
  z-index: 1;
  background: $contact-panel-bg;
  width: $contact-panel-width;
  height: $contact-panel-height;
  position: fixed;
  bottom: -$contact-panel-height;
  right: $contact-panel-right-offset;
  transition: bottom 0.5s ease-in-out;

  label {
    color: $white;
    width: 100%;
  }

  input[type="text"],
  input[type="email"],
  textarea {
    background: lighten($contact-panel-bg, 15%);
    border: $contact-panel-bg;
    transition: background 0.3s ease-in-out;

    &:focus {
      background: $white;
    }
  }

  .contact-panel-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .submit-button {
    margin-bottom: 0;
  }

  .cancel-button {
    margin-bottom: 0;
    padding: 0.75rem 1rem;
    color: $white;
    transition: background 0.25s ease-in-out;

    &:hover {
      background: lighten($contact-panel-bg, 10%);
      color: lighten($contact-panel-bg, 90%);
    }
  }

  &.is-active {
    bottom: 0;
  }

  @include breakpoint(small only) {
    width: 100%;
    right: 0;
  }
}


@charset "UTF-8";

.contact-panel-button {
  background: #0a0a0a;
  color: #fefefe;
  width: auto;
  padding: 0.25rem 1.25rem;
  text-align: center;
  position: absolute;
  top: -30px;
  right: 20px;
  transition: background 0.25s ease-in-out;
}

.contact-panel-button:after {
  content: "⥣";
  margin-left: 5px;
}

.contact-panel-button:hover {
  background: #242424;
  color: #f0f0f0;
}

.is-active .contact-panel-button:after {
  content: "⥥";
}

.contact-panel {
  padding: 1rem;
  z-index: 1;
  background: #0a0a0a;
  width: 350px;
  height: 375px;
  position: fixed;
  bottom: -375px;
  right: 20px;
  transition: bottom 0.5s ease-in-out;
}

.contact-panel label {
  color: #fefefe;
  width: 100%;
}

.contact-panel input[type="text"],
.contact-panel input[type="email"],
.contact-panel textarea {
  background: #303030;
  border: #0a0a0a;
  transition: background 0.3s ease-in-out;
}

.contact-panel input[type="text"]:focus,
.contact-panel input[type="email"]:focus,
.contact-panel textarea:focus {
  background: #fefefe;
}

.contact-panel .contact-panel-actions {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.contact-panel .submit-button {
  margin-bottom: 0;
}

.contact-panel .cancel-button {
  margin-bottom: 0;
  padding: 0.75rem 1rem;
  color: #fefefe;
  transition: background 0.25s ease-in-out;
}

.contact-panel .cancel-button:hover {
  background: #242424;
  color: #f0f0f0;
}

.contact-panel.is-active {
  bottom: 0;
}

@media screen and (max-width: 39.9375em) {
  .contact-panel {
    width: 100%;
    right: 0;
  }
}
JS
// closes the panel on click outside
$(document).mouseup(function (e) {
  var container = $('#contact-panel');
  if (!container.is(e.target) // if the target of the click isn't the container...
  && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      container.removeClass('is-active');
    }
});

Similar Building Blocks

forms

Rounded Input Group

F6
by Rafi
forms

Plus Minus Buttons

F6
by Harry Manchanda
forms

Animated Expanding Search Form

F6
by Harry Manchanda