Bonjour les blogueurs, j'espère que vous allez tous bien. Dans cet article, nous allons apprendre comment insérer un formulaire de contact fonctionnel dans AMP Blogger avec les formulaires Google, Formulaires AMP, et quelques CSS. Ce didacticiel est convivial pour les débutants, vous n'avez donc pas du tout à vous soucier des éléments AMP et du CSS.
J'ai trouvé de nombreux articles fournissant des méthodes indirectes comme l'utilisation d'amp-iframe et l'intégration de pages. Vous pouvez même intégrer un formulaire Google directement avec l'utilisation d'amp-iframe mais vous devez supporter les crédits Google en dessous et surtout, c'est très lent par rapport à notre formulaire de contact normal.
Dans ce tutoriel, nous utiliserons le même formulaire Google mais sans iframe, nous utiliserons les éléments amp-form pour créer un formulaire de contact parfait. Vous pouvez voir la démo avant de passer à l'article.
Comment ajouter un formulaire de contact dans AMP Blogger
Tout d'abord, assurez-vous que vous avez amp-forme installés ou configurés dans votre thème AMP, la plupart d'entre eux l'auraient, mais vérifiez sinon le formulaire de contact ne fonctionnera jamais.
Cet article ne se limite pas uniquement aux blogueurs, vous pouvez utiliser ce code dans n'importe quel blog prenant en charge AMP.
Si amp-forme n'est pas présent dans votre thème, collez ce code dans le
<head> et </head> tag ou avec les tags amp similaires<script async="async" custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"/> Il s'agit d'insérer les composants du formulaire AMP et les scripts dans votre site Web.
1. Accédez à Formulaires Google et dans la section supérieure, cliquez sur le modèle «Coordonnées» qui facilitera notre travail.
2. Dans le modèle, vous pouvez voir différents blocs pour le nom, l'e-mail, l'adresse, etc. Supprimez tous les blocs sauf Nom, Email et commentaires. Vous pouvez sélectionner chaque bloc en cliquant simplement dessus.
3. Après cela, cliquez Aperçu bouton en haut
4. De leur clic droit sur le champ de réponse de Nom et sélectionnez Inspecter.
5. Vous pouvez voir un code HTML en surbrillance ci-dessous et en cela, vous pouvez voir un
name="entry.xxxxx" champ qui est l'ID dont nous avons besoin plus tard. Répétez la même méthode pour les e-mails et les commentaires.
6. Si vous montez dans le code, vous pouvez voir un élément
<form action="Some URL">. Copiez également cette URL
6. Maintenant que vous avez un identifiant pour chaque champ et URL, remplacez ces champs à partir du code ci-dessous et rappelez-vous que l'identifiant doit correspondre à l'étiquette. Collez l'ID que vous avez copié pour le fichier correspondant et collez l'URL dans le champ ci-dessus.
<div class="msgform">
<form action-xhr="//docs.google.com/forms/u/0/d/e/xxxxx/formResponse" method="post" target="_top">
<label>Your Name</label>
<input name="entry.xxxxx" required="" type="text" />
<label>Your Email</label>
<input name="entry.xxxxx" required="" type="email" />
<label>Message</label>
<textarea cols="45" name="entry.xxxxx" required="" rows="8"></textarea>
<input type="submit" value="Submit" />
<div class="alert" submitting="">
Please Wait...
</div>
<div class="alert" submit-error="">
Success!
</div>
<div class="alert" submit-success="">
Oops Please Try Again!
</div>
</form>
</div>7. Collez le code HTML ci-dessus dans votre page de contact en passant en mode HTML dans l'éditeur de publication.
8. Collez le CSS ci-dessous dans le
<style amp-custom='amp-custom> tag et enregistrez le thème./* AMP Contact Form by MFK Bloginos */
.msgform input[type=text],input[type=email],textarea{width:100%;padding:12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;margin-top:6px;margin-bottom:16px;resize:vertical}.msgform input[type=submit]{background-color:#297CA4;color:#fff;padding:12px 20px;border:none;border-radius:4px;cursor:pointer}.msgform input[type=submit]:hover{background-color:#222}.alert{background:linear-gradient(to right,#e24747,#f39d9da6);margin:20px 0;padding:0 10px;color:#fff;border-radius:3px;}9. Si vous avez tout fait correctement, votre formulaire de contact devrait désormais fonctionner!
Modifier le formulaire de contact
Vous pouvez ajouter votre propre CSS pour modifier le formulaire et ajouter des messages d'erreur, d'envoi et de réussite personnalisés dans le code HTML. Pour remplacer, vous pouvez simplement modifier le texte à l'intérieur des balises correspondantes ci-dessous.
| Type | Marque |
|---|---|
| Soumettre un message | <div class="alert" submitting=""> |
| Message de réussite | <div class="alert" submit-error=""> |
| Message d'erreur | <div class="alert" submit-success=""> |
Avantages du formulaire de contact AMP dans Blogger
Dans ce formulaire de contact particulier, vous pouvez facilement collecter l'adresse e-mail et la stocker dans une feuille Excel qui est déjà présente dans les formulaires Google et exploiter d'autres fonctionnalités complémentaires fournies par Google.
Vous pouvez ultérieurement utiliser ces e-mails à des fins de marketing de contenu ou à d'autres fins marketing. Créer une merveilleuse opportunité de collecter des e-mails qui ne sont pas disponibles sous des formes ordinaires.
Il est difficile de faire la distinction entre notre formulaire de contact et le formulaire de contact d'origine dans le blogueur. Vous pouvez consulter notre article précédent où nous avons discuté meilleurs modèles de blogueurs amp.
Conclusion
J'espère que cet article sur le formulaire de contact dans AMP Blogger vous a aidé à insérer un formulaire de contact fonctionnel dans votre blog AMP. Si vous avez des doutes concernant cet article, commentez ci-dessous vos questions et nous serons heureux de vous aider.
0 Comments