Как настроить корректное Автозаполнение форм?

Question

[Demetrius-one]

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

<div class="form">
        <div class="form__field"><input  type="text" placeholder="Name"></div>
        <div class="form__field"><input  type="tel" placeholder="Phone"></div>
        <div class="form__field"><input  type="mail" placeholder="Email"></div>
        <a href="#" class="button">Consultation</a>
    </div>


<div class="form" >
    <div class="form__field"><input  type="text" placeholder="Name"></div>
    <div class="form__field"><input  type="tel" placeholder="Phone"></div>
    <div class="form__field">
    <textarea class="textarea" name="" placeholder="Message" id="" cols="30" rows="10"></textarea>
    </div>
    <a href="#" class="button">Write to us</a>
    </div>

Comments

[Антон]

А где тег form, где name'ы у инпутов, оно вообще работает?

[Demetrius-one]

Антон, я дивом сделал, разве это критично, да вот смотри https://demetriusone.github.io/
попробуй заполнить вторую форму

[shmatuan]

Что такое автозаполнение?
Автозаполнение хромом или дублирование текста при заполнении одной во вторую?
В первом случае разный name в поля добавить
Во втором - отслеживать через js нажатие и заносить value в другое поле

[Demetrius-one]

shmatuan, у меня первый вариант, действительно добавление name решило проблему с независимостью, но гугл автозаполнение почему то не работает во второй форме, вот можете глянуть https://demetriusone.github.io
хотя все настройки идентичны как и в первой форме, странно но это можно пофиксить добавив второму полю еще один инпут и скрыть его через display:none. Но это костыльный метод, не совсем мне нравиться , хотелось бы найти другой выход.