DocSF

DocSF

Did You Know?

Docy turns out that context is a key part of learning.

Come creare modulo di registrazione newsletter animato

Oggi ti mostrerò un modulo di iscrizione con animazione e validazione. L’intero sistema è in HTML, CSS e JavaScript ma per la convalida tramite jQuery.

Esempio

Html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Newsletter From With Validation | Webdevtrick.com</title>
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css"> 
</head>

<body>

  <div class="main">
        <form id="singular-form">
            <button class="shown" type="button" id="subs">Subscribe</button>
            <div id="email-input">
                <input type="text" placeholder="E-mail" id="email">
                <button type="button" class="addbut1" disabled="disabled">Add Me</button>
            </div>
            <div id="success">Congrats!</div>
        </form>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script  src="function.js"></script>

</body>
</html>

CSS

/** code by webdevtrick.com ( https://webdevtrick.com ) **/
* {
    font-size: 2rem;
    font-family: 'Righteous', cursive;
    font-weight: bold;
}
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background-color: #333;
}
.main {
    width: 19rem;
    height: 5rem;
    padding: 12px;
    background-color: white;
    text-align: center;
    border-radius: 3rem;
    overflow: hidden;
    transition: width .6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.main>#singular-form {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: white;
}
.main>#singular-form button {
    width: 9rem;
    padding: 0;
    border: none;
    outline: none;
    border-radius: 3rem;
    cursor: pointer;
}
.main>#singular-form>button#subs {
    padding: 0;
    width: 100%;
    color: #fbb016;
    background-color: transparent;
    z-index: 3;
}
.main>#singular-form>#email-input {
    z-index: 2;
}
.main>#singular-form>#email-input>input {
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    border: none;
    outline: none;
    padding: 0 26% 0 3%;
    opacity: 0;
    transform: scale(0);
    transition: all .6s ease .4s;
}
.main>#singular-form>#email-input>button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background-color: #fbb016;
    color: white;
    opacity: 0;
    transform: scale(0);
    transition: all .6s ease .4s;
}
.main>#singular-form>#success {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fbb016;
    font-weight: bold;
    z-index: 1;
}
.main>#singular-form>button#subs,
.main>#singular-form>#email-input,
.main>#singular-form>#success {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(0);
    opacity: 0;
}
.main>#singular-form>button#subs {
    transition: all .6s ease;
}
.main>#singular-form>#email-input {
    transform: scale(1);
    opacity: 1;
    transition: all .6s ease .4s;
}

.main>#singular-form>#success {
    transition: all .2s ease .6s;
}
.main>#singular-form>button#subs.shown,
.main>#singular-form>#email-input.shown,
.main>#singular-form>#success.shown,
.main>#singular-form>#email-input>button.shown,
.main>#singular-form>#email-input>input.shown {
    transform: scale(1);
    opacity: 1;
}

Javascript


* {
    font-size: 2rem;
    font-family: 'Righteous', cursive;
    font-weight: bold;
}
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background-color: #333;
}
.main {
    width: 19rem;
    height: 5rem;
    padding: 12px;
    background-color: white;
    text-align: center;
    border-radius: 3rem;
    overflow: hidden;
    transition: width .6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.main>#singular-form {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: white;
}
.main>#singular-form button {
    width: 9rem;
    padding: 0;
    border: none;
    outline: none;
    border-radius: 3rem;
    cursor: pointer;
}
.main>#singular-form>button#subs {
    padding: 0;
    width: 100%;
    color: #fbb016;
    background-color: transparent;
    z-index: 3;
}
.main>#singular-form>#email-input {
    z-index: 2;
}
.main>#singular-form>#email-input>input {
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    border: none;
    outline: none;
    padding: 0 26% 0 3%;
    opacity: 0;
    transform: scale(0);
    transition: all .6s ease .4s;
}
.main>#singular-form>#email-input>button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background-color: #fbb016;
    color: white;
    opacity: 0;
    transform: scale(0);
    transition: all .6s ease .4s;
}
.main>#singular-form>#success {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fbb016;
    font-weight: bold;
    z-index: 1;
}
.main>#singular-form>button#subs,
.main>#singular-form>#email-input,
.main>#singular-form>#success {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(0);
    opacity: 0;
}
.main>#singular-form>button#subs {
    transition: all .6s ease;
}
.main>#singular-form>#email-input {
    transform: scale(1);
    opacity: 1;
    transition: all .6s ease .4s;
}

.main>#singular-form>#success {
    transition: all .2s ease .6s;
}
.main>#singular-form>button#subs.shown,
.main>#singular-form>#email-input.shown,
.main>#singular-form>#success.shown,
.main>#singular-form>#email-input>button.shown,
.main>#singular-form>#email-input>input.shown {
    transform: scale(1);
    opacity: 1;
}

Questo è tutto. Ora hai creato con successo il modulo di iscrizione alla newsletter in HTML, CSS, JavaScript. In altre parole, modulo di iscrizione Email con animazione e validazione jQuery

Related Post

Salesforce Lightning Start Date & End Da

<div class="slds-col slds-size_4-of-12"> ...

Failed to access Github repository “ThemeFu

Uno dei maggiori siti per acquistare temi da utilizzare...

Affiliazione Amazon

Come trarre il massimo dalle affiliazioni Ama

Senza ombra di dubbio il programma di affiliazione Amaz...

Leave a Comment