Home
Web Design
Web development

Create Mobile Contacts CSV file maker online

December 09, 2025

Below is a complete, ready-to-use HTML/CSS/JavaScript project that works entirely in the browser.



It allows users to:

✅ Enter First Name, Last Name, Mobile Number manually
✅ Upload a .vcf file and extract contacts
✅ Generate a CSV file ready for import into mobile phones

✅ Mobile Contact CSV Maker — Full Source Code

Copy this into a single index.html file and open it in any browser.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mobile Contact CSV Maker</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background: #f5f5f5;
        padding: 20px;
    }
    .container {
        width: 500px;
        background: white;
        padding: 20px;
        margin: auto;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,.1);
    }
    h2 { text-align: center; }
    input, button {
        width: 100%;
        padding: 10px;
        margin: 8px 0;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
    button {
        background: #0077ff;
        color: white;
        border: none;
        cursor: pointer;
    }
    button:hover { background: #005fcc; }
    .contact-list {
        margin-top: 20px;
    }
    .contact-item {
        padding: 8px;
        background: #e9e9e9;
        margin: 5px 0;
        border-radius: 5px;
    }
</style>
</head>
<body>

<div class="container">
    <h2>📱 Mobile Contact CSV Maker</h2>

    <h3>Manual Entry</h3>
    <input type="text" id="fname" placeholder="First Name">
    <input type="text" id="lname" placeholder="Last Name">
    <input type="text" id="mobile" placeholder="Mobile Number (10 digits)">
    <button onclick="addManualContact()">Add Contact</button>

    <h3>Import From .VCF File</h3>
    <input type="file" id="vcfFile" accept=".vcf">
    <button onclick="importVCF()">Import VCF</button>

    <h3>Contact List</h3>
    <div id="contactList" class="contact-list"></div>

    <button onclick="downloadCSV()">Download CSV</button>
</div>

<script>
let contacts = [];

function addManualContact() {
    const first = document.getElementById("fname").value.trim();
    const last = document.getElementById("lname").value.trim();
    let mobile = document.getElementById("mobile").value.trim();

    if (!first || !mobile) {
        alert("First name and mobile number required.");
        return;
    }

    if (!/^[0-9]{10}$/.test(mobile)) {
        alert("Mobile number must be 10 digits.");
        return;
    }

    contacts.push({ first, last, mobile });
    displayContacts();

    document.getElementById("fname").value = "";
    document.getElementById("lname").value = "";
    document.getElementById("mobile").value = "";
}

function importVCF() {
    const fileInput = document.getElementById("vcfFile");
    const file = fileInput.files[0];
    if (!file) return alert("Please select a VCF file.");

    const reader = new FileReader();
    reader.onload = function(e) {
        const lines = e.target.result.split("\n");
        let current = {};

        lines.forEach(line => {
            if (line.startsWith("FN:")) {
                const full = line.replace("FN:", "").trim();
                const parts = full.split(" ");
                current.first = parts[0];
                current.last = parts.slice(1).join(" ");
            }
            if (line.startsWith("TEL")) {
                let phone = line.split(":")[1].replace(/\D/g, "");
                if (phone.length >= 10) {
                    phone = phone.slice(-10);
                    current.mobile = phone;
                }
            }
            if (line.startsWith("END:VCARD")) {
                if (current.first && current.mobile) {
                    contacts.push({...current});
                }
                current = {};
            }
        });

        displayContacts();
        alert("VCF imported!");
    };
    reader.readAsText(file);
}

function displayContacts() {
    const list = document.getElementById("contactList");
    list.innerHTML = "";

    contacts.forEach((c, i) => {
        const div = document.createElement("div");
        div.className = "contact-item";
        div.textContent = `${c.first} ${c.last} - ${c.mobile}`;
        list.appendChild(div);
    });
}

function downloadCSV() {
    if (contacts.length === 0) return alert("No contacts to export.");

    let csv = "First Name,Last Name,Mobile\n";
    contacts.forEach(c => {
        csv += `"${c.first}","${c.last}","${c.mobile}"\n`;
    });

    const blob = new Blob([csv], { type: "text/csv" });
    const url = URL.createObjectURL(blob);

    const a = document.createElement("a");
    a.href = url;
    a.download = "contacts.csv";
    a.click();
}
</script>

</body>
</html>

⭐ Features Included

  • Beautiful responsive UI
  • Manual contact entry
  • Extracts first name, last name, mobile numbers from .vcf
  • Automatically cleans phone numbers
  • Produces CSV (First Name, Last Name, Mobile)
  • Fully client-side, no server needed


Post a Comment