с некоторыми недоработками
<!DOCTYPE html>
<html >
<head>
</head>
<body>
<div class="wrapper">
<form action="#" method="post">
<div class="step">
<p class="step">Введите своё имя</p>
<p><strong>Имя:</strong><input type="text" name="msg" id="msg" placeholder="Введите имя"></p>
</div>
<div class="step">
<p class="step">Введите вашу фамилию</p>
<p><strong>Фамилия:</strong><input type="text" name="surname" placeholder="Введите фамилию"></p>
</div>
<div class="step">
<p class="step">Введите ваш email</p>
<p><strong>Email:</strong><input type="text" name="email" placeholder="Введите ваш email"></p>
</div>
<p class="talign">
<a href="#" class="back">Назад</a>
<a href="#" class="next">Далее</a>
<input type="submit" value="Завершить" onClick="Thanks();">
</p>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var steps = $("form").children(".step").hide();
$('a.back').hide();
$('a.next').hide();
$('input[type=submit]').hide();
var current_step = 0;
$(steps[current_step]).show();
$(steps).on('input', function() {
if($(this).find('input').val().length > 2) {
if(current_step < steps.length - 1) {
$('a.next').show();
$("form input[type=submit]").hide();
}
else {
$('a.next').hide();
$("form input[type=submit]").show();
}
}
else {
$('a.next').hide();
$("form input[type=submit]").hide();
}
});
$("a.next").click(function(){
$(steps[current_step]).hide();
current_step++;
$(steps[current_step]).show();
$(this).hide();
current_step > 0 ? $('a.back').show() : $('a.back').hide();
});
$("a.back").click(function(){
if (current_step == 1) {
$(this).hide();
}
$("form input[type=submit]").hide();
$("a.next").show();
$(steps[current_step]).hide();
current_step--;
$(steps[current_step]).show();
});
});
function Thanks(){
jQuery("body").empty(); // очищаем тело документа
jQuery("body").append("<h2><center>Спасибо!</center></h2>");
}
</script>
</body>
</html>