Discussion :

[Ushuango]

Bonjour,

comme indiqué dans le titre, j'intègre un site dans wordpress.
J'en suis au formulaire et j'ai "presque" réussi à intégré proprement: modifié 2 lignes de css et entouré mes balises avec des <div> comme il faut.

Mais le bouton submit contient une image:
un petite flèche qui s'anime au passage de la souris !
voici l'allure du html initial:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<button type="submit">Envoyer <img ...></button>

L'animation est en css !

Si j'arrive à rajouter la balise img dans le code du contact form, le tour est joué !
Bien sûr , j'ai essayé un copié-collé. et c'est accepté, mais pour trouver le chemin de l'image il faut passer par des get_template_directory_uri()Et là, ça ne copie pas le code correctement à cause du php rajouté qui n'est pas interprété comme il faut:
si je met src="<?php echo get_template_directory_uri() ."/img/arrow.svg" ?>" directement dans contact form,
j'obtiens src="<?php echo get_template_directory_uri() ." img="" arrow.svg"="" ?="" > dans ma page html générée.

Et je ne vois pas comment reproduire l'effet sous WordPress (pour l'instant je me suis débrouillé avec contact form 7).
C'est un défi technique qui m'intéresse, mais pas indispensable.

Peut-on continuer avec contact form 7 ou bien faut-il une autre extension ? Une astuce tout simplement ?

[mathieu]

est ce que vous avez déjà réussi à mettre une balise "button" ? avec l'extension contact form 7 de base, j'ai seulement trouvé comment mettre une balise "submit".

[Ushuango]

j'ai gardé la balise "submit". Plus exactement [submit ...]
il se trouve que dans le css du site , on cible la balise "button" du formulaire.

j'ai juste remplacé le sélecteur "button" par [type="submit"] dans le style et il s'applique comme avant !

Je me pose justement la question de ce que l'on peut mettre comme balise dans le formulaire de contact !
Je sais déjà que l'on peutt mettre des "div", "label" etc...

J'espère que quelqu'un de plus expérimenté verra ce post !

[mathieu]

ah oui j'avais oublié qu'on peut mettre des balises html directement dans le contenu.
donc il reste juste à gérer le chemin de l'image avec un nouveau tag par exemple.

pour faire ça, vous pouvez faire une extension avec le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
add_action("wpcf7_init", function () {
 
	wpcf7_add_form_tag(
		  "image_theme"
		, function ($tag) {
 
			$image = $tag->values[0];
			$url = get_stylesheet_directory_uri() . "/$image";
 
			return "<img src=\"$url\" alt=\"\"/>";
 
		}
	);
 
 
});

et ensuite dans le formulaire, vous pouvez l'utiliser en mettant cela

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<button type="submit">Envoyer [image_theme "images/test 1.png"]</button>

[Ushuango]

impeccable , tout fonctionne ! Merci

Du coup j'ai carrément mis la balise <button> dans le contact form, au lieu de ["submit" Envoyer]
Il faudra que je teste plus, mais j'ai l'impression qu'on peut mettre pas mal de choses dans le contact form !!
Par contre , je ne comprends pas le $tag->values[0].
Ça renvoie éveidemment "images/test 1.png" mais comment ?

J'ai utilisé get_tepmlate_directory_uri(), mais get_stylesheet_directory_uri() fonctionne aussi , du coup je ne comprends plus vraiment la différence entre les deux !

[mathieu]

"template_directory" est le répertoire du thème parent et "stylesheet_directory" est le répertoire du thème enfant. et si vous n'utilisez pas un thème enfant, les 2 fonctions retourne la même chose.

vous pouvez trouver plein d'informations dans la documentation :
https://developer.wordpress.org/refe...directory_uri/

Il faudra que je teste plus, mais j'ai l'impression qu'on peut mettre pas mal de choses dans le contact form !!

c'est pas seulement cette extension mais wordpress qui est très souple et qui permet de faire beaucoup de chose en codant soi même ses extensions.