Comment créer un formulaire dans WordPress sans plugins

Publié: 2023-07-25

Vous souhaitez créer un formulaire dans WordPress sans utiliser de plugins ? Les formulaires sont parmi les éléments les plus essentiels et les plus utilisés d'un site Web, et il y a plusieurs avantages à en créer un sans utiliser de plugins.

Pourquoi créer un formulaire dans WordPress sans plugins

Il existe de nombreux plugins de formulaire WordPress que vous pouvez utiliser pour créer un formulaire. Mais créer un formulaire dans WordPress sans utiliser de plugins peut être bénéfique pour plusieurs raisons :

  • Simplicité et légèreté : vous évitez les frais supplémentaires liés à l'installation et à la maintenance des plugins lorsque vous créez un formulaire sans plugins. Un formulaire simple créé avec un code personnalisé peut être plus léger et efficace qu'un formulaire créé à l'aide d'un plugin.
  • Personnalisation : la création d'un formulaire à partir de zéro vous donne un contrôle total sur sa conception et ses fonctionnalités. Vous pouvez adapter le formulaire aux besoins spécifiques de votre site Web et le personnaliser en conséquence.
  • Expérience d'apprentissage : la création d'un formulaire sans plugins peut être une excellente expérience d'apprentissage pour les développeurs ou les utilisateurs souhaitant améliorer leurs compétences en matière de codage. Vous comprenez les mécanismes sous-jacents de la gestion des formulaires et du traitement des données.
  • Dépendance réduite : vous réduisez la dépendance de votre site Web vis-à-vis du code externe en ne vous fiant pas aux plugins. Cela peut être utile si vous souhaitez minimiser les risques de sécurité potentiels ou les conflits résultant de l'utilisation de plusieurs plugins.
  • Performances : les formulaires codés sur mesure peuvent offrir de meilleures performances et une meilleure vitesse pour votre site Web car ils sont légers par rapport aux plugins. Ces formulaires personnalisés n'incluent que les fonctionnalités dont vous avez besoin et n'ont pas les fonctionnalités supplémentaires fournies par les plugins que vous ne pouvez pas utiliser.
  • Flexibilité : les formulaires personnalisés offrent une plus grande flexibilité pour s'intégrer à d'autres parties de votre site Web ou à des types de publication personnalisés. Vous pouvez étendre les fonctionnalités du formulaire en fonction de vos besoins uniques.
    Bien sûr, la plupart des plugins fournissent des options similaires en utilisant les shortcodes. Mais avec les formulaires codés sur mesure, vous pouvez les ajouter à des emplacements spécifiques sur le site Web en fonction de la manière dont vous souhaitez les afficher.

Comment créer un formulaire dans WordPress sans plugins

Il existe de nombreux types de formulaires que vous pouvez créer dans WordPress sans utiliser les plugins. Mais un formulaire de contact est l'un des plus essentiels et des plus populaires. Nous allons donc vous montrer comment créer un formulaire de contact dans ce tutoriel.

Avant de commencer , nous espérons que vous avez une compréhension de base de la programmation puisque nous utiliserons des langages de script et des langages de balisage comme HTML et PHP. Si vous n'avez pas les connaissances requises pour cela, nous vous recommandons de demander l'assistance d'un programmeur pour vous aider à créer un formulaire.

Pour créer un formulaire de contact dans WordPress, vous devez d'abord créer une page de contact. Alors commençons par ça.

1) Créer une page pour le formulaire

Accédez à Pages > Ajouter un nouveau depuis votre tableau de bord WordPress.

Cela ouvrira l'éditeur de page, où vous pourrez entrer le titre de la page et la description supplémentaire nécessaire en plus du formulaire de contact proprement dit. Mais si un formulaire est la seule chose dont vous avez besoin sur cette page, nous pouvons continuer et créer le formulaire directement.

2) Ajouter du code HTML pour le formulaire dans l'éditeur

 Maintenant, allez dans votre éditeur de code en cliquant sur Options (trois points verticaux) > Éditeur de code en haut à gauche de votre écran. Ensuite, ajoutez un code HTML pour le formulaire dans l'éditeur. Vous pouvez ajouter les champs de formulaire nécessaires dont vous avez besoin en fonction du code suivant. 
