Unique Set of 15 Placeholder Form Animations!

Just pick the most fitted and install on your website in 1 minute!

Demo 1

Click on textarea or input to check

Demo 2

Click on textarea or input to check

Demo 3

Click on textarea or input to check

Demo 4

Click on textarea or input to check

Demo 5

Click on textarea or input to check

Demo 6

Click on textarea or input to check

Demo 7

Click on textarea or input to check

Demo 8

Click on textarea or input to check

Demo 9

Click on textarea or input to check

Demo 10

Click on textarea or input to check

Demo 11

Click on textarea or input to check

Demo 12

Click on textarea or input to check

Demo 13

Click on textarea or input to check

Demo 14

Click on textarea or input to check

Demo 15

Click on textarea or input to check

How to Use

  • Basic HTML markup

    <div class="your-class">
      <form>
        .... your inputs and textareas and your submit 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 submit 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="submit">Submit</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({
        demo: 1 //or other number of demo (1-15) you want to use
      });