Popup Contact Form

By Rafi

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;
  }
}

// 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');
    }
});

Popup Contact Form

By Rafi

Rounded Input Group

Plus Minus Buttons

Animated Expanding Search Form

Popup Contact Form

By Rafi

Similar Building Blocks

Rounded Input Group

Plus Minus Buttons

Animated Expanding Search Form