<form method="post">
  <label for="name">Nom :</label>
<input type="text" name="nom" requis="">

<label for="email">E-mail :</label>
<input type="email" name="email" required="">

<label for="message">Message :</label>
<textarea name="message" required=""></textarea>

<input type="soumettre" value="Soumettre">
</form>

Ce code vous aidera à créer un formulaire de contact simple dans WordPress. Mais vous pouvez facilement le modifier pour créer le formulaire que vous souhaitez sur votre site WordPress.

Après avoir ajouté tous les champs de formulaire nécessaires au code, cliquez sur Publier ou Mettre à jour pour enregistrer les modifications sur la page de contact.

code html créer un formulaire dans wordpress

Si vous prévisualisez la page, vous pouvez voir le formulaire que vous venez de créer. Mais pour rendre le formulaire fonctionnel et en extraire des données, vous devez également gérer les soumissions de formulaire. Nous devons donc créer une base de données pour les soumissions de formulaires après cela.

page d'aperçu du formulaire créer un formulaire dans wordpress

3) Créer une table de base de données pour la soumission de formulaire

Pour créer une base de données pour les soumissions de formulaires, vous pouvez utiliser un outil de gestion de base de données comme phpMyAdmin. Vous pouvez y accéder en vous connectant à votre cPanel. Si vous ne disposez pas des informations d'identification nécessaires, nous vous recommandons de contacter votre service d'hébergement ou le propriétaire du site.

Maintenant, faites défiler jusqu'à la section Base de données et cliquez sur phpMyAdmin . Cela ouvrira le tableau de bord phpMyAdmin, où vous pourrez voir toutes les bases de données de votre site Web.

Développez le tableau de la base de données de votre site Web et faites défiler jusqu'au bas de la page, où vous pouvez créer un nouveau tableau de base de données. Ici, entrez le nom de la table sous la forme « wp_contact_form_submission » et cliquez sur Go pour créer la nouvelle table.

Ensuite, vous devez entrer les champs de données pour les champs de formulaire sur les colonnes de la table et leurs types. Selon le formulaire que nous venons de créer, nous ajouterons les noms et types de colonnes suivants :

  • nom : TEXTE
  • e-mail : TEXTE
  • message : TEXTE
  • heure_d'envoi : DATETIME

Enfin, cliquez surEnregistrer pour enregistrer les modifications dans la table de la base de données.

Nous avons nommé la table de base de données en fonction du formulaire de contact que nous avons créé. Vous pouvez donc changer le nom de la table en fonction du formulaire que vous avez initialement créé. De même, si vous avez utilisé différents champs de formulaire sur votre formulaire, vous pouvez ajouter les colonnes en conséquence.

4) Ajouter du code pour gérer les soumissions de formulaires

Après avoir créé la base de données, vous devez encore ajouter un ensemble de codes pour gérer les soumissions de formulaire dans le fichier de fonctions de thème de votre site Web.

Mais nous vous recommandons de sauvegarder votre site Web avant de continuer, car nous allons modifier certains des fichiers principaux du site Web. Et toute modification involontaire peut entraîner d'autres problèmes sur votre site Web. Vous pouvez consulter notre guide détaillé sur la sauvegarde d'un site Web WordPress si vous avez besoin d'aide.

4.1) Accéder au fichier des fonctions du thème

Accédez à Apparence > Éditeur de fichier de thème depuis votre tableau de bord WordPress pour accéder au fichier des fonctions du thème. Vous trouverez ici tous les fichiers de thème de base de votre site Web. Ensuite, sélectionnez le fichier Theme Functions ( functions.php) sur le côté droit de votre écran, où nous ajouterons le code.

page de code de soumission de formulaire créer un formulaire dans wordpress

4.2) Ajouter le code à l'éditeur de fichiers de thème

