Модальная форма обратной связи

[s.brume 1]

Всем привет. Прошу помощи в настройке модальной формы. Из трёх заработала только одна - но самая некрасивая, теперь пытаюсь её заменить, но другие две работать отказываются.

1. В общем, в меню имеется кнопка-картинка такого вида: <li><a href="#form1"><img src="call-me/callme.png" alt="Заказать звонок"></a></li> = она будет вызывать форму. Я сначала грешил именно на то, что менюшка в шапке, а код формы оказывается в теле, но нет - всё это уже тело. Хотя здесь тоже не ясно, шапка и менюшка визуально похожи..... Но об этом позже, если понадобится.

2. Дальше я пишу в тело (можно сказать в рандомное место) вот это:

<!-- Модальная форма -->
        <a href="#x" class="overlay" id="form1"></a>
        <form class="modal">
            <input name="name" placeholder="Укажите ваше имя:" class="name" required />
            <input name="emailaddress" placeholder="Укажите ваш Email:" class="email" type="email" required />
            <textarea rows="4" cols="50" name="subject" placeholder="Введите ваше сообщение:" class="message" required></textarea>
            <input name="submit" class="btn" type="submit" value="Отправить" />
        </form>
        <!-- конец блока  формы-->

3. Потом я прописывал в стили новый кусок (style-form.css, см. вложение), а также пробовал цеплять его к html через link rel = но ничего так и не заработало.

Получается что: при нажатии кнопки ничего не выводится, лишь страница уезжает куда-то немного вниз.

Прошу помощи. С чего начать, куда копать?

p.s. Я совсем новичок, если что.

style-form.css

[Schamil74 13]

Покажите проблему codeopen.io