Make your website more interactive. Follow our tutorial on using CSS, HTML, and JavaScript to transform form submissions into engaging badges. Elevate user experience now!
Table of Contents
In today's digital landscape, where user interaction and engagement are paramount, finding creative ways to capture and hold a user's attention is a priority for web developers. One highly effective technique to achieve this is by transforming mundane form-fill data into captivating visual badges. This comprehensive guide is tailored to walk you through the intricacies of seamlessly integrating HTML, CSS, and JavaScript – the trio that powers the web – to craft engaging badges from the data users submit through forms.
Imagine a scenario where a user fills out a form on your website. Traditionally, this information might be processed behind the scenes, leading to a rather static and impersonal user experience. However, by employing the power of HTML, CSS, and JavaScript, you have the opportunity to revolutionize this process. Instead of the data disappearing into the depths of your server, it can be instantly transformed into dynamic badges that users can see, interact with, and even share.
Picture this: A user completes a form to register for an event. Rather than being greeted by a bland confirmation message, they're presented with a visually captivating badge that proudly displays their event registration details. This badge becomes a virtual badge of honor, symbolizing their connection to your website. Not only does this offer a sense of accomplishment, but it also fosters a deeper sense of engagement and connection between the user and your platform.
Moreover, in an era where user experience is a key differentiator, such interactive elements can be the very thing that sets your website apart from the rest. The simple act of transforming form data into badges introduces an element of surprise, delight, and personalization that users won't easily forget. It creates an immersive experience that encourages users to actively participate, rather than passively submit information.
In the upcoming sections of this guide, we will delve into the technical steps required to achieve this transformation. From crafting the initial HTML form and applying aesthetic enhancements with CSS to infusing life into the form with JavaScript and finally converting data into visually striking badges – we'll cover it all. So, whether you're a seasoned developer looking to add an innovative twist to your projects or a beginner eager to learn the ropes, this guide is your gateway to creating user experiences that leave a lasting mark.
By the end of this journey, you'll possess the skills to seamlessly integrate HTML, CSS, and JavaScript to elevate your website's engagement quotient. The transformation of form fill data into dynamic badges is more than a technical process; it's a means of forging deeper connections with your users and creating memorable digital interactions. So, let's embark on this exploration of creativity, technology, and user-centric design – the building blocks of converting form fill into captivating badges.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our form to badge component.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the code step by step:
<!DOCTYPE html>: This declaration defines the document type and version of HTML being used (HTML5 in this case).
<html lang="en">: The opening tag of the HTML document. The lang attribute indicates that the content is in English.
<head>: This section contains metadata and links to external resources used by the webpage.
- <title>Dynamic Form to Badge</title>: Sets the title of the webpage as "Dynamic Form to Badge."
- <meta charset="UTF-8" />: Specifies the character encoding for the document as UTF-8, which supports a wide range of characters.
- <meta name="viewport" content="width=device-width" />: Provides instructions to the browser on how to control the page's dimensions and scaling on different devices.
- <link rel="stylesheet" href="styles.css" />: Links an external CSS file named "styles.css" to style the webpage.
<body>: This is the main content of the webpage that users will see.
<div class="main-content printed">: A container for the main content of the webpage. The "printed" class might be used for styling or scripting purposes.
Inside the .main-content div, there is a form-like structure to input attendee information and generate a badge.
- .header: A section containing two spans for displaying titles: "Attendee Information Form" and "Your Conference Badge."
- .id__wrapper: The wrapper for various input fields and elements.
- .your-face: A label that serves as a button to trigger the image input field.
Inside this label, an input of type "file" (id="image-input") allows users to upload an image.
- .image-persuader: A div that encourages users to upload an image.
An img element (id="imager") is used to display the uploaded image or a placeholder if an image isn't uploaded.
.name, .job, .country, .twitter, .codepen, .blood: These sections represent different input fields for the attendee's full name, job title, location, Twitter handle, Codepen handle, and expertise respectively.
.full: Represents the input fields that span the full width of their containers.
.checkbox__wrapper: A container for multiple checkbox options under the "Your Expertise" section.
- .checkbox: A single checkbox option.
- Several checkbox elements (id="design", id="front-end", etc.) are provided, each with a corresponding label.
<aside class="context">: An aside element, which is typically used for content that is tangentially related to the main content.
- .explanation: A container inside the aside.
- .js-switch: A clickable element that may trigger a JavaScript action when clicked.
<script>: These elements include JavaScript files to provide interactivity and functionality to the webpage.
- The jQuery library is loaded from an external source. jQuery is a popular JavaScript library that simplifies DOM manipulation and event handling.
- script.js is another JavaScript file that is expected to contain custom scripts for the webpage.
This is the basic structure of our form to badge component using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the form is in place, the next step is to add styling to the form and badge using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our badge and form.
Let's break down the code step by step:
The * selector is used to apply the box-sizing property to all elements on the page. The box-sizing: border-box; property ensures that padding and border are included in the element's total width and height.
Styling for the body element includes setting the background color to a light grayish color (#f6f6f6), specifying the font family as "Prompt" or a sans-serif fallback, and hiding horizontal overflow.
The aside.context selector targets a specific aside element with the class name "context". It aligns the text within the aside to the center, sets the text color to a dark gray (#333), and adjusts the line height.
Links within the aside.context section is styled to have no underlines (text-decoration: none;), a dark gray color, some padding, and a dashed bottom border. On hovering over the links, the dashed border is changed to a solid line.
Elements with the class explanation within the aside.context section are styled to have a maximum width of 700px, be centered horizontally with some top margin.
The .main-content class styles a main content section. It's centered with some top margin, has a maximum width of 900px, a white background, padding, and a subtle box shadow. The text inside is transformed to uppercase, and there's a smooth transition effect applied.
The .id__wrapper class represents a container with a grid layout. It's styled to have a responsive width, centered horizontally, a background with a light blueish tint, a thin border, and grid properties to organize its child elements.
Input elements with the class full and textarea within the .id__wrapper have specific styling for font, borders, padding, height, and width. The :focus pseudo-class ensures that the input elements have no outline when they're focused.
Different sections of the ID card layout are given unique styling using classes like .name, .job, .country, etc., along with grid-area property to define their placement in the grid.
The .your-face class styles an image container with a circular shape and a border. The image inside is stretched to cover the container area with some overflow hidden.
Styles for checkboxes are defined with custom appearances. When checked, a checkmark is displayed, and the label's color changes.
The .deco class creates decorative elements using linear gradients. These elements are positioned absolutely and add a visual flair to the layout.
The .as-card class modifies the styling to transform the layout into a card-like appearance. It removes box-shadow and background, adjusts font sizes and colors, and repositions elements to create a card design.
The .js-switch class styles a button that responds to hover interactions by slightly elevating and adding a shadow effect.
Lastly, a keyframes animation called deco-piece is defined to control the appearance of the decorative .deco element.
This will give our form to badge component an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
* {
box-sizing: border-box;
}
body {
background: #f6f6f6;
font-family: "Prompt", sans-serif;
overflow-x: hidden;
}
aside.context {
text-align: center;
color: #333;
line-height: 1.7;
}
aside.context a {
text-decoration: none;
color: #333;
padding: 3px 0;
border-bottom: 1px dashed;
}
aside.context a:hover {
border-bottom: 1px solid;
}
aside.context .explanation {
max-width: 700px;
margin: 2em auto 0;
}
.main-content {
margin: 4em auto;
max-width: 900px;
background: #fff;
padding: 15px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
text-transform: uppercase;
transition: all 0.1s ease-in-out;
}
.id__wrapper {
display: grid;
width: 100%;
transition: width 0.2s ease-in-out;
margin: auto;
grid-gap: 15px;
padding: 15px;
background: rgba(76, 162, 205, 0.2);
border: 2px solid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, auto);
grid-template-areas: "your-face name name" "your-face job country" "your-face twitter codepen" "your-face blood blood";
}
.id__wrapper > div {
transition: all 0.1s ease;
}
textarea::-webkit-scrollbar {
display: none;
}
.header {
grid-area: header;
text-align: center;
text-transform: uppercase;
padding: 10px 0;
font: 600 28px "Prompt";
}
.header span:nth-child(2) {
display: none;
}
.your-face {
grid-area: your-face;
background: #fff;
border: 2px solid;
cursor: pointer;
position: relative;
max-height: 300px;
overflow: hidden;
}
.your-face img {
width: 100%;
height: 100%;
object-fit: cover;
z-index: 10;
position: relative;
visibility: hidden;
}
.your-face .image-persuader {
position: absolute;
top: 40%;
text-align: center;
width: 70%;
left: 15%;
}
.your-face input {
display: none;
}
label {
font: 600 16px "Prompt";
margin-bottom: 2px;
display: block;
flex: 0 0 auto;
}
input.full, textarea.full {
font: 400 20px "Prompt";
border: none;
padding: 10px;
height: 40px;
width: 100%;
border-bottom: 2px solid;
resize: none;
overflow: visible;
line-height: 1;
}
input.full:focus, textarea.full:focus {
outline: none;
}
.name {
grid-area: name;
}
.job {
grid-area: job;
}
.country {
grid-area: country;
}
.twitter {
grid-area: twitter;
}
.codepen {
grid-area: codepen;
}
.blood {
grid-area: blood;
}
.checkbox__wrapper {
display: flex;
flex-wrap: wrap;
}
.checkbox__wrapper .checkbox {
flex: 0 0 auto;
padding-right: 30px;
display: flex;
align-items: center;
margin: 2px 0;
}
.checkbox__wrapper input {
visibility: hidden;
}
.checkbox__wrapper label {
position: relative;
padding-left: 5px;
cursor: pointer;
}
.checkbox__wrapper label:before {
content: "";
width: 16px;
height: 16px;
position: absolute;
border: 2px solid;
left: -20px;
top: 2px;
}
.checkbox__wrapper input:checked + label:after {
content: "";
width: 12px;
height: 12px;
position: absolute;
background: #000;
left: -16px;
top: 6px;
}
.deco {
position: absolute;
background: linear-gradient(to top left, rgba(0, 242, 96, 0.8), rgba(76, 162, 205, 0.8));
width: 1%;
height: 170px;
top: 20px;
right: -165px;
transform: rotate(55deg);
opacity: 0;
}
.deco:before {
content: "";
background: linear-gradient(to top right, rgba(0, 242, 96, 0.6), rgba(76, 162, 205, 0.9));
width: 1%;
height: 120px;
position: absolute;
transform: rotate(140deg);
bottom: 0px;
margin-left: -140px;
}
.as-card {
box-shadow: none;
background: none;
pointer-events: none;
}
.as-card .header span:nth-child(1) {
display: none;
}
.as-card .header span:nth-child(2) {
display: block;
}
.as-card .deco,
.as-card .deco:before {
opacity: 1;
width: 120%;
animation: 0.8s deco-piece forwards;
}
.as-card .id__wrapper {
width: 325px;
overflow: hidden;
margin: 2em auto 0;
border-radius: 10px;
border: none;
background: #fff;
position: relative;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
padding: 85px 25px 65px;
grid-gap: 5px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto 60px repeat(4, auto);
grid-template-areas: "your-face your-face" "name name" "job job" "country country" "blood blood" "twitter codepen";
}
.as-card .id__wrapper:before {
content: "Attendee";
background: linear-gradient(to top right, #4ca2cd, #00f260);
position: absolute;
bottom: -0.5px;
left: 0;
width: 100%;
padding: 10px 0;
letter-spacing: 2px;
font: 600 20px "Prompt";
text-align: center;
color: #fff;
}
.as-card .id__wrapper:after {
content: "";
position: absolute;
top: 15px;
left: 50%;
width: 80px;
height: 12px;
margin-left: -40px;
background: #f8f8f8;
border-radius: 20px;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
}
.as-card .id__wrapper input.full, .as-card .id__wrapper textarea.full {
background: transparent;
border: none;
padding: 0;
}
.as-card .id__wrapper textarea.full {
line-height: 0.9;
height: 63px;
}
.as-card .id__wrapper .checkbox__wrapper {
margin: 5px;
}
.as-card .id__wrapper .checkbox__wrapper label {
padding: 0;
font-size: 14px;
color: #4ca2cd;
margin: 0;
padding-right: 10px;
}
.as-card .id__wrapper .checkbox__wrapper label:before, .as-card .id__wrapper .checkbox__wrapper label:after {
content: none;
}
.as-card .id__wrapper .checkbox__wrapper input {
display: none;
}
.as-card .id__wrapper .checkbox {
padding-right: 0;
}
.as-card .id__wrapper .checkbox input:not(:checked),
.as-card .id__wrapper .checkbox input:not(:checked) + label {
display: none;
padding: 0;
}
.as-card .your-face {
border-radius: 50%;
width: 100px;
height: 100px;
padding: 2px;
border: 4px solid #4ca2cd;
}
.as-card .your-face img {
border-radius: 50%;
}
.as-card .your-face .image-persuader {
display: none;
}
.as-card .name label:not(.label-check),
.as-card .job label:not(.label-check),
.as-card .country label:not(.label-check),
.as-card .blood label:not(.label-check) {
display: none;
}
.as-card .name textarea {
font: 600 32px "Prompt";
margin: 5px 5px 0;
color: #374e71;
position: relative;
}
.as-card .job input {
color: #4ca2cd;
font: 600 20px "Prompt";
margin: 0 5px;
}
.as-card .country input {
color: #4ca2cd;
font: 400 18px "Prompt";
margin: -15px 5px 10px;
}
.as-card .twitter,
.as-card .codepen {
text-align: center;
margin: 10px 0;
}
.as-card .twitter label,
.as-card .codepen label {
font: 600 12px "Prompt";
color: #999;
margin: 0 0 -2px;
}
.as-card .twitter input,
.as-card .codepen input {
font: 400 16px "Prompt";
color: #374e71;
text-align: center;
}
.js-switch {
cursor: pointer;
margin: 0 0 3em;
display: inline-block;
padding: 0.6em 1.5em;
color: #374e71;
border: 2px solid;
font: 20px "Prompt";
position: relative;
top: 0;
transition: 0.1s ease;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.js-switch:hover {
top: -3px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
@keyframes deco-piece {
0% {
opacity: 0;
width: 0%;
}
100% {
opacity: 1;
width: 120%;
}
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript.
The first part of the code is using jQuery, a popular JavaScript library, to handle the click event of elements with the class "js-switch". When an element with this class is clicked, the code toggles the presence of the "as-card" class on elements with the class "main-content". This likely affects the styling or layout of the content, possibly converting it into a card-like display or reverting it.
The second part of the code deals with image preview functionality. It uses the FileReader object to read the contents of a file selected by an input element and then display the contents as an image preview.
- The reader object is created using var reader = new FileReader();.
- An event handler is attached to the onload event of the reader. This event fires when the reading operation is successfully completed. Inside the event handler, the source (src) attribute of an HTML image element with the ID "imager" is set to the e.target.result of the reader. This effectively displays the image preview in the designated image element.
The readURL function is defined to handle the image file selection and initiate the reading process.
- The function takes an input parameter, which is assumed to be a file input element.
- The function first checks if there are files selected and if there is at least one file (input.files && input.files[0]).
- It then makes the image element with the ID "imager" visible by modifying its CSS visibility property to "visible".
- Finally, it reads the selected file using the readAsDataURL method of the reader. This method reads the contents of the selected file and converts it to a data URL, which can be used as the source for an image element.
The last part of the code attaches an event listener to the "change" event of an input element with the ID "image-input". This event fires when a new image file is selected using the file input.
When this event occurs, the readURL function is called with the selected input element as an argument, initiating the process of reading the selected image file and displaying it as a preview.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
//toggle for form & badge
$(".js-switch").click(function() {
$(".main-content").toggleClass("as-card");
});
//code for image preview
var reader = new FileReader();
reader.onload = function(e) {
$("#imager").attr("src", e.target.result);
};
function readURL(input) {
if (input.files && input.files[0]) {
$("#imager").css("visibility",'visible');
reader.readAsDataURL(input.files[0]);
}
}
$("#image-input").change(function() {
readURL(this);
});Final Output:
Conclusion:
By converting form fill data into badges using HTML, CSS, and JavaScript, you can significantly enhance user engagement on your website. This dynamic approach transforms mundane interactions into visually pleasing experiences, leaving a lasting impression on your audience.
In conclusion, implementing this innovative conversion process can set your website apart and elevate its appeal to users. With the power of HTML, CSS, and JavaScript, you can turn simple form submissions into interactive badges that captivate and engage your audience. Start creating dynamic badges today and watch your user interaction soar.
Code by: Olivia Ng
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