Vous pouvez utiliser les éléments suivants pour gérer la soumission du formulaire sur votre site Web. Ajoutez donc le code suivant à la fin de l'éditeur.

 si ($_SERVER["REQUEST_METHOD"] === "POSTER") {
  $nom = sanitize_text_field($_POST["nom"]);
  $email = sanitize_email($_POST["email"]);
  $message = sanitize_textarea_field($_POST["message"]);

  // Ajout de code pour enregistrer les données du formulaire dans la base de données
  global $wpdb ;
  $table_name = $wpdb->prefix . 'contact_form_submissions' ;
  $données = tableau(
    'nom' => $nom,
    'courriel' => $courriel,
    'message' => $message,
    'submission_time' => heure_actuelle('mysql')
  );
  $insert_result = $wpdb->insert($table_name, $data);

  si ($insert_result === faux) {
    $réponse = tableau(
      'succès' => faux,
      'message' => 'Erreur lors de la sauvegarde des données du formulaire.',
    );
  } autre {
    $réponse = tableau(
      'succès' => vrai,
      'message' => 'Données du formulaire enregistrées avec succès.'
    );
  }

  // Retourne la réponse JSON
  header('Content-Type: application/json');
  echo json_encode($response);
  sortie;
}

Ce code stockera les données de formulaire saisies du formulaire dans la table de base de données de soumission de formulaire que nous venons de créer. Nous avons également inclus une réponse JSON pour nous assurer que vous avez ajouté les noms de table de base de données et les champs corrects sur votre formulaire lorsque vous modifiez le code. Vous pouvez le supprimer une fois que les données du formulaire ont été stockées avec succès dans la base de données.

Cliquez simplement sur Mettre à jour le fichier après avoir apporté toutes les modifications nécessaires au code.

5) Afficher les soumissions de formulaires sur votre tableau de bord

Une fois les données du formulaire stockées dans la base de données, vous pouvez créer votre menu de tableau de bord pour afficher les soumissions de formulaire. Nous allons donc inclure un code pour l'afficher également.

Vous pouvez ajouter le code suivant au fichier des fonctions du thème ( funtions.php), comme à l'étape précédente.

 fonction display_contact_form_submissions_page() {
  global $wpdb ;
  $table_name = $wpdb->prefix . 'contact_form_submissions' ;
  $form_data = $wpdb->get_results("SELECT * FROM $table_name WHERE nom <> '' AND email <> '' AND message <> '' ORDER BY submit_time DESC", ARRAY_A);

  ?>
  <div class="wrap">
    <h1>Soumissions du formulaire de contact</h1>
    <table class="wp-list-table bande large fixe">
      <tête>
        <tr>
          <th>Nom</th>
          <th>E-mail</th>
          <th>Message</th>
          <th>Heure de soumission</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($form_data as $data) : ?>
          <tr>
            <td><?php echo esc_html($data['name']); ?></td>
            <td><?php echo esc_html($data['email']); ?></td>
            <td><?php echo esc_html($data['message']); ?></td>
            <td><?php echo esc_html($data['submission_time']); ?></td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
  </div>
<?php }

function registre_contact_form_submissions_page() {
  add_menu_page(
    'Soumissions de formulaire de contact',
    'Soumissions de formulaires',
    'gérer_options',
    'contact_form_submissions',
    'display_contact_form_submissions_page',
    'dashicons-commentaires'
  );
}
add_action('admin_menu', 'register_contact_form_submissions_page');

Encore une fois, cliquez sur Mettre à jour le fichier après avoir collé et modifié le code en fonction du formulaire et de la table de base de données que vous avez créés.

Maintenant, si vous allez sur votre tableau de bord WordPress, vous pourrez voir un menu « Contact Form Submissions ». Cela affichera toutes les soumissions de formulaire du formulaire que vous avez initialement créé.

afficher la page de soumission des formulaires créer un formulaire dans wordpress

Options de débogage pour afficher les soumissions de formulaire

Si vous ne pouvez pas voir les données du formulaire, nous vous recommandons d'ajouter un code pour la sortie de débogage et la requête SQL sur le code. Vous pouvez ajouter les codes var_dump($form_data); et var_dump($wpdb->last_query); respectivement après la requête.

Ainsi, le code peut ressembler à ceci :

 fonction display_contact_form_submissions_page() {
  global $wpdb ;
  $table_name = $wpdb->prefix . 'wp_contact_form_submissions' ;
  $form_data = $wpdb->get_results("SELECT * FROM $table_name ORDER BY submit_time DESC", ARRAY_A);

  var_dump($form_data); // Sortie de débogage
  var_dump($wpdb->dernière_requête); // Déboguer la requête SQL

  ?>
  <!-- Reste du code... -->
  <?php
}

