Intake Form Page 2

Developer
Christijan
Size
4,983 Kb
Views
14,168
  1. Intake Form Page 2 Previews
  2. Intake Form Page 2 HTML Codes
  3. Intake Form Page 2 CSS Codes
  4. Intake Form Page 2 JS Codes

How do I make an intake form page 2?

What is a intake form page 2? How do you make a intake form page 2? This script and codes were developed by Christijan on 07 October 2022, Friday.

Intake Form Page 2 Previews
IQ Test

Intake Form Page 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Intake Form Page 2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="intake-form"> <div class="row"> <h3>How does Vivint Solar rank in these areas?</h3> <div class="right-item"> <img src="https://lh3.googleusercontent.com/yafvBsqA2GUXsauWjHw7U4TCswynMy5HVmmap1321Go6HSPT8c9tjqmV7RbWVONZWxmfS3ZnXRa1rXJZ8LhEDA0sjK2vhxDFOVsrbPp5Zxf9TRRaFJ3jyNg7tj0PSkbg9n4AlodIP8vVXK3D0DhYXQ9f6OE9UzRNKQd8k3rA0e5lbycP71c07N-2qZrO11ESva1Pqkx73kc-J-NXhtj21Tf0FofmI-mYNMEZMfjPRn-cnGd-aE9nP5s0AqMoDJ05Pg7U2bogj6ntDQBt9LmB6O_oe-8CXS6zchaBiY5ClangiZoyhlKauETV0-yVxzP7TGjpPniWvd4O3fnl6gxwV5eIczpnDql_TBsDrSMbSbka2EIIH0UmO2NEG4v4R1l-eirgnVQmoWt-3pfhP-1hm3JAPuq7psgHxlZvKbKBB_azolJKlV4g1YGR869ekydTsbRrv2OmRpuHu7hr4jHqxV3nG2YHjHOPP3EuLi5szy6vdXXTfS4IbTe_ZHpkIXLgttcDmrfN11MjuMAwrtpNWi3t-dRlOfHxC5kFSxYfGwUi8RRHtaga_z5Y2Izk8WcdDz95S661=w5120-h2632"/> <p class="criteria-label">Product Warranty / Maintenance</p> <div class="count-container"> <div class="up-arrow"></div><!-- .up-arrow --> <div class="down-arrow"></div><!-- .down-arrow --> <div class="numbered-square">5</div> <div class="numbered-square">4</div> <div class="numbered-square">3</div> <div class="numbered-square">2</div> <div class="numbered-square">1</div> </div> </div><!-- .right-item --> <div class="left-item"> <img src="https://lh3.googleusercontent.com/t8MLNe6z2-9eN96NU8aJGJzs69A-8g6KNlG0BvR85dgIiQ_htWlaufWuq5LBnM8zzw6sPKnabFsdx9w2zZERZk3HnYS8JMbMruPSR0eaj9wTq4FKwA1vZX0kEBQazy2gosVZ4L3fBBphaLpVODD45C9lGs47K5HAWi-aNKomnc1WPt7ThzNmyOgIFLPtqG0aYRMcx5Esc3CgDJqrTK1hp6UgyFmrF96ku9EPhya-BfW8Ig-12CFxM43r_shqf518PVts_Z3dJpoLj9Cd5bp4nstlxOADxmZy8pm1SU9FJRdJ6vl70grv_9QLmNIwmlxGZv0hw3BIWIw8Vlvc3D8_n0cqT688LiCHBNYLaIWe0GTm2DhVCKAu3IvDJsId4kCrbQPysY_qU9jiBTVxtVBUObf1tUOrqlw9r-Iy5CrdxOqV0zdmXq3SR3h__G4_hFUYAN9sAvht5faCqqZd64XeUZWo6rnBzrsitHSEin79CiRUUdpRnxc1_YbV8nZ6xV9BNoLASal9FVtOzeYYH63GQinvoD-ZkgThf5c6QKWF4tnp5ys_aR6EvGZeFlzOEftgZWJQ0raX=w5120-h2632"/> <p class="criteria-label">Price compared to value</p> <img /> <div class="up-arrow"></div><!-- .up-arrow --> <div class="down-arrow"></div><!-- .down-arrow --> <div class="numbered-square">5</div> <div class="numbered-square">4</div> <div class="numbered-square">3</div> <div class="numbered-square">2</div> <div class="numbered-square">1</div> </div><!-- .left-item --> </div><!-- .row --> <div class="clear"></div><!-- .clear --> <div class="row"> <h3>Review Vivint Solar</h3> <form> <textarea id="review-field" rows="8" cols="38" placeholder="Tell us about your experience with Vivint Solar ... 40 character minimum."> </textarea> </form><!-- content field --> <div id="countdown"> -40 </div><!-- #countdown --> </div><!-- .row --> <div class="clear"></div><!-- .clear --> <div class="row"> <div class="button"> <p>Next →</p> </div><!-- .button --> </div><!-- .row --> <div class="clear"></div> <div class="row"> <div class="progress"> <div class="progress-square unselected"></div><!-- .progress-square --> <div class="progress-square unselected"></div><!-- .progress-square --> <div class="progress-square selected"></div><!-- .progress-square --> <div class="progress-square unselected"></div><!-- .progress-square --> <div class="clear"></div> </div><!-- .progress --> </div><!-- .row -->
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Intake Form Page 2 - Script Codes CSS Codes

