Pop Up Question Form

Developer
Brock Nunn
Size
3,391 Kb
Views
6,072
  1. Pop Up Question Form Previews
  2. Pop Up Question Form HTML Codes
  3. Pop Up Question Form CSS Codes
  4. Pop Up Question Form JS Codes

How do I make an pop up question form?

An idea I am working on for my personal site. My goal is to make it quick and simple to ask me a quick question via multiple methods. Please feel free to use in any way you like. . What is a pop up question form? How do you make a pop up question form? This script and codes were developed by Brock Nunn on 06 January 2023, Friday.

Pop Up Question Form Previews
IQ Test

Pop Up Question Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pop Up Question Form</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <aside class="q-question"> <h3>Have a question for me?</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis totam distinctio molestiae exercitationem impedit ut libero. Sit accusamus consectetur distinctio nesciunt quae nobis consequatur facere.</p> <form> <textarea name="" font-weight="200" id="" cols="30" rows="7"></textarea> </form>
</aside>
<button class="clickr">Ask A Question</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pop Up Question Form - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700);
body { font-family: 'Source Sans Pro', sans-serif; background: #313131; background-image: url(https://subtlepatterns.com/patterns/debut_dark.png);
}
.q-question { box-sizing: border-box; background: rgba(0, 128, 128, 0.8); text-align: center; padding-bottom: 2.5em; box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5); border-bottom: 0.25em solid #004d4d; padding: 0 1em 1em;
}
.q-question h3 { margin: 0; padding: .5em 0 .25em 0; font-weight: 700; font-size: 1.75em; text-transform: uppercase; color: #003334;
}
.q-question p { line-height: 1.65em; margin: 0 auto 1em auto; color: #cccccc; font-weight: 200; width: 65%;
}
@media (max-width: 50em) { .q-question p { width: 100%; }
}
.q-question form textarea { background: transparent; border: 1px solid #005f5f; border-radius: .25em; width: 55%; padding: .5em; outline: none; font-size: 1.25em; color: #cccccc; font-family: inherit; font-size: inherit; font-weight: 200; box-shadow: 5px 5px 0px #006464; box-sizing: border-box;
}
@media (max-width: 50em) { .q-question form textarea { width: 100%; }
}
.clickr { border: 1px solid rgba(255, 99, 71, 0.25); padding: 1em 2em; background: transparent; color: #eaeaea; text-transform: uppercase; border-radius: .75em; text-align: center; display: block; width: 200px; margin: auto auto; margin-top: 2em; outline: none;
}
.clickr:hover { border: 1px solid rgba(255, 99, 71, 0.4);
}
.clickr:active { background: rgba(0, 0, 0, 0.1); outline: none;
}

Pop Up Question Form - Script Codes JS Codes

$('.q-question').hide();
$('.clickr').click(function(){ $('.q-question').slideToggle();
});
Pop Up Question Form - Script Codes
Pop Up Question Form - Script Codes
Home Page Home
Developer Brock Nunn
Username banunn
Uploaded January 06, 2023
Rating 3.5
Size 3,391 Kb
Views 6,072
Do you need developer help for Pop Up Question 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!

Brock Nunn (banunn) Script Codes
Name
Simple jQuery .fadeToggle demo
Tooltip Pulse
Simple Article Layout
JQuery Add and Remove Items
Minimal Hover Menu
Flat UI Alert
Off Canvas Navigation
Pixel Perfect Buttons Without PSD
Learning Flexbox
Simple Responsive Navigation
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!