En fonction du rapport de débogage, vous pouvez modifier davantage les codes pour vous assurer que les données du formulaire s'affichent correctement. Mais vous pouvez également passer en revue les points de la section suivante pour vous assurer qu'il n'y a pas eu d'erreur sur le code que vous avez utilisé.

Considérations essentielles pour créer un formulaire personnalisé efficace

Voici quelques facteurs à prendre en compte lors de la modification des codes pour créer votre formulaire personnalisé . Ils peuvent être utiles si vous rencontrez des erreurs au cours du processus.

  • Vérifiez la base de données : assurez-vous que les données du formulaire sont correctement enregistrées dans la bonne table. Pour ce tutoriel, il s'agit de la table 'wp_contact_form_submissions'.
  • Vérifiez les erreurs : vérifiez vos journaux d'erreurs PHP ou activez le rapport d'erreurs pour voir s'il y a des erreurs liées à la soumission du formulaire ou à l'affichage des données. Les erreurs peuvent fournir des indices sur ce qui ne va pas.
  • Vérifiez le processus de soumission du formulaire : Assurez-vous que les données du formulaire sont soumises correctement et que le code PHP pour enregistrer les données du formulaire s'exécute sans erreur. Vérifiez si les données du formulaire sont correctement transmises au code PHP lorsque le formulaire est soumis.
  • Vérifiez le nom de la table : vérifiez que le nom de la table utilisé dans la fonction 'display_contact_form_submissions_page()' correspond au nom réel de la table dans la base de données. Assurez-vous qu'il s'agit de 'wp_contact_form_submissions' ou ajustez le nom de la table en fonction de votre table de base de données.
  • Effacer le cache : si vous utilisez des plug-ins de mise en cache ou une mise en cache côté serveur, effacez le cache pour vous assurer d'afficher les dernières données.
  • Autorisations : assurez-vous que le rôle d'utilisateur auquel vous êtes connecté dispose de la capacité "manage_options" pour accéder à la page d'administration personnalisée. Cette fonctionnalité permet aux administrateurs d'accéder à la page par défaut.

Nous avons mentionné un ensemble de codes pour vous permettre de créer un formulaire de contact dans WordPress. Mais vous devez modifier les codes si vous souhaitez créer un autre formulaire ou un formulaire alternatif avec des champs de données différents. Ainsi, les points ci-dessus peuvent également vous être utiles pour créer votre formulaire personnalisé sur WordPress.

Conclusion

C'est ainsi que vous créez un formulaire dans WordPress sans utiliser de plugins. Vous pouvez également créer des formulaires à l'aide de plugins. Cependant, la création d'un formulaire codé personnalisé présente de nombreux avantages si vous avez une compréhension de base de la programmation.

Vous pouvez facilement créer un formulaire avec les ensembles de codes de base que nous avons inclus dans ce didacticiel. Pour résumer, voici les étapes de base pour en construire un efficace :

  • Ajouter le code du formulaire sous l'éditeur de page
  • Créer une base de données pour les soumissions de formulaires
  • Ajoutez les codes nécessaires pour gérer les soumissions de formulaires et les afficher

Nous espérons que vous pourrez désormais créer en toute confiance un formulaire sur votre site Web en utilisant les codes mentionnés dans ce didacticiel. Vous pouvez les modifier pour inclure des champs de formulaire supplémentaires, en fonction de vos besoins. Si vous rencontrez des problèmes, nous avons même ajouté des options de débogage et des facteurs à prendre en compte lors de la création d'un code personnalisé sur WordPress.

Alors, avez-vous déjà essayé de créer un formulaire dans WordPress sans plugin ?

Faites-le nous savoir dans les commentaires ci-dessous.

En attendant, n'hésitez pas à consulter les articles suivants pour vous aider à améliorer et personnaliser votre site WordPress.

  • Comment personnaliser le formulaire d'inscription WooCommerce
  • Le formulaire de contact Divi ne fonctionne pas ? Voici comment y remédier !
  • Comment ajouter un formulaire contextuel à WordPress