<header>
  <img src="http://icon-icons.com/icons2/691/PNG/512/google_firebase_icon-icons.com_61475.png" alt="firebase" height="60">
  <h1>Firebase Form</h1>
</header>  

<div class="wrap">
  <div class="form-wrap">
    <h2>Inscríbete ya!!</h2>
    <form action="">
      <label class="form-line">
        <span>Email</span>
        <input type="email" id="email" />
        <span class="bar"></span>
      </label>

      <label class="form-line">
        <span>Nombre</span>
        <input type="text" id="nombre"/>
        <span class="bar"></span>
      </label>
      
      <label class="form-line">
        <span>Apellidos</span>
        <input type="text" id="apellidos"/>
        <span class="bar"></span>
      </label>
      <button type="button" class="submit" id="enviar">Enviar</button>
      <div id="error" class="form-error"></div>
    </form>
  </div>
  <div class="user-list">
    <h2>Lista de usuarios</h2>
    <div id="user-list-wrapp">
      
    </div>  
    
    
  </div>

</div>


$primaryFont = 'Open Sans', Helvetica, Arial, sans-serif

*, *:before, *:after 
  box-sizing: border-box
  margin: 0
  padding: 0
 
html
  height:100%
  background:#cfd9df
  
body
  background-image: linear-gradient(to top, #cfd9df 0%, #ededed 100%)
  font-family: $primaryFont
  min-width:320px
  
input, button
  border: none;
  outline: none;
  background: none;
  font-family: $primaryFont 

// header titular
header
  text-align:center
  padding-top:10px
  
  h1
    font-size:24px

    
//wrap general
.wrap
  
  width:100%
  margin:25px auto
  padding:0 30px
  min-height:60vh
  
  @media (min-width: 641px)
    display:flex
    max-width:900px


  
// formulario
.form-wrap
  width:100%
  padding:30px 60px
  background:white
  text-align:center
  
  
  
  @media (min-width: 641px)
    flex:1 0 50%
    box-shadow: 0 8px 6px -6px grey
 
  h2
    text-align:center
    font-size:26px
    
  .form-line
    margin:40px 0 0 0
    width:100%
    display:block
    text-align:center
    position:relative
    
    & > span
      color:DarkGrey
      text-transform:uppercase
      display:inline-block
      width:100%
      font-size:14px
    
    input[type="text"], input[type="email"]
       display: inline-block
       width: 100%
       margin-top: 6px
       padding-bottom: 5px
       font-size: 16px
       border-bottom: 1px solid rgba(0,0,0,0.4)
       text-align: center
       position:relative

.form-error
  color:fireBrick
  font-size:14px
  padding-top:15px
  
  &.error--ok
    color: ForestGreen
       
/* BOTTOM BARS ================================= */
.bar 	
  position:absolute
  display:block
  width:100%
  bottom:0
  left:0
  z-index:10
  
  &:before, &:after  
    content:'' 
    height:2px  
    width:0 
    bottom:0px  
    position:absolute 
    background:#f57f17  
    transition:0.2s ease all  
    
 
  &:before  
    left:50% 

  &:after  
    right:50%  
 
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after 
  width:50%

/* button submit */
.submit
  display:inline-block
  margin:40px auto 0 auto
  padding:10px 50px
  background:seaGreen
  color:white
  font-weight:700
  border-radius:4px
  font-size:16px
  cursor:pointer
  transition:0.2s ease all
  
  &:hover
    background:MediumSeaGreen
    
 // User list
.user-list
  width:100%
  background:white
  box-shadow: 0 8px 6px -6px grey
  padding: 30px 40px
  border-top:3px solid #cfd9df
  
  @media (min-width: 641px)
    flex:1 0 50%
    border-left:3px solid #ededed
    border-top:none
  
  & > h2
    text-align:center
    font-size:26px
    padding-bottom:30px
    
  &__item
    padding:10px
    border:1px solid #ededed
    border-radius:3px
    border-left:3px solid #F57F17
    margin-bottom:10px

    h4
      font-size:14px
      padding-bottom:10px
    p
      font-size:14px
      
    h4 span, p span
      font-weight:700
        
    
       
 

 
      
 
    
      
      
View Compiled
// Initialize Firebase
  var config = {
    apiKey: "AIzaSyDZ4cVzDjkjtONbJwM5JXj6FSjp3pgWBis",
    authDomain: "ejercicio-formulario.firebaseapp.com",
    databaseURL: "https://ejercicio-formulario.firebaseio.com",
    storageBucket: "ejercicio-formulario.appspot.com",
    messagingSenderId: "880953037130"
  };
  firebase.initializeApp(config);

// capturamos los datos al pulsar enviar

document.getElementById("enviar").addEventListener("click", inscribirse);
var rootRef = firebase.database().ref("usuarios/");

function inscribirse(datos, borraForm){
    
    // recojo los datos del formulario y lo limpio
    var campoEmail = document.getElementById("email")
    var campoNombre = document.getElementById("nombre")
    var campoApellidos = document.getElementById("apellidos")
    
    var error = document.getElementById("error");
  
    if (campoEmail.value !== "" &&  campoNombre.value !== "" && campoApellidos.value !== ""){
      datos.email = campoEmail.value.trim();
      datos.nombre = campoNombre.value.trim();
      datos.apellidos = campoApellidos.value.trim();
      error.innerHTML = "";
    } else {
      var error = document.getElementById("error");
      error.classList.remove("error--ok");
      error.innerHTML = "Tienes que rellenar todos lo campos";
      return false;
    }
  
    campoEmail.value = "";
    campoNombre.value ="";
    campoApellidos.value = "";
  
    // creo el modelo de datos del usuaruio
    var usuario = {
      "email": datos.email,
      "nombre": datos.nombre,
      "apellidos": datos.apellidos
    };
    
  
    // compruebo que no hay nadie con el mismo email y si no es asi lo introduzco en la bbdd
  
    rootRef.orderByValue().on("value", function(snapshot) {
        var emails = [];
        snapshot.forEach(function(data) {
           emails.push(data.val().email);
        });        
      
        if (emails.indexOf(datos.email) != -1) {
          document.getElementById("error").innerHTML = "el usuario ya existe";
          document.getElementById("error").classList.add("error--ok");
          return false;
        } else {
          rootRef.child(datos.nombre).set(usuario);
          document.getElementById("error").innerHTML = "Usuario registrado"
          return false;
          
        }
    }); 


    // pinto de nuevo el listado
    consultaDatos(); 
}

function consultaDatos(){

  rootRef.orderByKey().on("value", function(snapshot) {
    
    var contenido = document.getElementById("user-list-wrapp");
    contenido.innerHTML = "";
    snapshot.forEach(function(data){
      
      contenido.innerHTML += '<div class="user-list__item"> <h4>Nombre: <span>' + data.val().nombre +'</span></h4><p>Email: <span>' + data.val().email  +'</span></p></div>';
    });
    
  }, function (errorObject) {
    console.log("Fallo en lectura de datos: " + errorObject.code);
  });
};

consultaDatos();

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans:400,700

External JavaScript

  1. https://www.gstatic.com/firebasejs/3.7.0/firebase.js