Attention !

Cet article contient du code PHP et est destiné aux développeurs. Nous fournissons ce code à titre de courtoisie, mais nous n'offrons pas de support pour les personnalisations de code ou le développement tiers.

Pour obtenir de l'aide supplémentaire, veuillez consulter le tutoriel de WPBeginner sur l'ajout de code personnalisé.

Ignorer

Comment ajouter une vidéo avant votre formulaire

Souhaitez-vous ajouter une vidéo attrayante au-dessus de votre formulaire ? Que vous utilisiez un formulaire intégré standard ou les modules complémentaires Conversational Form et Form Pages, vous pouvez facilement ajouter un message vidéo à l'aide d'un simple extrait de code.

Ce guide vous montrera comment implémenter cette fonctionnalité.

Configuration de votre formulaire

Tout d'abord, créez votre formulaire et ajoutez les champs souhaités. Si vous avez besoin d'aide pour créer un formulaire, veuillez consulter notre guide sur la création de votre premier formulaire.

créez votre formulaire et ajoutez vos champs

Ajout de votre vidéo

Pour ajouter une vidéo au-dessus de votre formulaire, vous devrez ajouter ce code à votre site. Si vous ne savez pas comment ajouter du code personnalisé, veuillez consulter notre guide sur l'ajout d'extraits de code JavaScript ou CSS.

N'oubliez pas de remplacer 999 par l'ID de votre formulaire. Si vous avez besoin d'aide pour trouver l'ID de votre formulaire, consultez notre guide sur la manière de trouver les ID de formulaire et de champ.

Mise en forme de votre vidéo

Pour vous assurer que votre vidéo s'adapte correctement au conteneur de votre formulaire, vous pouvez ajouter ce CSS facultatif. Si vous avez besoin d'aide pour ajouter du CSS personnalisé, veuillez consulter notre guide sur l'ajout de CSS personnalisé à votre site.

iframe {
    width: 100%;
    min-height: 400px;
}
Votre vidéo s'affiche maintenant avant votre formulaire

La vidéo apparaîtra :

  • Au-dessus des formulaires intégrés standard
  • Sur les liens des pages de formulaire
  • Sur les pages de formulaire conversationnel
  • Avec un dimensionnement réactif grâce au CSS

Et voilà ! Vous avez maintenant ajouté avec succès une vidéo à votre formulaire. Ensuite, souhaitez-vous également modifier le titre de l'onglet du navigateur ? Consultez notre tutoriel sur la modification du titre de la page dans l'onglet du navigateur pour plus de détails.

Action de référence

wpforms_frontend_output_before