[Malleys]

<div class="big"><input type="text" name="name"></div>
<div class="mobile"><input type="text" name="name"></div>

<style>
	
input {
	all: initial;
}
	
.mobile {
	background: #ffeaea;
	display: initial;
}

.big {
	background: #d2ffde;
	display: none;
}

@media (min-width: 600px) {
	.mobile {
		display: none;
	}

	.big {
		display: initial;
	}
}
	
</style>
<script>
	
{
	let onResizeHandler = event => {
		for(let element of document.querySelectorAll("input[name], input[data-name]")) {
			if(!("name" in element.dataset)) element.dataset.name = element.name;
			
			// если элемент формы не виден,
			// то удаляем его "name" атрибут;
			// иначе восстанавливаем
			if(element.offsetWidth > 0 && element.offsetHeight > 0) {
				element.setAttribute("name", element.dataset.name);		
			} else {
				element.removeAttribute("name");
			}
		}
	};

	addEventListener("resize", onResizeHandler);
	onResizeHandler();
};
	
</script>

<!-- просто кнопка, не к теме, но открывает в новом окне, чтобы можно было изменять его размеры смотря в консоль на inputs -->
<input type="button" style="position:absolute;bottom:0;right:0" value="In new tab" onclick="var o=open('', '', '');o.document.write(document.documentElement.outerHTML);">

Хотя такое решение, не является *на самом деле* решением, поскольку в HTML следует хранить только данные, а не их представление.
У вас на самом деле одна форма, но вы хотите чтобы она по разному выглядела. С помощью CSS можно как угодно оформлять и переставлять элементы на странице.
http://www.mezzoblue.com/zengarden/alldesigns/ Пример одного HTML, и как его можно разными способами при помощи CSS преображать...