Basic Hidden Form

Developer
Drew McConville
Size
3,467 Kb
Views
28,336
  1. Basic Hidden Form Previews
  2. Basic Hidden Form HTML Codes
  3. Basic Hidden Form CSS Codes
  4. Basic Hidden Form JS Codes

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 Previews
IQ Test

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
Basic Hidden Form - Script Codes
Home Page Home
Developer Drew McConville
Username drew_mc
Uploaded August 31, 2022
Rating 4.5
Size 3,467 Kb
Views 28,336
Do you need developer help for Basic Hidden Form?

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!

Drew McConville (drew_mc) Script Codes
Name
Box Shadow Evolution
Burger Style Navigation Button
Baseball TV Scorebox
CSS Only Video Lightbox
My submissions for a digital business card challenge
Input modification feedback
Draft Bernie Sanders Email
Attempt to mimic push start on vehicle
Donation UI Concept
A Pen by Drew McConville
Create amazing sales emails with AI!

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!