How to Make a QR Code for VCARD
What is QR Code ?
QR Code is a 2 dimensional bar code represented in a square pixel matrix. We can store alphanumeric data inside this QR Code box often depicted in black and white colored square pixel image. In the web world, QR Code is widely used to store Website URLs, Business VCard or just Plain Text content in it.
Try to scan the below images in your smartphone using QR Scanner App from your mobile.
- This QR Image just contains the Website URL. On scanning this, you will be able to see the prompt to open our website URL.
QR Code – Website URL - Business VCARD is stored inside this QR Image. On scanning this, it will prompt you to store the Contact.
QR Code for VCARD
What is VCARD ?
VCARD is the recognized electronic data format used for storing mobile contact details. Using this VCARD or digital Business card, you can easily share or backup the contacts in mobiles and computers.
VCARD contains various fields namely First Name, Last Name, Organization, Job Title, Phone No, Address, Email, etc.,. VCARD stores these data fields in the form of XML Nodes in a plain text format. Usage and fields inclusions are being improvised from one version to another. vCard 2.1, vCard 3.0, vCard 4.0, etc are few versions of VCARD format.
Why make QR Code for VCARD (Digital Business Card)?
Business cards are vital part for any business. As the business grows, the need for the changes in the business cards arises, for including new product catalogs or additional details about service lines. As we are living in the Mobile Fantasy & Tech era, it is important to follow-up and keep ourselves updated about the technology buzz and make necessary changes in our marketing/sales/communication strategy.
We can easily store our business contact details like First Name, Last Name, Organization, Job Title, Website URL, Email etc., inside VCARD and this XML based VCARD content can be stored in the form of square pixel QR Image. After embedding the VCARD inside this QR Image, we can add this image in our hardcopy business card design and print them.
Customers can now easily scan the QR Image printed on the business card and store your business contact details in their mobile easily. And yes, your business card with QR Code looks SIMPLE and SMART !!!
Free Download QR CODE vcard generator
You can use our below HTML code to make QR Code with your Business VCARD embedded easily.
<html>
<script>
function generateQRCode(){
var startNode="BEGIN:VCARD"+"\n"+"VERSION:3.0"+"\n";
var endNode="END:VCARD";
startNode+="N:"+lastName.value.trim()+";"+firstName.value.trim()+"\n";
startNode+="FN:"+firstName.value.trim()+" "+lastName.value.trim()+"\n";
startNode+="EMAIL:"+email.value.trim()+"\n";
startNode+="ORG:"+org.value.trim()+"\n";
startNode+="TITLE:"+title.value.trim()+"\n";
startNode+="NOTE:"+url.value.trim()+"\n";
startNode+="URL:"+url.value.trim()+"\n";
startNode+="TEL:"+phoneNo.value.trim()+"\n";
startNode+="ADR:"+address1.value.trim()+";"+address2.value.trim()+";"+city.value.trim()+";"+state.value.trim()+";"+country.value.trim()+";"+zipCode.value.trim()+"\n";
startNode+=endNode;
this.qrImage.style.display ='none';
this.qrImage.src="https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=200x200&chl="
+encodeURIComponent(startNode);
this.qrImage.style.display ='inline';
this.vcard.value=startNode;
this.vcard.style.display ='inline';
this.vcardDiv.style.display ='inline';
this.sampleQR.style.display ='none';
}
</script>
<style>
DIV{
color:royalblue;
}
H3
{
color:PURPLE;
}
label{
display: block;
font-weight: bold;
font-size: 0.929em;
}
</style>
<body>
<form method="post">
<center>
<h2> Tips and Tricks from Officetricks.com</h2>
<h2>Generate QR Code for your Business VCARD using Google Chart API</h2></center>
<div style="float:left;width:30%;padding-left:20%;">
<label for="firstName">First Name : </label>
<input type="text" id="firstName" value="" size="40"> <br>
<label for="lastName">Last Name : </label> <input type="text" id="lastName" value="" size="40"> <br>
<label for="lastName">Phone No :</label> <input type="text" id="phoneNo" value="" size="40"> <br>
<label for="org">Organisation or Business:</label> <input type="text" id="org" value="" size="40"> <br>
<label for="org">Job Title:</label><input type="text" id="title" value="" size="20"> <br>
<label for="org">Website:</label><input type="text" id="url" value="" size="40"> <br>
<label for="org">Email:</label><input type="text" id="email" value="" size="40"> <br>
<label for="org">Address Line1:</label><input type="text" id="address1" value="" size="40"> <br>
<label for="org">Address Line2:</label><input type="text" id="address2" value="" size="40"> <br>
<label for="org">City:</label><input type="text" id="city" value="" size="40"> <br>
<label for="org">State:</label><input type="text" id="state" value="" size="40"> <br>
<label for="org">Country:</label><input type="text" id="country" value="" size="40"> <br>
<label for="org">Zip Code: </label><input type="text" id="zipCode" value="" size="40"> <br>
<br>
<input type="button" value="Embed VCARD in QRCode Format" onclick="javascript:generateQRCode();"><br>
</div>
<div style="float:right;width:40%;padding-right:10%;">
<div style="display:none;" id="vcardDiv">
<h3>VCARD Created Successfully !!!!!! </h3>
<textarea rows="13" cols="40" style='display:none;' id="vcard" border="2">
</textarea><BR>
<H3>VCARD Embedded QR Code Image</H3> </div>
<div style="display:inline;" id="sampleQR">
<H3>Sample QR Code Image for Officetricks.com Website URL</H3>
</div>
<img id='qrImage' style='display:inline;'
src='https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=200x200&chl=http%3A%2F%2Fofficetricks.com'/>
<h3>
For more Tips and Queries, logon to <a href="https://officetricks.com" target="blank">
https://officetricks.com<a> or email to <a href="mailto:officetricks123@gmail.com">officetricks123@gmail.com</a>.</h3>
</div>
</form>
</body>
</html>
Just save the code as QRVard.html and open it in the browser. Fill in all the details like First Name, Phone No, Organization, Job Title, Email, etc., and click on Embed VCARD in QRcode Format button. You could see the QR Image generated using Google API displayed in the same page.
May be in the future, we would be able to hide a book or movie in a piece of paper in inside this tiny barcode and can easily share to our friends without the need of any data storage component.
Till then, use this small code snippet to make QR Code yourself with VCard embedded in it and make your business cards Compact.