Expanding Form

Developer
Chris Evans
Size
3,462 Kb
Views
10,120
  1. Expanding Form Previews
  2. Expanding Form HTML Codes
  3. Expanding Form CSS Codes
  4. Expanding Form JS Codes

How do I make an expanding form?

What is a expanding form? How do you make a expanding form? This script and codes were developed by Chris Evans on 27 December 2022, Tuesday.

Expanding Form Previews
IQ Test

Expanding Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Expanding Form</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Open-Sans" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<div class="card form__wizard"> <section class="text--align-center form__step"> <h1>Expanding Form</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor dictum massa sed imperdiet. Morbi pellentesque varius pulvinar. Donec pharetra nibh in arcu vestibulum semper eget id nulla.</p> <hr/> <label>What is a Monkey's favourite fruit?</label><br/> <select class="form__input"> <option>Orange</option> <option>Apple</option> <option>Banana</option> </select> </section> <section class="text--align-center form__step section--inverse"><i class="material-icons">cake</i><br/> <h1>and the brain of britain award goes to...</h1> </section>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Expanding Form - Script Codes CSS Codes

body { font-family: 'Open Sans', sans-serif; color: #333; background-color: #EFEFEF;
}
.card { width: 33.333%; left: 50%; transform: translatex(-50%); margin: 32px 0;
}
.card { position: absolute; display: block; background: #FFF; padding: 32px; transition: height 500ms ease; overflow: hidden;
}
.text--align-center { text-align: center;
}
section { padding: 32px 0;
}
.section--inverse { background: #FFC04D; margin: 32px -32px -32px -32px; padding: 32px;
}
h1 { font-weight: 300;
}
hr { margin: 32px; border: none; border-bottom: 1px solid #FFC04D; background: none; outline: none;
}
select { padding: 1em; border: none; border-bottom: 1px solid #afafaf; color: #333; cursor: pointer; font-family: 'Open Sans', sans-serif; font-size: 1em;
}
.material-icons { color: #FFF; font-size: 48px !important;
}

Expanding Form - Script Codes JS Codes

(function(undefined) { 'use strict'; var wizard = $('.form__wizard'); wizard.height(wizard.find('.form__step').first().outerHeight()); $('.form__input').change(function() { var h = 0, steps = wizard.find('.form__step'); for (var i = 0, l = steps.length; i < l; i++) { h = h + $(steps[i]).outerHeight(); } wizard.height(h); });
})();
Expanding Form - Script Codes
Expanding Form - Script Codes
Home Page Home
Developer Chris Evans
Username anitorious
Uploaded December 27, 2022
Rating 3
Size 3,462 Kb
Views 10,120
Do you need developer help for Expanding 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!

Chris Evans (anitorious) Script Codes
Name
Searching for Answers
Single Field List Filter
A Forked Sky Full of Stars - Canvas Adaptation, Credit to JLNLJN
Profile Cards
Solar System
Button with Progress Indicator
Dashboard Module Management
Animated Button - Material
CSS Coupon
CSS Drawing - Life Ring
Create amazing SEO content 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!