Как это реализовать

1. Пользователь кликает по кнопке 1 в форме
2. Проверка введенных данных
3. Если проверка успешна -> анимация этой формы (переключение на 2 форму)
4. Кликаем по кнопке 2 и отправляем данные из двух форм в БД.

Как это сделать? Третий пункт вообще не понимаю как реализовать.

Кроме того, здесь есть проблема, что анимация не работает нормально, если кнопка находится в форме. Если нажать на кнопку 3, то анимация работает. Но если она на форме (кнопка 1) то анимация прерывается.

Вот сами формы, обработчики

<div id="formsss">
        <div id="form_1">
            <h3>Форма 1</h3><br>
            <form action="" method="POST">
                <input name="input1" value="<?php echo $_POST['input1']; ?>"><br>
                    <?php
                    if ( isset($_POST['clicked_btn_1']) )
                    {
                        $errors = array();
                        if (trim($_POST['input1'] == ''))
                        {
                            $errors[] = 'Заполните поле';
                        }
                        if (R::count('test', 'input1 = ?', array($_POST['input1'])) > 0)
                        {
                            $errors[] = 'Такие данные уже есть в базе';
                        }
                        if (empty($errors))
                        {
                            // ПЕРЕКЛЮЧАЕМ НА ФОРМУ 2
                        }
                        else
                        {
                            echo '<div style="color: red;">'.array_shift($errors).'</div>';
                        }
                    }
                    ?>
                <button id="btn_1" type="submit" name="clicked_btn_1">Кнопка 1</button>
            </form>
         </div>
         <div id="form_2">
            <h3>Форма 2</h3><br>
            <form action="" method="POST">
                <input name="input2" value="<?php echo $_POST[input2]; ?>"><br>
                <?php
                if ( isset($_POST['clicked_btn_2']) )
                {
                    $errors = array();
                    if (trim($_POST['input2'] == ''))
                    {
                        $errors[] = 'Заполните поле';
                    }
                    if (R::count('test', 'input2 = ?', array($_POST['input2'])) > 0)
                    {
                        $errors[] = 'Такие данные уже есть в базе';
                    }
                    if (empty($errors))
                    {
                        // заносим в базу данные из двух форм
                        $test = R::dispense('test');
                        $test->input1 = $_POST['input1'];
                        $test->input2 = $_POST['input2'];
                        R::store($test);
                    }
                    else
                    {
                        echo '<div style="color: red;">'.array_shift($errors).'</div>';
                    }
                }
                ?>
                <button id="btn_2" type="submit" name="clicked_btn_2">Кнопка 2</button>
            </form>
        </div>
    </div>
    <button id="btn_3" type="submit" name="clicked_btn_3">Кнопка 3</button>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
     $('#btn_3').click(function(){
        $('#formsss').toggleClass('flipped')
    });
</script>

css анимация

#form_2{
-moz-transform: rotateY(-180deg)scale(.1)translateY(-70px);
-webkit-transform: rotateY(-180deg)scale(.1)translateY(-70px);
-o-transform: rotateY(-180deg)scale(.1)translateY(-70px);
transform: rotateY(-180deg)scale(.1)translateY(-70px);
filter: alpha(opacity=0);
opacity: 0;
z-index: 1;
}
#form_2, #form_1 {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: .6s;
-webkit-transition: .6s;
-o-transition: .6s;
transition: 600ms 0ms;
transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
}
#form_2 {
bottom: 20px;
top: 359px;
left: 20px;
right: 20px;
}
#form_2, pre {
position: absolute;
}
/*************************************************/
.flipped#formsss {
overflow: hidden;
}
.flipped #form_1 {
-moz-transform: rotateY(180deg)scale(.7);
-webkit-transform: rotateY(180deg)scale(.7);
-o-transform: rotateY(180deg)scale(.7);
transform: rotateY(180deg)scale(.7);
filter: alpha(opacity=0);
opacity: 0;
}
.flipped #form_2 {
-moz-transform: rotateY(0)scale(1);
-webkit-transform: rotateY(0)scale(1);
-o-transform: rotateY(0)scale(1);
transform: rotateY(0)scale(1);
filter: alpha(opacity=100);
opacity: 1;
z-index: 5;
display: block;
}