Update the translatability of the website, and add a blog post officially announcing translations.

This commit is contained in:
Raoul Snyman 2017-11-17 23:09:48 -07:00
parent 08f9de2b2c
commit 4587274c09
7 changed files with 120 additions and 106 deletions

View File

@ -0,0 +1,44 @@
.. title: Making the Web Site Translation Friendly
.. slug: 2017/11/19/making-the-web-site-translation-friendly
.. date: 2017-11-19 12:00:00 UTC
.. type: text
.. previewimage: https://openlp.org/cover-images/making-the-web-site-translation-friendly.jpg
Over the years, we have tried to have a multi-lingual website. Unfortunately each time has ended up with the same
scenario:
1. User gets excited
2. User joins the translation team
3. User translates 50% to 80% of the website
4. User forgets about translation
5. Translation is no longer maintained, and we get requests to fix a language we don't speak
If you've ever wondered why our manual is only in English, this is why.
Earlier this year, however, after some more requests by users to be able to translate the website, we looked at a new
feature from online translation site `Transifex.com`_ called *Live Translation*. Essentially this allows you to
translate your website without the need for much maintenance. So we decided to silently roll out a beta phase of a
translatable website.
We're quite pleased with the result so far. We've had a number of people translate the website, and most of those
translations have stuck to 100% completion. We also don't publish a translation until it is 100% complete. This helps
us to keep a website that looks great no matter which language it is being displayed in.
Along the way, however, there have been a couple of hitches. One of them is that there was a lot of HTML in the strings
that needed to be translated. We have gone through the website and tried to address this as much as possible. There
are still some HTML tags here and there, but more complicated stuff like links and icons have been removed, which
should make translating the site much easier.
Unfortunately this does have the side effect that a lot of the strings that were already translated will now have to be
translated again, but we trust you will bear with us while those folks who have volunteered to translate the site bring
it back up to 100% translated.
Would you like to be involved in this project? Just sign up on `Transifex.com`_, and join the `website project`_.
*As a side note, the blog has been puposefully kept untranslated.*
[ Image Credit: `Whisky Zulu by Dennis van Zuijlekom`_ ]
.. _Transifex.com: https://www.transifex.com/
.. _website project: https://www.transifex.com/openlp/openlp-website/
.. _Whisky Zulu by Dennis van Zuijlekom: https://www.flickr.com/photos/dvanzuijlekom/11438391234/

Binary file not shown.

After

Width:  |  Height:  |  Size: 655 KiB

View File

