bizcard custom form

CSS

<style type="text/css">
    body {background:#fbfbfb;}

    #image-field-wrapper{
        float-left;
        min-width:1050px;
        overflow:hidden;
    }
    
    #image-panel{
        float:left;
        padding: 0px 10px 0 10px;
        overflow:hidden;
    }
    
    img {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;        
    }
    
    #big-image-link{
    text-align:center;
    }

    #field-panel{
        float:left;
        padding: 0px 10px 0 10px;
        min-width:512px;
        overflow:hidden;    
    }

  .input-field{
    width:150px;
    margin:4px;
  }

    .input-field.company, .input-field.job_title, .input-field.email, .input-field.website, .input-field.phone, .input-field.mobile, .input-field.fax, .input-field.address1, .input-field.address2, .input-field.city, .input-field.state, .input-field.country, .input-field.zip{
        width:230px;
        margin:4px;
    }
    
    .input-field.first_name, .input-field.middle_name, .input-field.last_name, .input-field.company, .input-field.job_title, .input-field.address1, .input-field.address2, .input-field.city, .input-field.state, .input-field.country{
        text-transform: capitalize
    }
    
      .placeholder{
        color:#aaa;
      }
        
    /* Stylesheet for autocomplete */
    .autocomplete-w1 {
    background:url(http://www.bizcardarmy.com/images/shadow.png) no-repeat bottom right;
    position:absolute;
    top:0px;
    left:0px;
    margin:8px 0 0 6px;
    /* IE6 fix: */
    _background:none;
    _margin:0;
    }
    .autocomplete {
      border:1px solid #999;
      background:#FFF;
      cursor:default;
      text-align:left;
      max-height:350px;
      overflow:auto;
      margin:0px 6px 6px -6px;
      /* IE6 specific: */
      _height:350px;
      _margin:0; _overflow-x:hidden;
    }
    .autocomplete .selected {
      background:#F0F0F0;
    }
    .autocomplete div {
      padding:2px 5px;
      white-space:nowrap;
    }
    .autocomplete strong {
      font-weight:normal;
      color:#3399FF;
    }

    .tooltip {
  	display:none;
  	background:transparent url(http://www.bizcardarmy.com/images/white_arrow_small.png);
  	font-size:16px;
  	height:20px;
    width:159px;
  	padding:20px;
  	color:#000;	
  	z-index:1000;
  	opacity:1;
  }
    
</style>

html

<div id="form-content">  
  <div id="image-field-wrapper">
    <div id = 'image-panel' >
      <a href="{{image_url_large}}" rel="external" target="_blank">
        <img class="card-mage" src="{{image_url}}">
          <br/>
          <div id="big-image-link">(click to see larger image)</div>
        </a>
    </div>
    <div id = 'field-panel'>
        Name<br />
        <input class="input-field first_name" type="text" data_parse="capitalize" name="result[first_name]" placeholder="First name" title="First name"/>
        <input class="input-field middle_name" type="text" data_parse="capitalize"  name="result[middle_name]" placeholder="Middle name" title="Middle name"/>
        <input class="input-field last_name" type="text" data_parse="capitalize"  name="result[last_name]" placeholder="Last name" title="Last name"/><br />

        <br />Company info<br />
        <input class="input-field company" type="text" name="result[company]" placeholder="Company" title="Company"/>
        <input class="input-field job_title" type="text" name="result[job_title]" placeholder="Job Title" title="Job Title"/><br />
    
        <br />Contact<br />
        <input class="input-field email" type="text" data_parse="lowercase"  name="result[email]" placeholder="Email" title="Email"/>
        <input class="input-field website" type="text" data_parse="url"  name="result[website]" placeholder="Website" title="Website"/><br />
        <input class="input-field phone" type="text" data-required="true" name="result[phone]" placeholder="Phone" title="Phone"/>
        <input class="input-field mobile" type="text" name="result[mobile]" placeholder="Mobile" title="Mobile"/><br />
        <input class="input-field fax" type="text" name="result[fax]" placeholder="Fax" title="Fax"/><br />

        <br />Address<br />
        <input class="input-field address1" type="text" name="result[address1]" placeholder="Address1"title="Address1"/>
        <input class="input-field address2" type="text" name="result[address2]" placeholder="Address2" title="Address2"/><br />
        <input class="input-field city" type="text" name="result[city]" placeholder="City" title="City"/><br />
        <input class="input-field state" type="text" name="result[my_state]" placeholder="State" title="State"/><br />
        <input class="input-field country" type="text" name="result[country]" placeholder="Country" title="Country"/>
        <input class="input-field zip" type="text" name="result[zip]" placeholder="Zip code" title="Zip code"/><br />
        
    </div> <!-- End of #field-panelimage-field-wrapper -->
  </div> <!-- End of #image-field-wrapper -->
</div> <!-- End of #form-content -->

Javascript

<script type="text/javascript" src="http://www.bizcardarmy.com/javascripts/json2.js"></script>	
<script type="text/javascript" src="http://www.bizcardarmy.com/javascripts/jquery.js"></script>
<script type="text/javascript" src="http://www.bizcardarmy.com/javascripts/jquery.tools.min.js"></script>
<script type="text/javascript" src="http://www.bizcardarmy.com/javascripts/jquery.autocomplete.js"></script>
<script type="text/javascript" src="http://www.bizcardarmy.com/javascripts/Placeholder/placeholder.js"></script>

<script type="text/javascript">
  var country_list = ['Afghanistan','Albania','Algeria','American Samoa','Andorra','Angola','Anguilla','Antarctica','Antarctica French Southern territories','Antigua and Barbuda','Argentina','Armenia','Aruba','Australia','Austria','Azerbaijan','Bahamas','Bahrain','Bangladesh','Barbados','Belarus','Belgium','Belize','Benin','Bermuda','Bhutan','Bolivia','Bosnia and Herzegovina','Botswana','Bouvet Island','Brazil','British Indian Ocean Territory','Bulgaria','Burkina Faso','Burundi','Brunei','Cambodia','Cameroon','Canada','Cape Verde','Cayman Islands','Central African Republic','Chad','Cocos (Keeling) Islands','Chile','China','Christmas Island','Colombia','Comoros','Congo Democratic Republic','Congo','Cook Islands','Costa Rica','Cote d\'Ivoire','Croatia','Cuba','Cyprus','Czech Republic','Denmark','Djibouti','Dominica','Dominican Republic','East Timor','Ecuador','Egypt','El Salvador','Eritrea','Equatorial Guinea','Estonia','Ethiopia','Falkland Islands','Faroe Islands','Fiji','Fiji Islands','Finland','France','French Guiana','FrenchPolynesia','Gabon','Gambia','Germany','Georgia','Ghana','Gibraltar','Greece','Greenland','Grenada','Guadeloupe','Guam','Guatemala','Guinea','Guinea-Bissau','Guyana','Haiti','Heard Island and McDonald Islands','Honduras','Hong Kong','Hungary','Iceland','India','Indonesia','Iran','Iraq','Ireland','Israel','Italy','Jamaica','Japan','Jordan','Kazakstan','Kenya','Kiribati','Kuwait','Kyrgyzstan','Laos','Latvia','Lebanon','Lesotho','Liechtenstein','Liberia','Libyan Arab Jamahiriya','Lithuania','Luxembourg','Macao','Macedonia','Madagascar','Malawi','Malaysia','Maldives','Mali','Malta','Marshall Islands','Mauritania','Mauritius','Martinique','Mayotte','Mexico','Micronesia Federated States of','Moldova','Monaco','Mongolia','Montserrat','Morocco','Mozambique','Myanmar','Namibia','Nauru','Nepal','Netherlands','Netherlands Antilles','New Caledonia','New Zealand','Nicaragua','Niger','Nigeria','Niue','Norfolk Island','Northern Mariana Islands','North Korea','Norway','Oman','Pakistan','Palestine','Palau','Panama','Papua New Guinea','Paraguay','Peru','Philippines','Pitcairn','Poland','Portugal','Puerto Rico','Qatar','Reunion','Romania','Russian Federation','Rwanda','Saint Helena','Saint Kitts and Nevis','Saint Pierre and Miquelon','Saint Lucia','Saint Vincent and the Grenadines','Sao Tome and Principe','Samoa','San Marino','Saudi Arabia','Senegal','Seychelles','Sierra Leone','Singapore','Slovakia','Slovenia','Solomon Islands','South Africa','South Georgia and the South Sandwich Islands','South Korea','Somalia','Spain','Sri Lanka','Sudan','Suriname','Svalbard and Jan Mayen','Swaziland','Sweden','Switzerland','Syria','Taiwan','Tanzania','Tajikistan','Thailand','Tokelau','Togo','Tonga','Trinidad and Tobago','Tunisia','Turkey','Turkmenistan','Turks and Caicos Islands','Tuvalu','Uganda','United Arab Emirates','United Kingdom','United States Minor Outlying Islands','United States','Ukraine','Uruguay','Uzbekistan','Vanuatu','Vatican Holy See (Vatican City State)','Venezuela','Vietnam','Virgin Islands GB','Virgin Islands U.S.','Wallis and Futuna','Western Sahara','Yemen','Yugoslavia','Zambia','Zimbabwe'];
  
  $(document).ready(function(){
  	autocomplete_fields = ["first_name", "middle_name", "last_name", "company", "job_title", "city", "state", "zip"];
	
  	$.each(autocomplete_fields, function(index, value){
  		var inputField = "input." + value;
  		$(inputField).autocomplete({
  			serviceUrl: "http://www.bizcardarmy.com/cards/return_data_for_autocompletion.json",
  			maxHeight: 400,
  		  width: 300,
  		  zIndex: 9999,
  			params: { field: value }
  		});
  	});

    $('.input-field.country').autocomplete({
    	maxHeight: 400,
      width: 300,
      zIndex: 9999,
    	lookup: country_list
    });
  		
    $('.input-field').placeholder();
    $(".input-field").tooltip({tipClass: "tooltip"});
  })//End of document ready
</script>

Title and description

Enter text from a business card image



Below is the image of a business card and you need to enter ALL information into the form. Follow these other guidelines to get paid:

1. You must enter data for ALL fields present and readable on the card.
2. Type exactly what is on the card. One minor mistake or typo will cause the whole card to be rejected and you won’t get paid.
3. Be careful to capitalize names and companies