Final form file and its usage in the main entry

app.js

import template from './app.html';
import './app.css';

import {YOPFForm} from "../form/form";

export class App {
    constructor(element) {
        this._element = element;
        element.innerHTML = template;
        this.form = this.setupForm(this._element.querySelector('.phrase-form-wrapper'));
    }

    setupForm(element) {
        const form = new YOPFForm(element);
        form.listen(this.onPhraseChange);
        return form;
    }

    onPhraseChange(phrase) {
        alert(phrase);
    }
}

form.index.js

// get the template
import template from './form.html';
// get the styles
import './form.css';

export class YOPFForm{
    constructor(element) {
        this._element = element;
        this.setTemplate();
    }

    setTemplate() {
        this._element.innerHTML = template;
        this._form = this._element.getElementsByTagName('form')[0];
        this._form.addEventListener("submit", (event)=> {
            event.preventDefault();
            this.onSubmit(event.target);
        }, false);
    }

    onSubmit(form) {
        this._callback(form.phrase.value);
    }

    listen(callback) {
        this._callback = callback;
    }
}