Unique Set of 15 Placeholder Form Animations!

 

 

Esempio 1

Clicca sulla texarea oppure Invio

Esempio 2

Clicca sulla texarea oppure Invio

Esempio 3

Clicca sulla texarea oppure Invio

Esempio 4

Clicca sulla texarea oppure Invio

Esempio 5

Clicca sulla texarea oppure Invio

Esempio 6

Clicca sulla texarea oppure Invio

Esempio 7

Clicca sulla texarea oppure Invio

Esempio 8

Clicca sulla texarea oppure Invio

Esempio 9

Clicca sulla texarea oppure Invio

Esempio 10

Clicca sulla texarea oppure Invio

Esempio 11

Clicca sulla texarea oppure Invio

Esempio 12

Clicca sulla texarea oppure Invio

Esempio 13

Clicca sulla texarea oppure Invio

Esempio 14

Clicca sulla texarea oppure Invio

Esempio 15

Clicca sulla texarea oppure Invio

How to Use

  • Basic HTML markup

    <div class="your-class">
  <form>
    .... your inputs and textareas and your Invio button (use only <button> tag for it)
  </form>
</div>

  • Use placeholder attribute and id attribute for inputs and textareas. Note! Use only <button> tag for Invio buttons

    <div class="your-class">
  <form>
    <input id="your-id-1" type="text" placeholder="My Input" />
    <textarea id="your-id-2" placeholder="My Textarea"></textarea>
    <button type="Invio">Invio</button>
  </form>
</div>

  • Add foxholder-styles.css in your <head>

    <link rel="stylesheet" href="css/foxholder-styles.css" />

  • Add foxholder.js in your <head> or before closing <body> tag after jQuery

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="scripts/foxholder.js"></script>

  • Initialize your Foxholder in your script file or an inline script tag

    
  jQuery('.your-class').foxholder({
    Esempio: 1 //or other number of Esempio (1-15) you want to use
  });