<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VisualMediaTV Network Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 10px;
padding-bottom: 10px;
background-color: #f5f5f5;
font-size: 12px;
line-height: 16px;
}
.form-sign {
float:left;
font-size: 12px;
line-height: 16px;
max-width: 600px;
padding: 9px 19px 19px;
margin: 0 2px 2px 10px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-sign .form-signin-heading,
.form-sign .checkbox {
margin-bottom: 5px;
}
.form-sign input[type="text"],
.form-sign input[type="password"] {
font-size: 12px;
height: auto;
margin-bottom: 10px;
padding: 5px 7px;
}
#messages {
font-size: 12px;
line-height: 16px;
max-width: 600px;
padding: 15px 19px 2px;
margin: 0 2px 2px 10px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'clean'
};
</script>
<BR/>
<form action="proces.php" method="post" name="ytlink" id="ytlink" class="form-sign" >
<fieldset>
<div class="control-group">
<label for="jouwchannel" class="control-label">Your YouTube Channel</label>
<div class="controls">
<input type="text" name="jouwchannel" id="jouwchannel" required >
<span class="help-block">eg: just <b>VisualMediaTV</b> without: http://www.youtube.com/VisualMediaTV</span>
</div>
</div>
<input name="ourchannel" id="ourchannel" type="hidden" value="34">
<input name="refer" id="refer" type="hidden" value="">
<div class="control-group">
<label for="taalchannel" class="control-label">Primary Language Spoken on Your YouTube Channel</label>
<div class="controls">
<select id="taalchannel" name="taalchannel" required="">
<option value="English" >English</option>
<option value="German" >German</option>
<option value="French" >French</option>
<option value="Dutch" >Dutch</option>
<option value="Italian" >Italian</option>
<option value="Spanish" >Spanish</option>
<option value="Polish" >Polish</option>
<option value="Russian" >Russian</option>
<option value="Japanese" >Japanese</option>
<option value="Portuguese" >Portuguese</option>
<option value="11" >Swedish</option>
<option value="12" >Chinese</option>
<option value="13" >Catalan</option>
<option value="14" >Ukrainian</option>
<option value="15" >Norwegian</option>
<option value="16" >Finnish</option>
<option value="17" >Vietnamese</option>
<option value="18" >Czech</option>
<option value="19" >Hungarian</option>
<option value="20" >Korean</option>
<option value="21" >Indonesian</option>
<option value="22" >Turkish</option>
<option value="23" >Romanian</option>
<option value="24" >Persian</option>
<option value="25" >Arabic</option>
<option value="26" >Danish</option>
<option value="27" >Esperanto</option>
<option value="28" >Serbian</option>
<option value="29" >Lithuanian</option>
<option value="30" >Slovak</option>
<option value="31" >Malay</option>
<option value="32" >Hebrew</option>
<option value="33" >Bulgarian</option>
<option value="34" >Slovenian</option>
<option value="35" >Volapük</option>
<option value="36" >Kazakh</option>
<option value="37" >Waray-Waray</option>
<option value="38" >Basque</option>
<option value="39" >Croatian</option>
<option value="40" >Hindi</option>
<option value="41" >Estonian</option>
<option value="42" >Azerbaijani</option>
<option value="43" >Galician</option>
<option value="44" >Simple English</option>
<option value="45" >Norwegian (Nynorsk)</option>
<option value="46" >Thai</option>
<option value="47" >Newar / Nepal Bhasa</option>
<option value="48" >Greek</option>
<option value="49" >Aromanian</option>
<option value="50" >Latin</option>
<option value="51" >Occitan</option>
<option value="52" >Tagalog</option>
<option value="53" >Haitian</option>
<option value="54" >Macedonian</option>
<option value="55" >Georgian</option>
<option value="56" >Serbo-Croatian</option>
<option value="57" >Telugu</option>
<option value="58" >Piedmontese</option>
<option value="59" >Cebuano</option>
<option value="60" >Tamil</option>
<option value="61" >Belarusian</option>
<option value="62" >Breton</option>
<option value="63" >Latvian</option>
<option value="64" >Javanese</option>
<option value="65" >Albanian</option>
<option value="66" >Belarusian</option>
<option value="67" >Marathi</option>
<option value="68" >Welsh</option>
<option value="69" >Luxembourgish</option>
<option value="70" >Icelandic</option>
<option value="71" >Bosnian</option>
<option value="72" >Yoruba</option>
<option value="73" >Malagasy</option>
<option value="74" >Aragonese</option>
<option value="75" >Bishnupriya Manipuri</option>
<option value="76" >Lombard</option>
<option value="77" >West Frisian</option>
<option value="78" >Bengali</option>
<option value="79" >Ido</option>
<option value="80" >Swahili</option>
<option value="81" >Gujarati</option>
<option value="82" >Malayalam</option>
<option value="83" >Western Panjabi</option>
<option value="84" >Afrikaans</option>
<option value="85" >Low Saxon</option>
<option value="86" >Sicilian</option>
<option value="87" >Urdu</option>
<option value="88" >Kurdish</option>
<option value="89" >Cantonese</option>
<option value="90" >Armenian</option>
<option value="91" >Quechua</option>
<option value="92" >Sundanese</option>
<option value="93" >Nepali</option>
<option value="94" >Zazaki</option>
<option value="95" >Asturian</option>
<option value="96" >Tatar</option>
<option value="97" >Neapolitan</option>
<option value="98" >Irish</option>
<option value="99" >Chuvash</option>
<option value="100" >Samogitian</option>
<option value="101" >Walloon</option>
<option value="102" >Amharic</option>
<option value="103" >Kannada</option>
<option value="104" >Alemannic</option>
<option value="105" >Buginese</option>
<option value="106" >Burmese</option>
<option value="107" >Interlingua</option>
</select>
</div>
</div>
<div class="control-group">
<label for="firstname" class="control-label">Your first name</label>
<div class="controls">
<input type="text" name="firstname" id="firstname" required>
</div>
</div>
<div class="control-group">
<label for="lastname" class="control-label">Your last name</label>
<div class="controls">
<input type="text" name="lastname" id="lastname" required>
</div>
</div>
<div class="control-group">
<label for="jouwytemail" class="control-label">Your YouTube channel Email address</label>
<div class="controls">
<input type="email" name="jouwytemail" id="jouwytemail" />
<span class="help-block">Here we need you to fill in the e-mail address associated with your YouTube channel</span>
</div>
</div>
<div class="control-group">
<label for="confirmemail" class="control-label">Confirm Email address</label>
<div class="controls">
<input type="email" name="confirmemail" id="confirmemail" required>
</div>
</div>
<div class="control-group">
<label for="skypen" class="control-label">Skype</label>
<div class="controls">
<input type="text" name="skypen" id="skypen" required>
</div>
</div>
<input type="checkbox" name="agreetwo" id="agreetwo" class="abc"/>
<span class="help-block"><br />
By submitting this form you agree to become a Content Aggregator.<br/>
</span>
</div>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6Ldu1eQSAAAAALU3kzL7952sdVQ01T6nSBpf0oLE">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6Ldu1eQSAAAAALU3kzL7952sdVQ01T6nSBpf0oLE" height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>
<input name="pytfrm" type="hidden" value="65B15095-72EE-4602-968A5403C2CD8433" id="pytfrm" />
</div>
<p></p>
<p></p>
<p></p>
<p></p>
<!-- Button -->
<div class="row submit">
<div class="span3 right">
<button class="btn btn-primary" input name="save" id="save" type="submit" value="Send">Send</button>
</div>
</div>
</fieldset>
</form>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#agreetwo').change(function() {
$('#submit').attr('disabled', !this.checked);
});
$('#ytlink').validate(
{
rules: {
"jouwchannel": {
minlength: 3,
maxlength:255,
required: true,
nowhitespace: true,
alphanumeric:true
},
"taalchannel": {
required: true
},
"skypen": {
pattern: "^[a-zA-Z0-9.,_-]{5,20}$",
required: function(element) {
return $("#skypen").val() > 1
}},
"firstname": {
minlength: 1,
maxlength: 60,
required: true
},
"lastname": {
minlength: 2,
maxlength: 60,
required: true
},
"jouwytemail": {
required: true,
email: true
},
"confirmemail": {
required: true,
email: true,
equalTo: "#jouwytemail"
}
},
highlight: function(label) {
$(label).closest('.control-group').addClass('error');
},
success: function(label) {
label
//.text('OK!').addClass('valid')
.closest('.control-group').addClass('success');
}
});
}); // end document.ready
</script>
</body>
</html>
