A virtual business card (vCard) is an efficient way to share contact details digitally. In this tutorial, you’ll learn how to create a sleek and interactive vCard generator using HTML, CSS, and JavaScript. Users can enter their details and download a personalized vCard file for easy networking and contact sharing. This project is perfect for enhancing your web development skills while adding a practical feature to your portfolio! 🌐📱
Features of Our Virtual Business Card Generator
✅ User-Friendly Input Form: Users can enter their name, phone number, email, company name, and job title.
✅ Modern and Stylish Design: A visually appealing UI with a smooth gradient background and glassmorphism effect.
✅ Automatic vCard Generation: JavaScript dynamically creates and downloads the vCard file.
✅ Form Validation: Ensures required fields (name, phone, and email) are filled in.
✅ Mobile Responsive: Works seamlessly across all devices and screen sizes.
Step-by-Step Guide
1️⃣ HTML: Creating the Input Form
We start by building a simple HTML form where users can input their details:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual Business Card (vCard)</title>
</head>
<body>
<div class="container">
<h2>📇 Virtual Business Card</h2>
<input type="text" id="name" placeholder="Full Name">
<input type="text" id="phone" placeholder="Phone Number">
<input type="email" id="email" placeholder="Email Address">
<input type="text" id="company" placeholder="Company Name">
<input type="text" id="job" placeholder="Job Title">
<button onclick="generateVCard()">Download vCard</button>
</div>
</body>
</html>2️⃣ CSS: Styling the Form
To give our vCard generator a modern and elegant look, we use CSS with a gradient background and a glassmorphism effect:
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.container {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
width: 350px;
text-align: center;
color: white;
}
button {
padding: 12px 20px;
border: none;
border-radius: 20px;
background: #ff6b6b;
color: white;
cursor: pointer;
font-weight: bold;
transition: 0.3s ease;
}
button:hover {
transform: scale(1.1);
}3️⃣ JavaScript: Generating the vCard File
Now, let’s add JavaScript to process the user inputs and generate a downloadable vCard file:
function generateVCard() {
let name = document.getElementById("name").value.trim();
let phone = document.getElementById("phone").value.trim();
let email = document.getElementById("email").value.trim();
let company = document.getElementById("company").value.trim();
let job = document.getElementById("job").value.trim();
if (!name || !phone || !email) {
alert("Please fill in Name, Phone, and Email.");
return;
}
let vCardData = `BEGIN:VCARD\nVERSION:3.0\nFN:${name}\nTEL:${phone}\nEMAIL:${email}\nORG:${company}\nTITLE:${job}\nEND:VCARD`;
let blob = new Blob([vCardData], { type: "text/vcard;charset=utf-8" });
let link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = `${name.replace(/\s+/g, "_")}_vCard.vcf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}Live Demo & Source Code
🎥 Watch the full tutorial video:
📂 Get the complete source code on GitHub: Madras Academy GitHub
Conclusion
By following this tutorial, you’ve successfully created a functional virtual business card generator using HTML, CSS, and JavaScript. This project helps enhance your web development skills while providing a practical tool for digital networking.
If you found this guide helpful, don’t forget to like, comment, and share! 🌟
🚀 Stay updated with more web development tutorials by subscribing to Madras Academy on YouTube!