March 6, 2015

Single input 3D subscribe form

Single input 3D subscribe form

A simple 3D form concept where different faces act as different parts of the form. The default state looks like a flat button which surprises the user by rotating to show the next face which is the text input.

On submission the user sees a loader and finally the thank you message on completion. This thank you message face could also be used to show validation errors.

This concept can be further enhanced to have multiple inputs as different faces of the cuboids being manipulated dynamically using JS.

HTML

<div class="center">
  
  <div class="fun-cube"><i class="fa fa-cube"></i></div>
  <h1>Single input 3D form</h1>

  <div id="cuboid">
    <form>
      <!-- #1 hover button -->
      <div>
        <p class="cuboid-text">Subscribe</p>
      </div>
      
      <!-- #2 text input -->
      <div>
        <label for="submit" class="submit-icon">
          <i class="fa fa-chevron-right"></i>
        </label>
        <input type="text" id="email" class="cuboid-text" placeholder="Your Email" autocomplete="off"/>
        <input type="submit" id="submit" />
      </div>
      
      <!-- #3 loading message -->
      <div>
        <p class="cuboid-text loader">Just a moment</p>
      </div>
      
      <!-- #4 success message -->
      <div>
        <span class="reset-icon"><i class="fa fa-refresh"></i></span>
        <p class="cuboid-text">Thank you, we'll be in touch</p>
      </div>
      
    </form>
  </div>
  
</div>

CSS

* {margin: 0; padding: 0;}
body {
 padding-top: 150px;
 font: normal 18px Sniglet; color: white
}

.center { 
  text-align: center
}

h1 {
  font-weight: normal; 
  font-size: 36px; 
  margin-bottom: 75px;
}
.fun-cube i {
  transform: scale(10); 
  opacity: 0.1;
}

#cuboid {
 width: 400px; 
  margin: 0 auto;
 perspective: 1000px;
}

#cuboid form {
 transform: translateZ(-20px);
 transform-style: preserve-3d;
 height: 40px;
 transition: all 0.35s;
}

.cuboid-text {
 line-height: 40px;
  height: 40px;
 background: #4f3043;
}

.loader {
 background: #4f3043;
 animation: phase 1s infinite;
}

@keyframes phase {
 50% {
   background: hsl(120, 70%, 30%);
  }
}

#email {
 background: white; 
  outline: none; 
  border: 0 none;
 font: inherit; 
  text-align: left; 
  color: #4f3043;
 display: block;
  width: 100%; 
  padding: 0 10px;
 box-sizing: border-box;
}

#submit {
  display: none;
}

.submit-icon, .reset-icon {
 position: absolute; 
  top: 0; 
  right: 0;
 color: rgba(0, 0, 0, 0.25);
 line-height: 40px; 
  padding: 0 10px;
 transition: all 0.5s;
 cursor: pointer;
}

.submit-icon.active {
  color: #4f3043;
}

.reset-icon {
  color: rgba(255, 255, 255, 0.50); 
  font-size: 14px;
}

#cuboid div {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%;
}

#cuboid div:nth-child(1) {
  transform: rotateX(0deg) translateZ(20px);
}
#cuboid div:nth-child(2) {
  transform: rotateX(-90deg) translateZ(20px);
}
#cuboid div:nth-child(3) {
  transform: rotateX(-180deg) translateZ(20px);
}
#cuboid div:nth-child(4) {
  transform: rotateX(-270deg) translateZ(20px);
}

#cuboid form:hover, 
#cuboid form.ready {
  transform: translateZ(-20px) rotateX(90deg);
}
#cuboid form.loading {
  transform: translateZ(-20px) rotateX(180deg);
}
#cuboid form.complete {
  transform: translateZ(-20px) rotateX(270deg);
}

JavaScript

$("#email").focus(function() {
 $("#cuboid form").addClass("ready");
})

$("#email").blur(function() {
 if($(this).val() == "")
  $("#cuboid form").removeClass("ready");
})

//If the user is typing something make the arrow active
$("#email").keyup(function() {
 //this adds .active class only if the input has some text
 $(".submit-icon").toggleClass("active",     $(this).val().length > 0);
})

//on form submit remove .ready and add .loading to the form
$("#cuboid form").submit(function() {
 $(this).removeClass("ready").addClass("loading");
 //finish loading in 3s
 setTimeout(complete, 3000);
 //prevent default form submisson
 return false;
})

function complete() {
 $("#cuboid form").removeClass("loading").addClass("complete");
}
//reset/refresh functionality
$(".reset-icon").click(function(){
 $("#cuboid form").removeClass("complete");
})

Attachments:

I have used external attachments.


http://fonts.googleapis.com/css?family=Sniglet
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css


https://code.jquery.com/jquery-1.11.2.min.js
demo

No comments:

Post a Comment

Popular Posts

Views