{% extends "base.html" %}
{% block title %}Fontify - Make Your Own Font!{% endblock %}

{% block body %}
<h1 class="index">Fontify</h1>
<p class="subtitle">Make your own font!</p>
<a href="/template" target="_blank"><button type="button">print the template</button></a>
<p>Fill the template, scan it, and upload</p>

<div class="font-name">
    <input placeholder="FontifySans"></input>
    <p>Enter a name for your awesome font</p>
</div>

<div class="upload">
    <p>Upload the scanned template</p>
    <form action="/upload-file" class="dropzone" id="uploadDropzone"></form>
</div>
{% endblock %}

{% extends "base.html" %}
{% block title %}Fontify - Make Your Own Font!{% endblock %}

{% block body %}
<h1 class="index">Fontify</h1>
<p class="subtitle">Make your own font!</p>
<a href="/template" target="_blank"><button type="button">print the template</button></a>
<p>Fill the template, scan it, and upload</p>

<div class="font-name">
    <input id="font-name-input" placeholder="FontifySans"></input>
    <script type="text/javascript">
    $(function() {
        $("#font-name-input").on("change keyup paste click", function(e) {
            $("#font-name").val(e.target.value);
        });
    });
    </script>
    <p>Enter a name for your awesome font</p>
</div>

<div class="upload">
    <p>Upload the scanned template</p>
    <form action="/upload-file" class="dropzone" id="uploadDropzone">
        <input type="hidden" id="font-name" name="font-name"></input>
    </form>
</div>
{% endblock %}

Add input in form for font name
Add input in form for font name
