Basic Hidden Form
How do I make an basic hidden form?
What is a basic hidden form? How do you make a basic hidden form? This script and codes were developed by Drew McConville on 31 August 2022, Wednesday.
Basic Hidden Form - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic Hidden Form</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="content"> <div class="welcome"> <h1 class="fade">a form for this section</h1> <button type="button" class="fade show btn">Show me the form</button> </div> <div class="content"> <p> I made this to display some functionality I put together for a recent project. </p> <p>This uses jQuery to match a hidden form to the height of a welcome section.</p> </div>
</div>
<div id="form"> <h2> Feed me your email! </h2> <form> <input type="text" placeholder="Your Email"> <input type="submit"> </form> <button class="btn close">Close</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Basic Hidden Form - Script Codes CSS Codes
body { font-family: helvetica; margin: 0; position: relative; min-height: 600px; text-align: center; font-size: 100%; color: #3e4651;
}
.welcome { padding: 4em 1em; background-color: #00b5b5;
}
.welcome h1 { margin: 0.5em 0; font-size: 3em; color: #fff;
}
.welcome .btn { background-color: transparent; border: 3px solid #fff; padding: 0.5em 2em; font-size: 1em; letter-spacing: 0.5px; color: #fff; font-weight: 700; cursor: pointer; outline: none;
}
.welcome .btn:hover { background-color: #fff; color: #00b5b5;
}
.content { padding: 2em 1em;
}
.content .btn { background-color: transparent; border: 3px solid #f1654c; padding: 0.5em 2em; font-size: 1em; letter-spacing: 0.5px; color: #f1654c; font-weight: 700; cursor: pointer; outline: none;
}
#form { position: absolute; padding: 4em 1em; box-sizing: border-box; display: none; color: #fff; top: 0; left: 0; width: 100%; background: #3e4651;
}
#form h2 { font-size: 2em; margin: 0.5em;
}
#form .btn { position: absolute; top: 2em; right: 3em; background-color: transparent; border: 0; color: #768395; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; outline: none;
}
#form .btn:hover { color: #fff;
}
#form .btn:after { content: "+"; color: #fff; display: inline-block; position: absolute; top: -0.33em; right: -0.8em; font-size: 2.4em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
#form input[type=text] { color: #00b5b5; border: 2px solid #fff; padding: 0.3em 1em; font-size: 1.2em; font-weight: 700;
}
#form input[type=submit] { background-color: transparent; border: 3px solid #f1654c; padding: 0.5em 2em; font-size: 1em; letter-spacing: 0.5px; color: #fff; font-weight: 700; cursor: pointer; outline: none;
}
#form input[type=submit]:hover { background-color: #f1654c; color: #fff;
}
Basic Hidden Form - Script Codes JS Codes
$(document).ready(function(){ var formHeight = $('.welcome').outerHeight(); var welcomeHeight = $('.welcome').height(); // Create function to have matched heights function getFormHeight(){ $('.welcome').css("height", welcomeHeight); $('#form').css("min-height", formHeight); } function changeWelcomeHeight(){ var newWelcomeHeight = $('#form').height(); } // Run our function to get heights getFormHeight(); // Fade and Show elements when 'share your ideas' button clicked $('.show').on('click', function(){ $('.fade').fadeOut("slow"); $('#form').delay(300).fadeIn("slow"); }); // Fade and Show elements when 'close' button clicked $('.close').on('click', function(){ $('#form').fadeOut("slow"); $('.fade').fadeIn("slow"); }); $( window ).resize(function() { if ( $('#form').css('display') != 'none' ) { changeWelcomeHeight(); } });
});
![Basic Hidden Form - Script Codes](http://shots.codepen.io/drew_mc/pen/dPvQYX-512.jpg)
Developer | Drew McConville |
Username | drew_mc |
Uploaded | August 31, 2022 |
Rating | 4.5 |
Size | 3,467 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS Only Video Lightbox | 3,250 Kb |
My submissions for a digital business card challenge | 3,364 Kb |
Draft Bernie Sanders Email | 3,500 Kb |
Burger Style Navigation Button | 4,172 Kb |
Welcome screen using flexbox and viewport units | 2,404 Kb |
Baseball TV Scorebox | 7,270 Kb |
Unminified markup for bettermotherfuckingwebsite.com | 2,956 Kb |
Simple blog concept | 2,666 Kb |
Attempt to mimic push start on vehicle | 3,967 Kb |
SVG Sprite - Credit Card Icons | 4,848 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Realistic Buttons | Stoypenny | 2,248 Kb |
Background Images | Jooonebug | 2,100 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
RRC wrapSwitch | Pshrmn | 2,922 Kb |
Out of the blue | Giaco | 2,537 Kb |
Social.svg.min | Larsenwork | 13,849 Kb |
Shopping cart | Andiio | 6,581 Kb |
LDE old privacy page | Jasonangle | 2,339 Kb |
Css3 only dropdown menu | Riogrande | 2,519 Kb |
The Monty Hall Problem | Melatonind | 4,360 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!