job-form.html

---
layout: default
title: Submit a Job
permalink: /job-form/
---

<div class="container">
  <div class="row">
	<div class="col-md-10 col-md-offset-1">
	<h1>Submit a Job</h1>
	<p class="lead">If you work on a <a href="#floss" title="Free as in Speech (and maybe Beer)">Free/Libre and Open Source<sup>*</sup></a> project and you need
some design help, let the Open Source Design community know that you are looking
for design contributions or to hire a designer. Your posting will be displayed on our <a
href="/jobs/">jobs page</a>.</p>
	<p class="lead"><a href="https://opensourcedesign.net/code-of-conduct/">We have a code of conduct</a>. Please read it before submitting your job.</p>
	<form method="POST" action="https://osd-staticman.herokuapp.com/v2/entry/opensourcedesign/jobs/master/jobs">
	  <input name="options[redirect]" type="hidden" value="https://opensourcedesign.net/jobs/thank-you/">
	  <input name="fields[status]" type="hidden" value="searching">
	  <input name="fields[date_posted]" type="hidden">
	  <input name="fields[layout]" type="hidden" value="jobs">
	  <input name="options[slug]" type="hidden" id="slug" value="">
	  <!--div class="form-group">
		<label for="role">Role</label>
		<p class="help-block">The type of designer you are looking for. You could use one of these: graphic designer, icon designer, interaction designer, information architect, user researcher, content strategist, accessibility expert.</p>
		<input type="text" class="form-control" id="role" placeholder="E.g. Graphic designer" required>
	  </div-->
	  <fieldset>
		<legend>About your project</legend>
		<div class="form-group">
		  <label for="organization">Project name</label>
		  <input type="text"
			class="form-control"
			id="organization"
			placeholder="Acme Projects"
			name="fields[organization]"
			required>
		</div>
		<div class="form-group">
		  <label for="org_url">Project website</label>
		  <input type="url"
			class="form-control"
			id="org_url"
			placeholder="https://acmeprojects.org"
			name="fields[org_url]"
			required>
		</div>
	  </fieldset>
	  <fieldset>
		<legend>About the job</legend>
		<div class="form-group">
		  <label for="title">Post title</label>
		  <p class="help-block">This will be the main heading in your job's page. Make it specific, but not too long.</p>
		  <input type="text"
			class="form-control"
			id="title"
			placeholder="Design review of our app"
			name="fields[title]"
			required>
		</div>
		<div class="form-group">
		  <label for="role">Job category</label>
		  <input type="text"
			class="form-control"
			id="role"
			placeholder="'Logo design & branding', 'Web design', 'Interaction design', 'Usability review & research', …"
			name="fields[role]"
			required>
		</div>
		<div class="form-group">
		  <label>Compensation</label>
		  <div class="radio">
			<label>
			  <input type="radio"
				name="fields[compensation]"
				id="gratis"
				value="gratis"
				checked>
			  Gratis – we are all volunteers
			</label>
		  </div>
		  <div class="radio">
			<label>
			  <input type="radio"
				name="fields[compensation]"
				id="paid"
				value="paid">
			  Paid – yes, we can pay!
			</label>
		  </div>
		</div>
		<div class="form-group">
		  <label for="paid_details">
			How much can you pay?
			<small>(optional)</small>
		  </label>
		  <p class="help-block">Give some information about the payment offered. Try to be specific. A fixed amount or a range are good. Avoid things like "competitive": they are not very informative.</p>
		  <input type="text"
			class="form-control"
			id="fields[paid_details]"
			placeholder="USD 5000 fixed rate"
			name="paid_details">
		</div>
		<div class="form-group">
		  <label for="description">Job description</label>
		  <p class="help-block">Start with a one-line introduction to your project, and then explain the design work needed.</p>
		  <textarea class="form-control"
			id="description"
			rows="5"
			name="fields[description]"
			placeholder="Acme Projects is a we need some design review of our mobile app …"
			required></textarea>
		  <small>Markdown is okay</small>
		</div>
		<div class="form-group">
		  <label for="deliverables">
			Deliverables
			<small>(optional)</small>
		  </label>
		  <p class="help-block">If appropriate, list the things you expect the designer to deliver.</p>
		  <textarea class="form-control"
			id="deliverables"
			rows="3"
			name="fields[deliverables]"
			placeholder="A logo & a set of icons, or a usability review document"></textarea>
		  <small>Markdown is okay</small>
		</div>
		<div class="form-group">
		  <label for="how_to_apply">Contact person</label>
		  <p class="help-block">Who to contact to get involved with design. Please include some sort of personal handle who the designer can communicate with to get started out.</p>
		  <input class="form-control"
			id="how_to_apply"
			rows="3"
			required
			placeholder="Jane (lead dev) <jane@acmeprojects.org>"
			name="fields[how_to_apply]">
		  <small>Markdown is okay</small>
		</div>
		<div class="form-group">
		      <p class="help-block"></p>
		      <input class="form-control"
		      id="github_handle"
		      rows="3"
		      placeholder="GitHub @username (optional)"
		      name="fields[github_handle]"/>
		</div>
		<div class="form-group">
		  <label for="links">
			Relevant links
			<small>(optional)</small>
		  </label>
		  <p class="help-block">Things like contribution page, existing design work, project wiki or blog, etc.</p>
		  <textarea class="form-control"
			id="links"
			rows="3"
			name="fields[how_to_apply]"></textarea>
		</div>
		<div class="form-group">
		  <label for="tags">
			Tags
			<small>(optional)</small>
		  </label>
		  <p class="help-block">Keywords relevant to the job. Separate tags with commas.</p>
		  <textarea class="form-control"
			id="tags"
			rows="2"
			placeholder="logo, branding, graphic design"
			name="fields[tags]"></textarea>
		</div>
	  </fieldset>
	  <button type="submit" href="thankyou.html" class="btn btn-primary btn-lg">Submit your job to Open Source Design</button>
	</form>
		<div id="floss">
			<p class='help-block'>
				<sup>*</sup> <em>“Free software”</em> means software that respects users' freedom and community.
				Roughly, it means that the users have the freedom to run, copy, distribute, study,
				change and improve the software. Thus, “free software” is a matter of liberty, not price.
				To understand the concept, you should think of “free” as in “free speech,”
				not as in “free beer”. We sometimes call it “libre software,”
				borrowing the French or Spanish word for “free” as in freedom,
				to show we do not mean the software is gratis.
				(<a href="https://www.gnu.org/philosophy/free-sw.en.html" title="What is Free Software at GNU.org">more</a>)
			</p>
		</div>
	</div>
  </div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script>
	function compensation() {
	  if ( $("#gratis").is(":checked") ) {
		$("#paid_details").parent().slideUp();
	  }
	  else {
		$("#paid_details").parent().slideDown();
	  }
	}

	function slug (str) {
	  str = str.replace(/^\s+|\s+$/g, ''); // trim
	  str = str.toLowerCase();

	  // remove accents, swap ñ for n, etc
	  var from = "ãàáäâẽèéëêìíïîõòóöôùúüûñç·/_,:;";
	  var to   = "aaaaaeeeeeiiiiooooouuuunc------";
	  for (var i=0, l=from.length ; i<l ; i++) {
		str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
	  }

	  str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
		.replace(/\s+/g, '-') // collapse whitespace and replace by -
		.replace(/-+/g, '-'); // collapse dashes

	  return str;
	}

    $(document).ready(function() {

	  $('input#title').keyup(function (e) {
		$('input#slug').val(slug(e.target.value));
	  });

	  compensation();

	  $("input:radio").click(function(){
		compensation();
	  });

	  var date = new Date();
	  var day = ("0" + date.getDate()).slice(-2);
	  var month = ("0"+(date.getMonth()+1)).slice(-2);
	  var year = date.getFullYear();

	  var datestring = year + "-" + month + "-" + day;

	  $('[name="fields[date_posted]"]').val(datestring);

  });
</script>