How to Make Recruitment Form with Blogger Contact Form in Specific Pages

FacebookTwitterGoogle+
Languange
Request kali ini yaitu membuat formulir recruitment dari sobat Riku Hachigatsu, bagi sobat yang ingin merequest silahkan request di fanspage saya. saya sudah menyediakan catatan buat sobat yang ingin merequest. oh ya source kodenya saya ambil dari tutorial kompiajaib yaitu http://bit.ly/modifymsg_kompiajaib dan http://bit.ly/contactform_kompiajaib

Setiap fansub punya halaman recruitment untuk mencari anggota yang ingin bergabung di fansubnya, jobnya pun beragam seperti Uploader yaitu pengupload anime diberbagai filehosting,Translator yaitu penerjemah anime dari English ke Indo, Encoder yaitu pengompress video dengan qualitas tertentu, admin fanspage atau grup dan lain sebagainya.

Usagilabs, Usagilabs How to Make Recruitment Form, Blogger, Template, Cmonfrozenyang daftar pun beragam ada yang masih pemula, sudah mahir, dan sudah mastah, dan mereka mempunyai alasan untuk bergabung.

keuntungan sobat jika bergabung di fansub yaitu mendapatkan pengalaman seperti mengerti berbahasa inggris karena keseringan translate bahasa inggris, mengerti bahasa jepang, mengerti membuat efek karaoke lewat aegisub, mengerti mencompress video dengan resolusi tertentu dan lain sebagainya.

tapi sobat jangan berharap bisa mendapatkan upah dari hasil kerja sobat karena fansub dibuat untuk meluangkan waktu kosong atau sekedar hobi jejepangan namun ada beberapa fansub yang menyediakan upah biasanya fansub yang memiliki iklan dan shortlink ._.

Nah itu saja penjelasan singkat ane. balik ke topik utama yaitu tutorialnya xD

Cara Membuat Halaman Recruitment Fansub

