Problème d'affichage du contenu wordpress

Bonjour à tous,

Voila je travail actuellement sur un projet web perso, j'ai maquété un site en html/css et je suis entrain d'en faire un thème wordpress.

J'ai sur mon site une page avec un formulaire qui comprend une petit animation JS qui transforme le placeholder en nom du champ comme ceci : http://drivad.fr/inscription/ ( le formulaire est en dur sur un template de page)

mais quand je copie le même code dans la partie editeur d'une page wordpress pour l'afficher via le template "page.php" j'ai limpression que le code est deformé et mon animation de fonctionne plus. J'ai beau tout essayé rien ne fonctionne.

Par exemple quand je place mon code en dur à la suite de mon <?php the_content(); ?> dans page.php pour afficher les deux formulaires à la suite. Celui qui passe par <?php the_content(); ?> ne fonctionne pas et celui en dur fonctionne très bien alors que c'est le même code comme ici : http://drivad.fr/essai/

Et voici le code utilisé dans les cas :

      <div class="form-page">
          <!-- form -->
          <div class="bloc-form-connect visible-important">
            <div class="form-connect">
              <div class="tab-content">
                <div id="signup" class="visible-important">
                  <p class="text-inscrir">Je suis en dur</span></p>

                  <form action="/" method="post">

                    <div class="top-row">
                      <div class="field-wrap">
                        <label>
                          Prénom<span class="req">*</span>
                        </label>
                        <input type="text" required autocomplete="off" />
                      </div>

                      <div class="field-wrap">
                        <label>
                          Nom<span class="req">*</span>
                        </label>
                        <input type="text"required autocomplete="off"/>
                      </div>
                    </div>

                    <div class="field-wrap">
                      <label>
                        Adresse mail<span class="req">*</span>
                      </label>
                      <input type="email"required autocomplete="off"/>
                    </div>

                    <div class="field-wrap">
                      <label>
                        Ville<span class="req">*</span>
                      </label>
                      <input type="text"required autocomplete="off"/>
                    </div>

                    <div class="field-wrap">
                      <label>
                        statut<span class="req">*</span>
                      </label>
                      <select name="" id="">
                        <option>Etudiant</option>
                        <option>Salarié</option>
                        <option>Sans emploi</option>
                      </select>
                    </div>

                    <button type="submit" class="button-form  button-block"/>C'est parti !</button>
                    <a href="recherche-auto.html">continuer</a>

                  </form>

                </div>

                <div id="login">

                </div>

              </div><!-- tab-content -->

            </div>
          </div>
          <!-- /form -->
        </div>```

Ca fait des heures que j'essai de résoudre ce problème.. Si quelqu'un aurait une idée je lui en serais très reconnaissant,

Merci d'avance !