#intake-form { margin:auto; width:650px; text-align:center; padding: 10px 0; background: #F7F7F7; font-family: Lato-Black; font-size: 23px; color: #4A4A4A; letter-spacing: -0.56px;
}
h3 { text-align: left; margin: 1.5em 0 1.5em 2em
}
.row { width: 84.6%; margin: 1.75em auto ;
}
.right-item, .left-item { float:right; margin: 0 .75em 0 0;
}
.left-item { margin-top:-.2em;
}
#customer-service { margin-top: .1em;
}
.up-arrow { background: URL("https://lh3.googleusercontent.com/bEeYTjskWnBDaM-ur8BV2LEdCsZGtRLFw6Ipfb1ZF_DtJgSMaZNDudzjc8CsNXz6vIbpzQElZQCOiy7b4xDi4hBNDZo6lNOsP2X6G6Yk-v0eBNoML9jGu84ulQhDDqFemHB8sgwpT-kvL0_E4XU2aK2sC79Y7ZNoUSv9xRYlgMAA9WR8j6fDvPnIxS_TOx9CiaUpJBLH9sAsI8gGnlxpPbjV6O53MVzIARTDlinKA4l61VzNo2I1Yn4WR-dFGuBh5GIvE79l4RAjvJ3K1IvkXdq0sYM0z3CYN-oym62Ug-isFDC0MyYANT0FFA5_hcVeKBwp38IQvnCFCn9d5lO33-ty8u6pVZjihxvhXdKFh1Gbr8gKEisi2qavrBU5u5_8CQlbd60LfN4HoGMSpjPnLHy4gwFS2gwfn9K_9-RrkxmuKP5q7FmcI52PS0QZmF00CnV8nJSBy6TessOWOoHWUK09Q9lEBNgNSELS9EnVdaT5KmNemQwVjBZ-0BruKC_JPYsNWf5OPQ7r_5ngVofWePo_CHq4uNEx8lSG2hCtfGl3U-muqeTVlbGNqwp--G42zFl-1OQD=w5120-h2632") top left no-repeat; width: 10px; height: 12px; float: right; margin: 9px 14px;
}
.down-arrow { background: URL("https://lh3.googleusercontent.com/VUqQhUllJSLIP74X46tIrf0zkCSfNvJyg7cLGDmA5uBjBNQJZIi1iw_xnngl_ylmcUJo_akooQ-86HwWfpBIVgwF-D2zppFHrKr1qvCNDx6Lxn-4i-Qmubd5NF-K0TUXIk6Uj1OVqiE-rckvpMTKv7Ja0aoj51byXjyF290Lkcl-fJSgmECxLODPCOb0ucpGlJvYEOygB0yV2Un8XTXm8ag2atum7ACFGyIAAh75EqlYwkl1yp7gI0rwH87FkbUNCxPhESsjH0bI2unAyl480ARP80HCoFvpRPOlZhtsofGEQZWzhpAPqqrzMHo1hhWuYU12rvAchPDq8_plAR1ZYYyrCZE2rk8A55IZjnWcF0SpualowihvHDU9rcqk8h0BYgnlcvVrrqd7YHaI2YmCvS3OGUlK_pXwvJf4RtGy8_InJ_dIpy34cIHO5Uq7xPi2ux9ylkYzXL3QL6uf2GjaKsgJm9k0oNYihyvhaMohXpQIMnDV1yrV1csqwNA9tb71gvAxzSj67hmzyZptie48SWHhtJ20QoJ2Q4fiBk2zlUguOKGxOqzZpTHMa19WK3uyFri_-Sj8=w5120-h2632") top left no-repeat; width: 10px; height: 12px; float: left; margin: 9px 16px
}
.count-container { margin: auto; text-align:center;
}
.numbered-square { background: #D8D8D8; font-family: Lato-Black; font-size:16pt; padding:2px 0; width:32px; height:28px; float: right; margin-right:1px;
}
.numbered-square:hover{ background: #bababa; cursor:pointer;
}
.numbered-square.number-selected { background: #272727; color: #b5b5b5;
}
.criteria-label {
font-family: Lato-Regular;
font-size: 16px;
color: #4A4A4A;
letter-spacing: -0.38px;
}
.clear { clear:both;
}
.button { margin: 2.5em auto 0 auto; width:112px; height:44px; background: #d8d8d8; border-radius: 4px;
}
.button:hover { background: #bababa; cursor:pointer;
}
.button p { font-family: Lato-Regular; font-size: 14pt; padding: .55em 0 .6em 0;
}
.progress { width: 112px; margin: auto;
}
.progress-square { background: #d8d8d8; width: 12px; height: 12px; float: right; margin: 0 13px 0 0;
}
.selected { background: #272727;
}
.number-hover { width:88px; position: absolute;
}
textarea { padding: 1em; color:#4A4A4A; font-size: 14pt;
}
::-webkit-input-placeholder { color: #d8d8d8; line-height:1.5;
}
#countdown { color:#D0011B; font-size: 12pt; font-family: lato-regular; text-align: right; position: relative; right: 80px; top: -40px
}

Intake Form Page 2 - Script Codes JS Codes

$( ".numbered-square" ).click(function() { $( this ).toggleClass( "number-selected" );
});
var xTriggered = -39;
$( "#review-field" ).keydown(function( event ) { if ( event.which == 13 ) { event.preventDefault(); } xTriggered++; var msg = xTriggered; if (msg > 0){ $("#countdown").css("color","#d7d7d7"); } $("#countdown").html(msg);
});
//$( ".numbered-square" ).hover(function() {
//$( this ).toggleClass( "number-hover" );
//});
Intake Form Page 2 - Script Codes
Intake Form Page 2 - Script Codes
Home Page Home
Developer Christijan
Username ijantje
Uploaded October 07, 2022
Rating 3
Size 4,983 Kb
Views 14,168
Do you need developer help for Intake Form Page 2?

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!

Christijan (ijantje) Script Codes
Name
Intake Form Page 6 Thanks
Intake Form
Intake Form Page 3
Intake Form Revision
A Pen by Christijan
Net Promoter Score prototype
Intake Form Page 5 Success
Intake Form Page 4 Verify
Net Promoter Score prototype horizontal
Create amazing love letters 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!