1. Masuk ke Blogger
2. Blogmu Halaman Halaman Baru
3. Masukan kode dibawah ini
<style>h1.post-title{display:none}.contact-form-box>p{margin:0;line-height:1.5;color:#666;border:1px solid #F1E8C3;background:#FDF6D7;padding:15px;border-radius:3px}.contact-form-box>b{text-transform:uppercase;font-size:17px;text-align:center;display:block;margin:0 0 15px;letter-spacing:.5px;border-bottom:1px solid #ddd}.us_line{display:block;margin-bottom:15px;font-size:13px;color:#666;letter-spacing:.5px;text-transform:uppercase;position:relative;font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif}.us_line>b{display:block;text-transform:uppercase;letter-spacing:1px}.us_line>input,.us_line>textarea,.us_line>select{border:1px solid #E2E2E4;background:#FDFDFD;padding:0 10px;width:100%;display:block;color:#999;border-radius:3px;height:35px;line-height:2}.us_line>input:focus,.us_line>textarea:focus,.us_line>select:focus{outline:1px solid #009EFD;color:#333}#ContactForm1_contact-form-reason{height:100px;padding:5px 10px}.us_line:nth-of-type(3),.us_line:nth-of-type(4),.us_line:nth-of-type(8),.us_line:nth-of-type(9){display:inline-block;width:49.5%}#sendform{background:#77CB59;color:#FFF;border:0;padding:10px 25px;text-transform:uppercase;letter-spacing:1px;font-weight:700;border-radius:3px;font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif;cursor:pointer}#sendform:hover{background:#66AF4C}#sendform[disabled="disabled"]{background:#DDD!important}#contact_layout{font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif;text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.5);z-index:99999}.contact_top{margin:-55px auto 15px}.contact_top i{background:#70C340;color:#fff;font-size:35px;font-weight:400;text-align:center;margin:auto;border-radius:100%;line-height:60px;padding:0 14px;border:5px solid #FFF}.contact_message{width:40%;background:#FFF;color:#fff;border-radius:5px;padding:20px;text-align:center;color:#333;position:absolute;top:10%;left:50%;margin-left:-20%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.contact_message b{text-transform:capitalize;font-size:20px;letter-spacing:.2px;display:block;font-weight:400}.contact_message p{margin:15px 0;color:#666}.contact_message a{display:block;background:#70c340;border-radius:5px;line-height:40px;color:#fff!important;text-transform:uppercase;font-weight:700;font-size:15px}.contact-form-error-message-with-border img{display:none!important}.error_message a,.error_message i{background:#E66148!important}@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}}@media screen and (max-width:420px){.us_line:nth-of-type(3),.us_line:nth-of-type(4),.us_line:nth-of-type(8),.us_line:nth-of-type(9){width:100%}}</style>
<div class="contact-form-box">
<b>Recruitment Staff</b>
<p>Open Recruitment Staff, if you interested want to join in my fansub please register in form below. thanks</p>
<form id='us_contact' name="contact-form">
<div class='us_line'><b>Name</b><input id="ContactForm1_contact-form-name" name="name" placeholder="Name" type="text" value="" required/></div>
<div class='us_line'><b>Email</b><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" type="text" value="" required/></div>
<div class='us_line'><b>Gender</b><select><option value="Male" name="gender" selected>Male</option><option value="Female" name="gender">Female</option></select></div>
<div class='us_line'><b>Age</b><input id="ContactForm1_contact-form-age" name="age" placeholder="0" maxlength="2" type="number" min="1" max="30" value="" required/></div>
<div class='us_line'><b>Domicele</b><input id="ContactForm1_contact-form-domicele" name="age" placeholder="Region, City" type="text" value="" required/>
</div>
<div class='us_line'><b>Url Facebook</b><input id="ContactForm1_contact-form-urlfb" name="age" placeholder="http://facebook.com/yourusername" type="url" value="" required/></div>
<div class='us_line'><b>Contact</b><input id="ContactForm1_contact-form-contact" name="age" placeholder="Ex. Number Phone / ID Line / PIN BBM" type="text" value="" required/></div>
<div class='us_line'><b>Job</b>
<select>
<option value="Translator" name="jobs" selected>Translator</option>
<option value="Typesett" name="jobs">Typesett</option>
<option value="Kara Effect" name="jobs">Kara Effect</option>
<option value="Uploader/Mirroring" name="jobs">Uploader/Mirroring</option>
<option value="TLC & Editor" name="jobs">TLC & Editor</option>
<option value="Encoder" name="jobs">Encoder</option>
<option value="Admin In Fanspage" name="jobs">Admin In Fanspage</option>
</select>
</div>
<div class='us_line'><b>Levels of proficiency</b>
<select>
<option value="Zero" name="lvl" selected>Zero</option>
<option value="Beginner" name="lvl" selected>Beginner</option>
<option value="Experienced" name="lvl">Experienced</option>
<option value="Proficient" name="lvl">Proficient</option>
<option value="Expert" name="lvl">Expert"</option>
</select>
</div>
<div class='us_line'><b>The reason want to join?</b><textarea cols="25" id="ContactForm1_contact-form-reason" name="email-message" placeholder="Give your reasons why you want to join?" required></textarea></div>
<div class='us_line dn' style='display:none;'><textarea style='display:none;' cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><input style='display:none;' id="ContactForm1_contact-form-submit" type="button" value="Send" /></div>
<button type='button' onclick="generate()" disabled="disabled" id="sendform">Send</button>
<div id="ContactForm1_contact-form-error-message"></div>
<div id="ContactForm1_contact-form-success-message"></div>
</form>
</div>
<script type="text/javascript">/*<![CDATA[*/if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');/*]]>*/</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script>
//<![CDATA[
/*
* Form Recruitment Fansubs
* Source code by http://bit.ly/modifymsg_kompiajaib and http://bit.ly/contactform_kompiajaib
* Modify by http://usagilabs.blogspot.com/
* Copyright 2016
*/
var blogsid = "8410876137745120111"; // Your IDBLOG
var nameblog = "//animetangov2.blogspot.com/"; // Your URLBLOG, don't copy HTTP: or HTTPS:
var successmsg = "<b>Your form has been sent</b><p>We will strive to respond promptly your registration within 24 hours. if you not get reply within 24 hours please contact admin via fanspage.</p>";
var invalidmsg =  "<b>A valid email address is required</b><p>You must fill in your email address correctly.</p>";
var notsendmsg = "<b>Message could not be sent</b><p>Please try again later</p>";
var sett = {
name   : "Name",
email   : "Email",
gender   : "Gender",
age   : "Age",
domicele  : "Domicele",
urlfb   : "Url Facebook",
contact  : "Contact",
jobs   : "Jobs",
lvl   : "Level",
reason   : "Give your reasons why you want to join?",
br    : "\n"
};
//]]>
</script>
<script src="//cdn.rawgit.com/tutorialku/usagilabs/master/lib/formrecruitment.min.js" type="text/javascript"></script>
Settingan Penting :
8410876137745120111 ganti dengan kode idblog anda
blogid, usagilabs, cmonfrozen, how to make contact form
//animetangov2.blogspot.com/ ganti dengan url blog sobat, tapi jangan copy http: atau https: nya ambil dari // sampai / paham gak? wkwkwkw

4. Setelah sobat sudah mengeditnya, klik Publish

sobat bisa melihat hasilnya / demo disini
cukup simple bukan? tidak perlu repot repot atur sana sini :D, saya juga sudah menyediakan beberapa style buat sobat. tinggal dipilih.

Style Boxed
.contact-form-box{border:1px solid #E2E2E4;padding:0 20px;background:#FDFDFD;border-radius:3px}.contact-form-box>p{margin:0;line-height:1.5;color:#666;border:1px solid #F1E8C3;background:#FDF6D7;padding:15px;border-radius:3px}.contact-form-box>b{background:#77CB59;color:#FFF;text-transform:uppercase;font-size:17px;text-align:center;display:block;margin:0 -21px 15px;border-radius:3px 3px 0 0;line-height:45px;letter-spacing:.5px}h1.post-title{display:none}.us_line{display:block;margin-bottom:15px;font-size:13px;color:#B9B9B9;letter-spacing:.5px;text-transform:uppercase;font-weight:700;position:relative;font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif}.us_line>b{display:block;text-transform:uppercase;letter-spacing:1px}.us_line>input,.us_line>textarea,.us_line>select{border:1px solid #E2E2E4;background:#FFF;padding:0 10px;width:100%;display:block;color:#B0B1B1;border-radius:3px;height:35px;line-height:2}.us_line>input:focus,.us_line>textarea:focus,.us_line>select:focus{outline:1px solid #009EFD;color:#646464}#ContactForm1_contact-form-reason{height:100px;padding:5px 10px}.us_line:nth-of-type(3),.us_line:nth-of-type(4),.us_line:nth-of-type(8),.us_line:nth-of-type(9){display:inline-block;width:49.5%}#sendform{background:#77CB59;color:#FFF;border:0;padding:10px 25px;text-transform:uppercase;letter-spacing:1px;font-weight:700;border-radius:3px;font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif;cursor:pointer}#sendform:hover{background:#66AF4C}#sendform[disabled="disabled"]{background:#DDD!important}#contact_layout{font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif;text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.5);z-index:99999}.contact_top{margin:-55px auto 15px}.contact_top i{background:#70C340;color:#fff;font-size:35px;font-weight:400;text-align:center;margin:auto;border-radius:100%;line-height:60px;padding:0 14px;border:5px solid #FFF}.contact_message{width:40%;background:#FFF;color:#fff;border-radius:5px;padding:20px;text-align:center;color:#333;position:absolute;top:10%;left:50%;margin-left:-20%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}}.contact_message b{text-transform:capitalize;font-size:20px;letter-spacing:.2px;display:block;font-weight:400}.contact_message p{margin:15px 0;color:#666}.contact_message a{display:block;background:#70c340;border-radius:5px;line-height:40px;color:#fff!important;text-transform:uppercase;font-weight:700;font-size:15px}.contact-form-error-message-with-border img{display:none!important}.error_message a,.error_message i{background:#E66148!important}@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}}@media screen and (max-width:420px){.us_line:nth-of-type(3),.us_line:nth-of-type(4),.us_line:nth-of-type(8),.us_line:nth-of-type(9){width:100%}}
Style dengan Icon Fontawesome
bagi sobat yang ingin menambahkan icon sobat tinggal copy css dibawah ini lalu taruh diatas </style>, tidak ada yang diganti cuman menambahkan css untuk fontawesome.
.us_line:after{font-family:FontAwesome;position:absolute;bottom:6px;left:10px;z-index:100;color:#B0B1B1;font-size:13px;font-weight:400;opacity:.6}.us_line:nth-of-type(1):after{content:"\f007"}.us_line:nth-of-type(2):after{content:"\f0e0"}.us_line:nth-of-type(3):after{content:"\f222"}.us_line:nth-of-type(4):after{content:"\f133"}.us_line:nth-of-type(5):after{content:"\f21d"}.us_line:nth-of-type(6):after{content:"\f082"}.us_line:nth-of-type(7):after{content:"\f095"}.us_line:nth-of-type(8):after{content:"\f0f2"}.us_line:nth-of-type(9):after{content:"\f19d"}.us_line>input,.us_line>select{padding-left:30px!important}
Request this time is to create a form of recruitment from Riku Hachigatsu, for those of you who want to requesting tutorial,tools,theme,or template. please request at fanspage me. I have already provided a note for you who want to requesting. for the source code I took from the site kompiajaib (http://bit.ly/modifymsg_kompiajaib and http://bit.ly/contactform_kompiajaib)

Each fansub have a page recruitment to find members who want to join in fansub, jobs were varied like Uploader which upload anime in any file hosting, Translator is the translator anime, Encoder, admin fanspage or group, and so forth.

well for those of you who want to make recruitment pages there's nothing wrong if you try this one tutorial.

How to Make Pages Recruitment Fansub

1. Sign in to Blogger
2. YourBlog Pages Create Pages
3. Enter the code below
<style>h1.post-title{display:none}.contact-form-box>p{margin:0;line-height:1.5;color:#666;border:1px solid #F1E8C3;background:#FDF6D7;padding:15px;border-radius:3px}.contact-form-box>b{text-transform:uppercase;font-size:17px;text-align:center;display:block;margin:0 0 15px;letter-spacing:.5px;border-bottom:1px solid #ddd}.us_line{display:block;margin-bottom:15px;font-size:13px;color:#666;letter-spacing:.5px;text-transform:uppercase;position:relative;font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif}.us_line>b{display:block;text-transform:uppercase;letter-spacing:1px}.us_line>input,.us_line>textarea,.us_line>select{border:1px solid #E2E2E4;background:#FDFDFD;padding:0 10px;width:100%;display:block;color:#999;border-radius:3px;height:35px;line-height:2}.us_line>input:focus,.us_line>textarea:focus,.us_line>select:focus{outline:1px solid #009EFD;color:#333}#ContactForm1_contact-form-reason{height:100px;padding:5px 10px}.us_line:nth-of-type(3),.us_line:nth-of-type(4),.us_line:nth-of-type(8),.us_line:nth-of-type(9){display:inline-block;width:49.5%}#sendform{background:#77CB59;color:#FFF;border:0;padding:10px 25px;text-transform:uppercase;letter-spacing:1px;font-weight:700;border-radius:3px;font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif;cursor:pointer}#sendform:hover{background:#66AF4C}#sendform[disabled="disabled"]{background:#DDD!important}#contact_layout{font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif;text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.5);z-index:99999}.contact_top{margin:-55px auto 15px}.contact_top i{background:#70C340;color:#fff;font-size:35px;font-weight:400;text-align:center;margin:auto;border-radius:100%;line-height:60px;padding:0 14px;border:5px solid #FFF}.contact_message{width:40%;background:#FFF;color:#fff;border-radius:5px;padding:20px;text-align:center;color:#333;position:absolute;top:10%;left:50%;margin-left:-20%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.contact_message b{text-transform:capitalize;font-size:20px;letter-spacing:.2px;display:block;font-weight:400}.contact_message p{margin:15px 0;color:#666}.contact_message a{display:block;background:#70c340;border-radius:5px;line-height:40px;color:#fff!important;text-transform:uppercase;font-weight:700;font-size:15px}.contact-form-error-message-with-border img{display:none!important}.error_message a,.error_message i{background:#E66148!important}@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}}@media screen and (max-width:420px){.us_line:nth-of-type(3),.us_line:nth-of-type(4),.us_line:nth-of-type(8),.us_line:nth-of-type(9){width:100%}}</style>
<div class="contact-form-box">
<b>Recruitment Staff</b>
<p>Open Recruitment Staff, if you interested want to join in my fansub please register in form below. thanks</p>
<form id='us_contact' name="contact-form">
<div class='us_line'><b>Name</b><input id="ContactForm1_contact-form-name" name="name" placeholder="Name" type="text" value="" required/></div>
<div class='us_line'><b>Email</b><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" type="text" value="" required/></div>
<div class='us_line'><b>Gender</b><select><option value="Male" name="gender" selected>Male</option><option value="Female" name="gender">Female</option></select></div>
<div class='us_line'><b>Age</b><input id="ContactForm1_contact-form-age" name="age" placeholder="0" maxlength="2" type="number" min="1" max="30" value="" required/></div>
<div class='us_line'><b>Domicele</b><input id="ContactForm1_contact-form-domicele" name="age" placeholder="Region, City" type="text" value="" required/>
</div>
<div class='us_line'><b>Url Facebook</b><input id="ContactForm1_contact-form-urlfb" name="age" placeholder="http://facebook.com/yourusername" type="url" value="" required/></div>
<div class='us_line'><b>Contact</b><input id="ContactForm1_contact-form-contact" name="age" placeholder="Ex. Number Phone / ID Line / PIN BBM" type="text" value="" required/></div>
<div class='us_line'><b>Job</b>
<select>
<option value="Translator" name="jobs" selected>Translator</option>
<option value="Typesett" name="jobs">Typesett</option>
<option value="Kara Effect" name="jobs">Kara Effect</option>
<option value="Uploader/Mirroring" name="jobs">Uploader/Mirroring</option>
<option value="TLC & Editor" name="jobs">TLC & Editor</option>
<option value="Encoder" name="jobs">Encoder</option>
<option value="Admin In Fanspage" name="jobs">Admin In Fanspage</option>
</select>
</div>
<div class='us_line'><b>Levels of proficiency</b>
<select>
<option value="Zero" name="lvl" selected>Zero</option>
<option value="Beginner" name="lvl" selected>Beginner</option>
<option value="Experienced" name="lvl">Experienced</option>
<option value="Proficient" name="lvl">Proficient</option>
<option value="Expert" name="lvl">Expert"</option>
</select>
</div>
<div class='us_line'><b>The reason want to join?</b><textarea cols="25" id="ContactForm1_contact-form-reason" name="email-message" placeholder="Give your reasons why you want to join?" required></textarea></div>
<div class='us_line dn' style='display:none;'><textarea style='display:none;' cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><input style='display:none;' id="ContactForm1_contact-form-submit" type="button" value="Send" /></div>
<button type='button' onclick="generate()" disabled="disabled" id="sendform">Send</button>
<div id="ContactForm1_contact-form-error-message"></div>
<div id="ContactForm1_contact-form-success-message"></div>
</form>
</div>
<script type="text/javascript">/*<![CDATA[*/if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');/*]]>*/</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script>
//<![CDATA[
/*
* Form Recruitment Fansubs
* Source code by http://bit.ly/modifymsg_kompiajaib and http://bit.ly/contactform_kompiajaib
* Modify by http://usagilabs.blogspot.com/
* Copyright 2016
*/
var blogsid = "8410876137745120111"; // Your IDBLOG
var nameblog = "//animetangov2.blogspot.com/"; // Your URLBLOG, don't copy HTTP: or HTTPS:
var successmsg = "<b>Your form has been sent</b><p>We will strive to respond promptly your registration within 24 hours. if you not get reply within 24 hours please contact admin via fanspage.</p>";
var invalidmsg =  "<b>A valid email address is required</b><p>You must fill in your email address correctly.</p>";
var notsendmsg = "<b>Message could not be sent</b><p>Please try again later</p>";
var sett = {
name   : "Name",
email   : "Email",
gender   : "Gender",
age   : "Age",
domicele  : "Domicele",
urlfb   : "Url Facebook",
contact  : "Contact",
jobs   : "Jobs",
lvl   : "Level",
reason   : "Give your reasons why you want to join?",
br    : "\n"
};
//]]>
</script>
<script src="//cdn.rawgit.com/tutorialku/usagilabs/master/lib/formrecruitment.min.js" type="text/javascript"></script>
Important Setting! :
8410876137745120111 replace with your idblog code
blogid, usagilabs, cmonfrozen, how to make contact form
//animetangov2.blogspot.com/ replace with your url blog, from // to .com/

4. Once you've edited, click Publish

for result you can see this link (demo)
i have other style, you can choose which you want. :) replace above css with below css

Style Boxed
.contact-form-box{border:1px solid #E2E2E4;padding:0 20px;background:#FDFDFD;border-radius:3px}.contact-form-box>p{margin:0;line-height:1.5;color:#666;border:1px solid #F1E8C3;background:#FDF6D7;padding:15px;border-radius:3px}.contact-form-box>b{background:#77CB59;color:#FFF;text-transform:uppercase;font-size:17px;text-align:center;display:block;margin:0 -21px 15px;border-radius:3px 3px 0 0;line-height:45px;letter-spacing:.5px}h1.post-title{display:none}.us_line{display:block;margin-bottom:15px;font-size:13px;color:#B9B9B9;letter-spacing:.5px;text-transform:uppercase;font-weight:700;position:relative;font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif}.us_line>b{display:block;text-transform:uppercase;letter-spacing:1px}.us_line>input,.us_line>textarea,.us_line>select{border:1px solid #E2E2E4;background:#FFF;padding:0 10px;width:100%;display:block;color:#B0B1B1;border-radius:3px;height:35px;line-height:2}.us_line>input:focus,.us_line>textarea:focus,.us_line>select:focus{outline:1px solid #009EFD;color:#646464}#ContactForm1_contact-form-reason{height:100px;padding:5px 10px}.us_line:nth-of-type(3),.us_line:nth-of-type(4),.us_line:nth-of-type(8),.us_line:nth-of-type(9){display:inline-block;width:49.5%}#sendform{background:#77CB59;color:#FFF;border:0;padding:10px 25px;text-transform:uppercase;letter-spacing:1px;font-weight:700;border-radius:3px;font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif;cursor:pointer}#sendform:hover{background:#66AF4C}#sendform[disabled="disabled"]{background:#DDD!important}#contact_layout{font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif;text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.5);z-index:99999}.contact_top{margin:-55px auto 15px}.contact_top i{background:#70C340;color:#fff;font-size:35px;font-weight:400;text-align:center;margin:auto;border-radius:100%;line-height:60px;padding:0 14px;border:5px solid #FFF}.contact_message{width:40%;background:#FFF;color:#fff;border-radius:5px;padding:20px;text-align:center;color:#333;position:absolute;top:10%;left:50%;margin-left:-20%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}}.contact_message b{text-transform:capitalize;font-size:20px;letter-spacing:.2px;display:block;font-weight:400}.contact_message p{margin:15px 0;color:#666}.contact_message a{display:block;background:#70c340;border-radius:5px;line-height:40px;color:#fff!important;text-transform:uppercase;font-weight:700;font-size:15px}.contact-form-error-message-with-border img{display:none!important}.error_message a,.error_message i{background:#E66148!important}@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}}@media screen and (max-width:420px){.us_line:nth-of-type(3),.us_line:nth-of-type(4),.us_line:nth-of-type(8),.us_line:nth-of-type(9){width:100%}}
Style with Icon Fontawesome
for those of you who want to add a icon fontawesome, you just copy the css below then put above </style>.
.us_line:after{font-family:FontAwesome;position:absolute;bottom:6px;left:10px;z-index:100;color:#B0B1B1;font-size:13px;font-weight:400;opacity:.6}.us_line:nth-of-type(1):after{content:"\f007"}.us_line:nth-of-type(2):after{content:"\f0e0"}.us_line:nth-of-type(3):after{content:"\f222"}.us_line:nth-of-type(4):after{content:"\f133"}.us_line:nth-of-type(5):after{content:"\f21d"}.us_line:nth-of-type(6):after{content:"\f082"}.us_line:nth-of-type(7):after{content:"\f095"}.us_line:nth-of-type(8):after{content:"\f0f2"}.us_line:nth-of-type(9):after{content:"\f19d"}.us_line>input,.us_line>select{padding-left:30px!important}

Rekomendasi tutorial lain

Comment Now

12 comments

      • avatarSensei Dos Animes says:


        Hello, how are you?
        Nothing to do with the subject.
        But knows how to tell me / teach how for a Poster before the Video With Template Script
        OneStream Video Blogger