@ -62,7 +62,7 @@ function showToastr() {
if (cookies.search("hasVisitedOpenLPBefore=true") != -1) {
return;
}
else {
else if (location.hostname != "localhost") {
document.cookie = "hasVisitedOpenLPBefore=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
}
toastr.options = {
@ -82,7 +82,7 @@ function showToastr() {
showMethod: "fadeIn",
hideMethod: "fadeOut"
};
toastr.info("This site uses cookies.");
toastr.info(Transifex.live.translateText("This site may use cookies for anonymous traffic analysis."));
}
$(document).ready(function () {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -8,7 +8,7 @@ ${base.html_headstart()}
</%block>
${template_hooks['extra_head']()}
</head>
<body class="no-trans">
<body class="no-trans txlive">
% if permalink is not UNDEFINED and permalink == u'/index.html':
<%include file="front_page.html"/>
% else:
@ -42,17 +42,18 @@ ${template_hooks['extra_head']()}
</div>
<div class="collapse navbar-collapse scrollspy smooth-scroll" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="/#about">About</a></li>
<li><a href="/#features">Features</a></li>
<li><a href="/#downloads">Downloads</a></li>
<li><a href="/#testimonials">Testimonials</a></li>
<li><a href="/#support">Support</a></li>
<li><a href="https://forums.openlp.org/">Forums</a></li>
% if permalink.startswith(u'/blog'):
<li class="active"><a href="/blog/">Blog</a></li>
% else:
<li><a href="/blog/">Blog</a></li>
% endif
<li><a href="/#about">About</a></li>
<li><a href="/#features">Features</a></li>
<li><a href="/#downloads">Downloads</a></li>
<li><a href="/#testimonials">Testimonials</a></li>
<li><a href="/#help">Help</a></li>
<li><a href="https://manual.openlp.org/">Manual</a></li>
<li><a href="https://forums.openlp.org/">Forums</a></li>
</ul>
</div>
</div>

View File

@ -28,13 +28,14 @@
</div>
<div class="collapse navbar-collapse scrollspy smooth-scroll" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="/blog/">Blog</a></li>
<li><a href="#about">About</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#downloads">Downloads</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#support">Support</a></li>
<li><a href="#help">Help</a></li>
<li><a href="https://manual.openlp.org/">Manual</a></li>
<li><a href="https://forums.openlp.org/">Forums</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</div>
</div>
@ -67,7 +68,7 @@
<div class="space"></div>
<div class="row">
<div class="col-md-6">
<img src="/assets/images/section-image-1.png" alt="OpenLP on a laptop" style="margin-top: 3em;">
<img src="/assets/images/section-image-1.png" alt="OpenLP on a Laptop" style="margin-top: 3em;">
<div class="space"></div>
</div>
<div class="col-md-6">
@ -80,18 +81,18 @@
elements of your church's worship service.
</p>
<ul class="list-unstyled">
<li><i class="fa fa-caret-right pr-10 text-colored"></i> Cross platform between Linux, Windows, OS X and FreeBSD</li>
<li><i class="fa fa-caret-right pr-10 text-colored"></i> Display songs, Bible verses, presentations, images and more</li>
<li><i class="fa fa-caret-right pr-10 text-colored"></i> Control OpenLP remotely via the Android remote, iOS remote or mobile web browser</li>
<li><i class="fa fa-caret-right pr-10 text-colored"></i> Quickly and easily import songs from other popular presentation packages</li>
<li><i class="fa fa-caret-right pr-10 text-colored"></i> Easy enough to use to get up and running in less than 10 minutes</li>
<li><i class="fa fa-caret-right pr-10 text-colored notranslate"></i> Cross platform between Linux, Windows, OS X and FreeBSD</li>
<li><i class="fa fa-caret-right pr-10 text-colored notranslate"></i> Display songs, Bible verses, presentations, images and more</li>
<li><i class="fa fa-caret-right pr-10 text-colored notranslate"></i> Control OpenLP remotely via the Android remote, iOS remote or mobile web browser</li>
<li><i class="fa fa-caret-right pr-10 text-colored notranslate"></i> Quickly and easily import songs from other popular presentation packages</li>
<li><i class="fa fa-caret-right pr-10 text-colored notranslate"></i> Easy enough to use to get up and running in less than 10 minutes</li>
</ul>
</div>
</div>
<div class="space"></div>
<div class="row">
<div class="col-md-6">
<h2><i class="fa fa-fw fa-code-fork"></i> Open Source</h2>
<h2><i class="fa fa-fw fa-code-fork notranslate"></i> Open Source</h2>
<p class="indent">
OpenLP is an open-source presentation platform created for use in churches large and
small. Say good-bye to the hassle of subscription costs and device platforms; this
@ -107,7 +108,7 @@
</p>
</div>
<div class="col-md-6">
<h2><i class="fa fa-fw fa-wifi"></i> Remote Control</h2>
<h2><i class="fa fa-fw fa-wifi notranslate"></i> Remote Control</h2>
<p class="indent">
Control your presentations from anywhere using OpenLP's first-of-its-kind remote
system. With a built-in web app, you can access your service from any network-enabled
@ -126,27 +127,27 @@
</div>
<div class="space"></div>
<div class="row">
<h2 class="text-center"><i class="fa fw fa-desktop"></i> Screenshots</h2>
<h2 class="text-center"><i class="fa fw fa-desktop notranslate"></i> Screenshots</h2>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-md-offset-2 col-lg-offset-2">
<div class="space"></div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<a href="/screenshots/mainwindow.png" data-toggle="lightbox" data-gallery="screenshots" data-title="Control OpenLP from the Main Window">
<a href="/screenshots/mainwindow.png" data-toggle="lightbox" data-gallery="screenshots" data-title="Control OpenLP from the Main Window" tx-attrs="data-title">
<img src="/screenshots/mainwindow.png" class="img-responsive img-thumbnail">
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<a href="/screenshots/songimporterchoices.png" data-toggle="lightbox" data-gallery="screenshots" data-title="Import Songs from Many Formats">
<a href="/screenshots/songimporterchoices.png" data-toggle="lightbox" data-gallery="screenshots" data-title="Import Songs from Many Formats" tx-attrs="data-title">
<img src="/screenshots/songimporterchoices.png" class="img-responsive img-thumbnail">
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<a href="/screenshots/song_edit_verse_in_use.png" data-toggle="lightbox" data-gallery="screenshots" data-title="Editing a Song">
<a href="/screenshots/song_edit_verse_in_use.png" data-toggle="lightbox" data-gallery="screenshots" data-title="Editing a Song" tx-attrs="data-title">
<img src="/screenshots/song_edit_verse_in_use.png" class="img-responsive img-thumbnail">
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<a href="/screenshots/stage_view_song_w_note.png" data-toggle="lightbox" data-gallery="screenshots" data-title="Browser-based Stage View">
<a href="/screenshots/stage_view_song_w_note.png" data-toggle="lightbox" data-gallery="screenshots" data-title="Browser-based Stage View" tx-attrs="data-title">
<img src="/screenshots/stage_view_song_w_note.png" class="img-responsive img-thumbnail">
</a>
</div>
@ -157,7 +158,7 @@
</div>
<div class="section translucent-bg bg-image-1 blue">
<div class="container object-non-visible" data-animation-effect="fadeIn" id="feature-details">
<h1 id="features" class="text-center title">Features</h1>
<h1 id="features" class="text-center title">Features</h1>
<div class="space"></div>
<div class="row">
<div class="col-sm-6">
@ -296,58 +297,58 @@
</div>
<div class="windows hidden">
<h4>OpenLP for Windows 7 and higher</h4>
<p>OpenLP 2.4.6</p>
<p class="notranslate">OpenLP 2.4.6</p>
<p>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Windows Installer <span class="caret"></span>
Windows Installer <span class="caret notranslate"></span>
</button>
<ul class="dropdown-menu">
<li><a href="https://get.openlp.org/2.4.6/OpenLP-2.4.6-setup.exe"><i class="fa fa-fw fa-download"></i> Direct Download</a></li>
<li><a href="https://get.openlp.org/2.4.6/OpenLP-2.4.6-setup.exe.torrent"><i class="fa fa-fw fa-cloud-download"></i> BitTorrent Download</a></li>
<li><a href="https://get.openlp.org/2.4.6/OpenLP-2.4.6-setup.exe"><i class="fa fa-fw fa-download notranslate"></i> Direct Download</a></li>
<li><a href="https://get.openlp.org/2.4.6/OpenLP-2.4.6-setup.exe.torrent"><i class="fa fa-fw fa-cloud-download notranslate"></i> BitTorrent Download</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portable Version <span class="caret"></span>
Portable Version <span class="caret notranslate"></span>
</button>
<ul class="dropdown-menu">
<li><a href="https://get.openlp.org/2.4.6/OpenLPPortable_2.4.6.paf.exe"><i class="fa fa-fw fa-download"></i> Direct Download</a></li>
<li><a href="https://get.openlp.org/2.4.6/OpenLPPortable_2.4.6.paf.exe.torrent"><i class="fa fa-fw fa-cloud-download"></i> BitTorrent Download</a></li>
<li><a href="https://get.openlp.org/2.4.6/OpenLPPortable_2.4.6.paf.exe"><i class="fa fa-fw fa-download notranslate"></i> Direct Download</a></li>
<li><a href="https://get.openlp.org/2.4.6/OpenLPPortable_2.4.6.paf.exe.torrent"><i class="fa fa-fw fa-cloud-download notranslate"></i> BitTorrent Download</a></li>
</ul>
</div>
</p>
</div>
<div class="macosx hidden">
<h4>OpenLP for Mac OS X 10.9 and higher</h4>
<p>OpenLP 2.4.6</p>
<p class="notranslate">OpenLP 2.4.6</p>
<p>
<a href="https://get.openlp.org/2.4.6/OpenLP-2.4.6.dmg" class="btn btn-success"><i class="fa fa-fw fa-download"></i> Direct Download</a>
<a href="https://get.openlp.org/2.4.6/OpenLP-2.4.6.dmg.torrent" class="btn btn-primary"><i class="fa fa-fw fa-cloud-download"></i> BitTorrent Download</a>
<a href="https://get.openlp.org/2.4.6/OpenLP-2.4.6.dmg" class="btn btn-success"><i class="fa fa-fw fa-download notranslate"></i> Direct Download</a>
<a href="https://get.openlp.org/2.4.6/OpenLP-2.4.6.dmg.torrent" class="btn btn-primary"><i class="fa fa-fw fa-cloud-download notranslate"></i> BitTorrent Download</a>
</p>
</div>
<div class="linux hidden">
<h4>Linux/FreeBSD Downloads</h4>
<p>Select a distribution</p>
<p class="notranslate">
<button type="button" class="btn btn-ubuntu" data-toggle="modal" data-target="#ubuntu-install"><img src="/images/ubuntu-logo.png" class="icon"> Ubuntu</button>
<button type="button" class="btn btn-fedora" data-toggle="modal" data-target="#fedora-install"><img src="/images/fedora-logo.png" class="icon"> Fedora</button>
<button type="button" class="btn btn-debian" data-toggle="modal" data-target="#debian-install"><img src="/images/debian-logo.png" class="icon"> Debian</button>
<button type="button" class="btn btn-arch" data-toggle="modal" data-target="#arch-install"><img src="/images/archlinux-logo.png" class="icon"> Arch</button>
<button type="button" class="btn btn-ubuntu" data-toggle="modal" data-target="#ubuntu-install"><img src="/images/ubuntu-logo.png" class="icon notranslate"> Ubuntu</button>
<button type="button" class="btn btn-fedora" data-toggle="modal" data-target="#fedora-install"><img src="/images/fedora-logo.png" class="icon notranslate"> Fedora</button>
<button type="button" class="btn btn-debian" data-toggle="modal" data-target="#debian-install"><img src="/images/debian-logo.png" class="icon notranslate"> Debian</button>
<button type="button" class="btn btn-arch" data-toggle="modal" data-target="#arch-install"><img src="/images/archlinux-logo.png" class="icon notranslate"> Arch</button>
<!-- a href="http://www.freshports.org/multimedia/py-openlp" class="btn btn-freebsd"><i class="fa fa-fw fa-external-link"></i> FreeBSD</a -->
</p>
<div class="modal fade" id="ubuntu-install" tabindex="-1" role="dialog" aria-labelledby="ubuntu-install-title" style="text-align: left;" data-backdrop="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close notranslate" data-dismiss="modal" aria-label="Close" tx-attrs="aria-label">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="ubuntu-install-title">Ubuntu Installation Instructions</h4>
</div>
<div class="modal-body">
<div class="alert alert-info small" role="alert">
<p><i class="fa fa-fw fa-info-circle"></i> OpenLP only supports Canonical-supported versions of Ubuntu from 16.04 and up.</p>
<p><i class="fa fa-fw fa-info-circle notranslate"></i> OpenLP only supports Canonical-supported versions of Ubuntu from 16.04 and up.</p>
</div>
<p>To install OpenLP, either search for OpenLP in Software Center, or run the following command:</p>
<pre>$ sudo apt install openlp</pre>
@ -364,7 +365,7 @@
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close notranslate" data-dismiss="modal" aria-label="Close" tx-attrs="aria-label">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="fedora-install-title">Fedora Installation Instructions</h4>
@ -386,7 +387,7 @@
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close notranslate" data-dismiss="modal" aria-label="Close" tx-attrs="aria-label">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="debian-install-title">Debian Installation Instructions</h4>
@ -408,7 +409,7 @@
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close notranslate" data-dismiss="modal" aria-label="Close" tx-attrs="aria-label">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="arch-install-title">Arch Linux Installation Instructions</h4>
@ -447,7 +448,10 @@
</div>
</div>
<div class="space"></div>
<p class="lead text-center">Looking for nightlies and development versions? They are now found on our <a href="https://openlp.io/">developer site</a>.</p>
<div class="alert alert-info text-center col-md-8 col-md-offset-2">
<p>Older versions can be downloaded from our <a href="https://get.openlp.org/">downloads archive</a>, but <strong>we do not support these versions</strong>.</p>
</div>
<!-- p class="lead text-center">Looking for nightlies and development versions? They are now found on our <a href="https://openlp.io/">developer site</a>.</p -->
</div>
</div>
<div class="section translucent-bg bg-image-2 pb-clear">
@ -552,39 +556,44 @@
<footer id="footer">
<div class="footer section">
<div class="container">
<h1 class="title text-center" id="support">Support</h1>
<h1 class="title text-center" id="help">Help</h1>
<div class="space"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="footer-content">
<p class="large">OpenLP is not developed by a company, but by a group of volunteers who
dedicate part of their spare time to developing this application. These same
developers try to also find time to answer support requests. Every moment a
developer spends on answering a question is a moment not spent working on OpenLP.
Please use their time sparingly.</p>
<p class="large">The best place to learn how to use OpenLP is the
<a href="https://manual.openlp.org/" title="OpenLP Manual"><i class="fa fa-fw fa-book"></i> OpenLP Manual</a>,
which has both <a href="https://manual.openlp.org/faq.html">Frequently Asked Questions</a>
and a <a href="https://manual.openlp.org/troubleshooting.html">Troubleshooting Guide</a></p>
<a href="https://manual.openlp.org/" title="OpenLP Manual"><i class="fa fa-fw fa-book notranslate"></i> Manual</a>,
which has both <a href="https://manual.openlp.org/faq.html"><i class="fa fa-fw fa-question-circle notranslate"></i> Frequently Asked Questions</a>
and a <a href="https://manual.openlp.org/troubleshooting.html"><i class="fa fa-fw fa-exclamation-triangle notranslate"></i> Troubleshooting Guide</a>.</p>
<p class="large">If you are unable to find the answer in the manual, browse the
<a href="https://forums.openlp.org/" title="OpenLP Forums"><i class="fa fa-fw fa-comments"></i> OpenLP Forums</a>
<a href="https://forums.openlp.org/" title="OpenLP Forums"><i class="fa fa-fw fa-comments notranslate"></i> Forums</a>
where a number of folks in our community can help to answer your questions.</p>
<div class="alert alert-info" style="font-size: 110%">
<div class="pull-left"><i class="fa fa-fw fa-info-circle"></i></div>
<div style="margin-left: 1.8em;">
OpenLP is not developed by a company, but by a group of volunteers who dedicate
part of their spare time to developing this application. These same developers
try to also find time to help users with their problems. Every moment a
developer spends on answering a question is a moment not spent working on
OpenLP. Please use their time sparingly.
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<ul class="list-icons">
<li><i class="fa fa-fw fa-book pr-10"></i> Manual: <a href="https://manual.openlp.org/">manual.openlp.org</a></li>
<li><i class="fa fa-fw fa-money pr-10"></i> Donate: <a href="/donate">find out more</a></li>
<li><i class="fa fa-fw fa-envelope-o pr-10"></i> E-mail: support(at)openlp.org</li>
<li><i class="fa fa-fw fa-comments-o pr-10"></i> IRC Channel: <a href="https://webchat.freenode.net/?randomnick=1&amp;channels=openlp&amp;prompt=1&amp;uio=d4">#openlp on Freenode.net</a></li>
<li><i class="fa fa-fw fa-book pr-10 notranslate"></i> Manual: <a href="https://manual.openlp.org/">manual.openlp.org</a></li>
<li><i class="fa fa-fw fa-money pr-10 notranslate"></i> Donate: <a href="/donate">find out more</a></li>
<li><i class="fa fa-fw fa-envelope-o pr-10 notranslate"></i> E-mail: support(at)openlp.org</li>
<li><i class="fa fa-fw fa-comments-o pr-10 notranslate"></i> IRC Channel: <a href="https://webchat.freenode.net/?randomnick=1&amp;channels=openlp&amp;prompt=1&amp;uio=d4">#openlp on Freenode.net</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<ul class="list-icons">
<li><i class="fa fa-fw fa-comments pr-10"></i> Forums: <a href="https://forums.openlp.org">forums.openlp.org</a></li>
<li><i class="fa fa-fw fa-pencil-square-o pr-10"></i> Wiki: <a href="https://wiki.openlp.org/">wiki.openlp.org</a></li>
<li><i class="fa fa-fw fa-handshake-o pr-10"></i> Contribute: <a href="/contribute">find out more</a></li>
<li><i class="fa fa-fw fa-wrench pr-10"></i> Developer Central: <a href="https://openlp.io/">openlp.io</a></li>
<li><i class="fa fa-fw fa-comments pr-10 notranslate"></i> Forums: <a href="https://forums.openlp.org">forums.openlp.org</a></li>
<li><i class="fa fa-fw fa-pencil-square-o pr-10 notranslate"></i> Wiki: <a href="https://wiki.openlp.org/">wiki.openlp.org</a></li>
<li><i class="fa fa-fw fa-handshake-o pr-10 notranslate"></i> Contribute: <a href="/contribute">find out more</a></li>
<li><i class="fa fa-fw fa-wrench pr-10 notranslate"></i> Developer Central: <a href="https://openlp.io/">openlp.io</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
@ -598,49 +607,6 @@
<li class="telegram"><a target="_blank" href="https://telegram.me/openlp" title="Follow us on Telegram" tx-attrs="title"><i class="fa fa-paper-plane"></i></a></li>
</ul>
</div>
<!-- /div>
<div class="col-sm-6">
<div class="footer-content">
<div id="success-alert" class="hidden alert alert-success" role="alert">
<i class="fa fa-fw fa-check"></i> Your message has been sent! We'll get back to you as soon as we can.
</div>
<div id="error-alert" class="hidden alert alert-danger" role="alert">
<i class="fa fa-fw fa-exclamation-triangle"></i> Oh dear! Something went wrong while sending your message.
</div>
<form role="form" id="footer-form" method="post" action="/contact-us.php">
<div class="form-group has-feedback">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name" name="name" required>
<i class="fa fa-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="E-mail address" name="email" required>
<i class="fa fa-envelope form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="sr-only" for="subject">Subject</label>
<input type="text" class="form-control" id="subject" placeholder="Subject" name="subject" required>
<i class="fa fa-comment form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="sr-only" for="message">Message</label>
<textarea class="form-control" rows="8" id="message" placeholder="Message" name="message" required></textarea>
<i class="fa fa-pencil form-control-feedback"></i>
<span class="help-text">Please include the version of OpenLP you're using, and which operating system you have installed.</span>
</div>
<div class="checkbox has-feedback">
<label>
<input type="checkbox" name="me-too" value="1">&nbsp;&nbsp;Send me a copy
</label>
</div>
<div class="form-group has-feedback">
<div class="g-recaptcha" data-sitekey="6Lc7Hg4TAAAAALVlRY_kP29PpAFkF90UW1dVDgJR"></div>
</div>
<input type="submit" value="Send" class="btn btn-default">
</form>
</div>
</div -->
</div>
</div>
</div>