How To Create a Recruitment Form on Blogger Page

Posted on February 7th, 2018, 598 viewed

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 here. I have already provided a description 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 recruitment page 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.

See Also :KomikHP v1.2 Blogger Templates
How to make Anime List Pages Responsive in WordPress
MegumiNovel v1.3 Blogger Template

Important! :
please note this tutorial requires widget contact form is active in widget. for those of you who use fanstrap or theme made I may not have to worry because I have installed it.
contact form

How to Make Pages Recruitment Fansub

1. Sign in to Blogger
2. Your Blog > Pages > New Pages
3. Enter the code below

<link href='https://rawgit.com/Yuukithemes/yuukithemes.github.io/master/css/recruitment.min.css' rel='stylesheet' type='text/css'></link>
<div class="contact-form-box">
<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='yk-line'>
<b>Name</b>
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" type="text" value="" required/>
</div>
<div class='yk-line'>
<b>Email</b>
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" type="text" value="" required/>
</div>
<div class='yk-line'>
<b>Gender</b>
<select><option value="Male" name="gender" selected>Male</option><option value="Female" name="gender">Female</option></select>
</div>
<div class='yk-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='yk-line yk-break'>
<b>Domicele</b>
<input id="ContactForm1_contact-form-domicele" name="age" placeholder="Region, City" type="text" value="" required/>
</div>
<div class='yk-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='yk-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='yk-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='yk-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='yk-line yk-break'>
<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='yk-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://www.yuukithemes.com/
* Copyright 2016 - 2018
*/
var blogsid = "275880201892397915"; // Your IDBLOG
var nameblog = "//yuukithemes-fanstrap.blogspot.com/"; // Your URLBLOG, don't copy HTTP: or HTTPS:
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="https://rawgit.com/Yuukithemes/yuukithemes.github.io/master/js/recruitment.min.js" type="text/javascript"></script>

Important Setting! :
275880201892397915 replace with your idblog code, here for example
//yuukithemes-fanstrap.blogspot.com/ replace with your url blog, from // to .com/

4. Once you’ve edited, click Publish

Result / Demo

you can see the results on the link below
Live Demo

Add Icon Fontawesome

for those of you who want to add a icon fontawesome, you can replace url

<link href='https://rawgit.com/Yuukithemes/yuukithemes.github.io/master/css/recruitment.min.css' rel='stylesheet' type='text/css'></link>
with url below
<link href='https://rawgit.com/Yuukithemes/yuukithemes.github.io/master/css/recruitmenticon.min.css' rel='stylesheet' type='text/css'></link>

Related Post

Please wait....
Disqus comment box is being loaded