holllop

Первый и самый важный шаг вы сделали — идите дальше. Смотрите что у вас в document.getElementById('id').value, потом что в document.getElementById('id'), если в value пусто.
Это называется "отладка" или "дебаг" и это примерно половина работы программиста.

выводит новую форму

Вангую, что в итоге у вас куча одинаковых форм и, соответственно, куча инпутов с id="id", что, естественно, недопустимо.

Кейфреймс
Ну примерно так на наведение уезжают вверх с середины, без наведения приезжают снизу в середину. Разве что еще чуть чуть поковыряться чтоб она при появлении не проигрывалась

Незачем накручивать градусы до огромных цифр - достаточно по достижению 360 возвращать в 0. А в остальном - никаких проблем не должно быть. На производительности практически никак не отразится.

// Get form element
const form = document.querySelector('form');

// Implementation DRY principe, write repeated code into function
const httpRequest = (url, options) => fetch(url, options)
  .then(response => response.json())
  .then(console.log)
  .catch(console.error);
  
// Create post request options
const postOptions = { 
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  }
};

// Create get request options
const getOptions = { 
  method: 'get',
  headers: {
    'Content-Type': 'application/json',
  }
};

// Create post request function
const postRequest = data => httpRequest('http://:3000/info/', {
	...postOptions,
  body: JSON.stringify(data)
});

// Create get request function
const getRequest = _ => fetch('http://:3000/info/', getOptions)
  .then(response => response.json())
  .then(console.log)
  .catch(console.error);
  
// Create form handler
const formHandler = (e) => {

	// End handler after request
  e.preventDefault();

	// Get data from form 
  const data = Object.fromEntries(new FormData(e.target).entries());
  
  // Send post request
  postRequest(data); 
  // Send get request
  getRequest();

  form.classList.remove('open');
  popup.classList.remove('popup_open');

}

// Set form handler
form.addEventListener('submit', formHandler);

Элементарно.
Несколько спозиционированных гридами картинок/блоков.
Сложные формы реализуются через clip-path или svg маски
При уменьшении экрана сложная форма преобразуется в прямоугольную, блоки встают в столбик.

Это вам не jQuery) Надо в цикле перебрать все элементы массива и отдельно на каждый элемент навесить обработчик. Если хотите, чтобы по волшебству обработчик на все элементы сам приклеился, используйте jQuery.