Group Contact Form
How do I make an group contact form?
Group contact form for CSS-Tricks. What is a group contact form? How do you make a group contact form? This script and codes were developed by Billy Brown on 30 September 2022, Friday.
Group Contact Form - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Group Contact Form</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { margin: 0; padding: 0;
}
body { padding: 20px;
}
h1 { color: #666; text-shadow: 0 1px #aaa;
}
@font-face { font-family: 'mail_or_not'; src: url("https://dl.dropbox.com/u/42425931/font/mail_or_not.eot"); src: url("https://dl.dropbox.com/u/42425931/font/mail_or_not.eot?#iefix") format('embedded-opentype'), url("https://dl.dropbox.com/u/42425931/font/mail_or_not.woff") format('woff'), url("https://dl.dropbox.com/u/42425931/font/mail_or_not.ttf") format('truetype'), url("https://dl.dropbox.com/u/42425931/font/mail_or_not.svg#mail_or_not") format('svg'); font-weight: normal; font-style: normal;
}
form { background: #fafafa; border: 1px solid #ddd; border-radius: 3px; box-shadow: 0 4px 5px -5px black; color: #888; font-weight: 100; margin: 10px; padding: 10px; user-select: none; width: 260px;
}
.container { background: linear-gradient(left, #5a5 50%, #f55 50%); border: 1px solid #bbb; border-radius: 4px; box-shadow: inset 0 0 3px rgba(0,0,0,.5); cursor: pointer; display: inline-block; height: 20px; margin: 5px; padding: 0; position: relative; width: 60px;
}
.container::before { border-radius: 4px; color: white; /* ON */ content: '\2713'; position: absolute; top: 2px; left: 9px;
}
.container::after { color: black; /* OFF */ content: '\2715'; position: absolute; top: 2px; right: 9px; z-index: 0;
}
input { appearance: none; background: #bbb; background: linear-gradient(#fafafa, #f5f5f5 2px, #ddd 20px, #bbb); border-left: none; border-right: 1px solid #bbb; box-shadow: inset 0 2px white, inset 0 -1px 5px -3px #bbb; cursor: pointer; font-family: 'mail_or_not'; height: 20px; margin: 0; position: relative; speak: none; transition: all linear .2s; width: 30px; z-index: 10;
}
input:before { color: #f44; /* envelope */ content: '\2709'; font-size: 22px; position: absolute; text-shadow: 0 -1px 1px #777; top: 1px; left: 5px;
}
input:checked { border-left: 1px solid #bbb; border-right: none; margin-left: 30px;
}
input:checked:before { color: #5a5;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Email me when...</h1>
<form > <label for="4" class="container"><input type="checkbox" id="4" name="4" checked></label> <label for="4">Someone does something...</label><br> <label for="5" class="container"><input type="checkbox" id="5" name="5"></label> <label for="5">A different thing happens...</label><br> <label for="6" class="container"><input type="checkbox" id="6" name="6" checked></label> <label for="6">Some third thing transpires...</label>
</form>
</body>
</html>
Group Contact Form - Script Codes CSS Codes
* { margin: 0; padding: 0;
}
body { padding: 20px;
}
h1 { color: #666; text-shadow: 0 1px #aaa;
}
@font-face { font-family: 'mail_or_not'; src: url("https://dl.dropbox.com/u/42425931/font/mail_or_not.eot"); src: url("https://dl.dropbox.com/u/42425931/font/mail_or_not.eot?#iefix") format('embedded-opentype'), url("https://dl.dropbox.com/u/42425931/font/mail_or_not.woff") format('woff'), url("https://dl.dropbox.com/u/42425931/font/mail_or_not.ttf") format('truetype'), url("https://dl.dropbox.com/u/42425931/font/mail_or_not.svg#mail_or_not") format('svg'); font-weight: normal; font-style: normal;
}
form { background: #fafafa; border: 1px solid #ddd; border-radius: 3px; box-shadow: 0 4px 5px -5px black; color: #888; font-weight: 100; margin: 10px; padding: 10px; user-select: none; width: 260px;
}
.container { background: linear-gradient(left, #5a5 50%, #f55 50%); border: 1px solid #bbb; border-radius: 4px; box-shadow: inset 0 0 3px rgba(0,0,0,.5); cursor: pointer; display: inline-block; height: 20px; margin: 5px; padding: 0; position: relative; width: 60px;
}
.container::before { border-radius: 4px; color: white; /* ON */ content: '\2713'; position: absolute; top: 2px; left: 9px;
}
.container::after { color: black; /* OFF */ content: '\2715'; position: absolute; top: 2px; right: 9px; z-index: 0;
}
input { appearance: none; background: #bbb; background: linear-gradient(#fafafa, #f5f5f5 2px, #ddd 20px, #bbb); border-left: none; border-right: 1px solid #bbb; box-shadow: inset 0 2px white, inset 0 -1px 5px -3px #bbb; cursor: pointer; font-family: 'mail_or_not'; height: 20px; margin: 0; position: relative; speak: none; transition: all linear .2s; width: 30px; z-index: 10;
}
input:before { color: #f44; /* envelope */ content: '\2709'; font-size: 22px; position: absolute; text-shadow: 0 -1px 1px #777; top: 1px; left: 5px;
}
input:checked { border-left: 1px solid #bbb; border-right: none; margin-left: 30px;
}
input:checked:before { color: #5a5;
}
Developer | Billy Brown |
Username | _Billy_Brown |
Uploaded | September 30, 2022 |
Rating | 3 |
Size | 3,150 Kb |
Views | 12,144 |
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 |
Slideout Sidebar | 3,596 Kb |
Pure CSS image slider | 2,256 Kb |
Mandelbrot Fractal | 2,706 Kb |
Simple jQuery dice roller | 2,187 Kb |
Canvas Pacman | 2,074 Kb |
Playing with FlexBox | 3,162 Kb |
Aperture-style lens | 3,703 Kb |
Online Shop | 4,282 Kb |
Cropper.js example | 8,683 Kb |
CSS-Tricks lodge button | 3,247 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 |
The Rope | Chribbe | 2,886 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Perforated foil | 0x04 | 2,617 Kb |
Foundation 5 Menu - Accessibility | Xporter | 1,999 Kb |
Scroll using CSS | Casperovic | 2,159 Kb |
Off Canvas | Mariamarica | 1,870 Kb |
Classy Blockquote Styling | Andrewwright | 3,212 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
Local Weather App - FreeCodeCamp | TrevorWelch | 4,134 Kb |
After America | Jonathangarner | 2,686 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!