Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

01.06.2010

Ajouter une boîte de connexion à l'administration de son blog Hautetfort

Que vous soyez en crise de WPlikite1 aiguë, ou simplement parce que vous n'avez plus tellement envie de passer par le portail de la plateforme, vous voulez votre propre boîte dans une colonne pour vous connecter à votre interface d'administration.

Vous pouvez aisément récupérer le code source du formulaire de connexion officiel dans celui de la page d'accueil de Hautetfort. Il ne vous reste plus qu'à • Ajouter le code HTML / Javascript dans Ajouter un élément personnalisé du Contenu des colonnes de PRÉSENTATION pour avoir quelque chose comme ceci.

connexion-1.png<form id="connexion" name="connexion" method="post" action="http://www.hautetfort.com/login.php">
<input name="user_username" type="text" value="" size="25"/>
<br />
<input type="password" name="user_password" value="" size="25" />
<input name="evnt" type="hidden" value="login" />
<input type="image" value="Valider" src="http://static2.hautetfort.com/frontend/graphics/portal/ok.jpg" />
<br />
<a href="http://www.hautetfort.com/forget_password.php">Mot de passe oublié ?</a>
</form>

Le lien vers la page de récupération du mot de passe oublié peut paraitre superflu, retirons-le ; si nous en avons besoin, nous savons où le retrouver.

Et tant qu'à nous attaquer au superflu, pourquoi taper à la fois "login" et "mot de passe" ? Le login correspond généralement au nom de votre blog, et cette information n'a plus grand chose de secret. Dès lors, nous pourrions prévoir que le premier champ sera toujours rempli de la bonne valeur, ici geemee2. Et puisque ce n'est pas appelé à changer, autant le cacher. En même temps, si vous voulez offrir à tous vos visiteurs de se connecter chez eux à partir de chez vous...

connexion-2.png<form id="connexion" name="connexion" method="post" action="http://www.hautetfort.com/login.php">
<input name="user_username" type="hidden" value="geemee"/>
<br />
<input type="password" name="user_password" value="" size="12" />
<input name="evnt" type="hidden" value="login" />
<input type="image" value="Valider" src="http://static2.hautetfort.com/frontend/graphics/portal/ok.jpg" style="height:17px;vertical-align:top;"/>
</form>

Ne nous arrêtons pas en si bon chemin, bricolons une image "Connexion" pour ne pas confondre avec d'autres formulaires, et ajoutons du style au champ de saisie du mot de passe.

connexion-3.png<form id="connexion" name="connexion" method="post" action="http://www.hautetfort.com/login.php">
<input name="user_username" type="hidden" value="geemee"/>
<br />
<input type="password" name="user_password" value="" size="12" style="background-color: #EFE6C5; border:1px solid #DDB666;"/>
<input name="evnt" type="hidden" value="login" />
<input type="image" value="Valider" src="http://geemee.hautetfort.com/images/aspire/connexion.gif" style="vertical-align: top;border:0px;" />
</form>


Et cela vous dispense pas totalement de passer par le portail de la plateforme !

 


 

1 La WPlikite est une affection du blogueur qui se reconnaît dans ses cas les plus extrêmes aux cris lugubres lancés dans la nuit à la lune indifférente : « Je veux un blog qui ressemble à WP ! ».

2 La question de savoir si Gee Mee est une bonne valeur reste ouverte.

09:35 Écrit par Gee Mee dans Boîte à outils, Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : formulaire, connexion, administration, login | |  del.icio.us | | Digg! Digg |  Facebook

21.05.2010

Personnaliser l'apparence du moteur de recherche Hautetfort

Nous avons vu comment rechercher dans un blog Hautetfort, voyons maintenant comment le faire avec du style.

L'austérité de l'apparence par défaut ne doit pas vous rebuter. Google lui-même a fait sa place en proposant une mise en forme réduite à presque rien. Cela ne nous empêche pas de vouloir un module qui soit plus conforme à l'image de notre blog. Nous pouvons nous contenter de modifier la feuille de styles, ou aller plus loin en récupérant le code de l'élément de colonne pour modifier les textes, voire remplacer le bouton par une image.


Modifier la feuille de styles

Les styles appliqués au moteur de recherche ne commande normalement que la largeur du champs de saisie (110 pixels) et du bouton de validation (40 pixels). Le code par défaut de la feuille de styles d'un template de base :

#box-search form input.search_button {
width: 40px;
}
#box-search form input {
width: 110px;
}

Je vous conseille d'inverser l'ordre des deux éléments pour garder à l'esprit la cascade des styles. Ce qui est appliqué au formulaire s'applique au bouton, sauf style contraire. Dans le code suivant, une couleur de fond a été appliqué au formulaire, mais une image a été appliquée en plus au bouton, masquant la couleur de fond visible dans le champs de saisie.

rechercher-1.png#box-search form input {
width: 110px;
background-color: #DDB866;
}
#box-search form input.search_button {
width: 40px;
background:url("http://geemee.hautetfort.com/images/aspire/content-bg.jpg") repeat scroll 0 0;
}

Vous pouvez modifier l'apparence du champs en supprimant les bordures, soit effectivement avec border:0px; ou visuellement en attribuant la couleur de fond pour préserver l'alignement (ce qui est le cas ci-dessous). Pour l'exemple nous passeront celle du bouton en pointillés.

rechercher-2.png#box-search form input {
width: 110px;
background-color: #DDB866;
border:1px solid #FFFFFF;
}
#box-search form input.search_button {
width: 40px;
background:url("http://geemee.hautetfort.com/images/aspire/content-bg.jpg") repeat scroll 0 0;
border:1px dotted #663300;
}

Modifier le code s'avère nécessaire si l'on veut changer le texte du bouton de validation et ou le changer pour une image.

 

Récupérer le code du moteur de recherche

Il y a la méthode « faites le vous-même » qui consiste à :

- activer l'élément de colonne « Rechercher » dans PRÉSENTATION, Contenu des colonnes
- cliquer sur Configuration avancée, puis sur
- Modifier le template à droite de Modèle de la colonne gauche ou Modèle de la colonne droite
- identifier la portion de code commençant par <form method="post" action="{$blog.url}" et finissant par </form>
- copier cette portion, et la coller dans un éditeur de texte (genre bloc note ou notepad).

Sinon, vous pouvez copier le code ci-dessous :

<form method=" action="{$blog.url}" name="search" onsubmit="return false;"><input type="text" name="keyword" value="" />
<input type="button" name="submit" value="{t}Ok{/t}" onclick="if(this.form.elements['keyword'].value)window.location = '{$blog.url}search/'+this.form.elements['keyword'].value;return false;" class="search_button"/>
</form>

Vous devez faire une première modification avant de créer un élément de colonne personnalisé, au niveau de la troisième ligne. En fait, le « moteur » crée une adresse avec le mot clé que vous entrez, mais le déplacement du script va « provoquer » une adresse du type http://geemee.hautetfort.com/{$blog.url}search/zorglub ce qui ne fonctionne évidemment pas. Le code utilisable est donc :

form method=" action="{$blog.url}" name="search" onsubmit="return false;">
<input type="text" name="keyword" value="" />
<input type="button" name="submit" value="{t}Ok{/t}" onclick="if(this.form.elements['keyword'].value)window.location = 'search/'+this.form.elements['keyword'].value;return false;" class="search_button"/>
</form>

Maintenant, dans PRÉSENTATION, Contenu des colonnes, vous pouvez Ajouter un élément personnalisé, et en l'occurrence Ajouter le code HTML / Javascript.


Que pouvez-vous personnaliser dans le formulaire du moteur de recherche ?

• Si vous voulez un contenu par défaut dans le champs de saisie, il faut modifier la deuxième ligne comme suit :

<input type="text" name="keyword" value="Rechercher...">

Pour que ce texte par défaut disparaisse d'un clic de l'utilisateur, il faut compléter le code de la façon suivante :

<input type="text" name="keyword" onBlur="if (this.value == '') {this.value = 'Rechercher...';}" onFocus="if (this.value == 'Rechercher...') {this.value = '';}" name="keyword" value="Rechercher..." />


• Si vous voulez changer le texte du bouton « Ok » par « Et hop! » (c'est un exemple) vous modifiez la troisième ligne pour avoir :

<input type="button" name="submit" value="Et hop!" onclick="if(this.form.elements['keyword'].value)window.location = 'search/'+this.form.elements['keyword'].value;return false;" class="code><p><input type=">


• Si vous voulez une image pour remplacer le bouton « Ok » par une image.

- Créez une image d'une vingtaine de pixels de haut maximum.
- Téléchargez là sur votre blog via TABLEAU DE BORD , Fichiers, Répertoire images/ puis Ajouter un fichier
- Modifiez la troisième ligne comme suit (en admettant que l'image s'appelle bien bouton-ok.gif et qu'elle se trouve à l'emplacement spécifié :

<input type="image" name="submit" src="http://votreblog.hautetfort.com/images/bouton-ok.gif" onclick="window.location = 'search/'+this.form.elements['keyword'].value;return false;" class="code><p><input type=">

Le code ci-dessous a permis de générer la capture ci-contre. Vous noterez que les styles ont été passés en direct plutôt que d'être appelés par la feuille de styles. Il n'est pas toujours facile d'obtenir un résultat satisfaisant compte tenu des styles déjà en place. Les alignements sont à surveiller de près entre les différents navigateurs. Je vous accorde que remplacer un bouton Ok par une image Ok...

rechercher-3.png<form method=" action="{$blog.url}" name="search" onsubmit="return false;">
<input type="text" name="keyword" onBlur="if (this.value == '') {this.value = 'Rechercher...';}" onFocus="if (this.value == 'Rechercher...') {this.value = '';}" name="keyword" value="Rechercher..." / style="background-color: #EFE6C5; border:1px solid #DDB666;height:14px;">
<input type="image" style="vertical-align: top;" name="submit" src="http://geemee.hautetfort.com/images/aspire/ok-button.gif" onclick="window.location = 'search/'+this.form.elements['keyword'].value;" class="search_button"/ >
</form>

Vous n'avez plus qu'à réviser vos propriétés de bordure et d'arrière-plan en Css, puis faire une belle image pour avoir un formulaire qui vous convienne sur la forme.

La prochaine fois nous verrons comment ajouter et personnaliser un moteur de recherche Google.

19.03.2010

Créer une page de contact avec PollDaddy ?

Alexandra postait mardi 16 mars dernier une note "Des formulaires sur son blog, grâce à Polldaddy", qui nous permet de disposer d'un outil supplémentaire pour pallier une carence : le formulaire de contact.

Je vais regarder dans le détail la mise en place d'un tel formulaire, comme je l'avais fait l'été dernier avec EmailMeForm.

Le feuilleton avait commençé ici, et l'ensemble des notes avait été réuni dans un document à consulter et ou télécharger sur Scribd et ou Calameo.

10:03 Écrit par Gee Mee dans Boîte à outils | Lien permanent | Commentaires (0) | Tags : formulaire, contact, emailmeform, polldaddy | |  del.icio.us | | Digg! Digg |  Facebook

01.09.2009

Créer une page de contact : le manuel à télécharger

Épilogue du dernier feuilleton de l'été sur ce blog, vous pouvez maintenant retrouver l'ensemble des notes consacrées à la mise en place d'une page de contact avec un formulaire EmailMeForm dans un unique document à télécharger.

Au-delà, de l'impérieuse nécessité qu'il y avait à réunir ces indispensables notes, l'exercice valait pour la prise de contact avec deux plateformes de partage de fichiers. Le temps de préparation du PDF partagé ayant dangereusement flirté avec la limite de celui qui m'est imparti, je me contenterai aujourd'hui de vous montrer le résultat de l'intégration des deux lecteurs dans une note.

La plateforme Scribd.com est sans doute la plus connue des deux, et vous avez certainement déjà croisé des lecteurs de ce genre dans des notes, notamment chez RGPPJS.

Créer une page de contact avec emailmeform sur un blog hautetfort

J'ai récemment découvert Calameo.com, qui a le grand avantage d'être disponible en français. Je vous proposerai une présentation comparée dès que possible.

 

Si vous avez raté le début, le feuilleton a commençé ici.

15:17 Écrit par Gee Mee dans Boîte à outils | Lien permanent | Commentaires (2) | Tags : formulaire, contact, emailmeform, scribd, calaméo | |  del.icio.us | | Digg! Digg |  Facebook

28.08.2009

Créer une page de contact : le message et le code

Si nous résumons l'épisode précédent, nous avons mis en forme notre formulaire à partir de l'interface d'EmailMeForm. Nous allons maintenant paramétrer les messages qui seront générés par le formulaire, et récupérer le code.

Il était temps de reprendre notre feuilleton, un moment suspendu. Si l'interface du site s'est effectivement améliorée, le fonctionnement reste identique et les anciennes captures d'écran peuvent rester en attendant que je les refasses. Vous ne serez pas perdus.

Voyons maintenant comment « Expéditeur », « objet », « copie », « préparation de l'utilisation des données de formulaire » sont autant de paramètres sur lesquels vous pouvez intervenir, pour que la solution d'EmailMeForm corresponde à vos besoins les plus précis. Ensuite, nous récupérerons le code du formulaire.

 

EmailMeForm-creation-0507-message.jpgMessage From ou Message de. Vous pouvez demander à ce que le message généré par le formulaire ait pour expéditeur EmailMeForm, ou le nom et l'adresse de l'utilisateur du formulaire. Je vous conseille de garder le site, notamment pour ne pas retrouver aléatoirement des messages dans la corbeille parce que votre anti-virus n'aurait pas reconnu l'expéditeur. Quand l'adresse d'EmailMeForm aura été déclarée fiable par vos soins, tous les messages passeront.

Message subject ou Objet ou Titre du message. Là encore vous pouvez utiliser le nom de votre formulaire ou le texte écrit par le visiteur dans l'un des champs. Logiquement ce serait « sujet », mais vous pouvez utiliser n'importe quel champs. Si vous avez plusieurs formulaires, je vous conseille d'utiliser le paramètre Form name, qui facilitera le classement des messages.

Send copy to sender, ou envoyer une copie à l'expéditeur. On peut envoyer une copie à l'expéditeur, mais il faut bien faire attention à ce que l'expéditeur déterminé plus haut ne soit pas le site d'EmailMeForm lui-même.

Include data for export, ou inclure les données pour export. Cela ne vous sera pas tellement utile pour un simple formulaire de contact, à moins de vouloir établir des statistiques. Pour un sondage, un concours, vous pouvez utiliser un formulaire EmailMeForm pour obtenir des données que vous exploiterez vous-même dans un tableur.

EmailMeForm-creation-0607-previsualisation.jpgQuand vous aurez validé ces choix, vous aurez accès à une prévisualisation de votre formulaire. Il est toujours temps de revenir en arrière avec le bouton [Back] et reconsidérer certains de vos choix. Certains aspects de mise en forme, et le texte de la « vérification d'image » ne pourront être modifiés qu'après la récupération du code.

Quand vous avez un projet de formulaire qui vous convient, vous cliquez enfin sur le bouton [finish]

EmailMeForm-creation-0707-confirmation.jpgLe site vous confirme la création du formulaire, mais il vous reste à récupérer le code pour pouvoir l'intégrer dans votre page. Le premier lien hypertexte vous permet de tester le fonctionnement en conditions réelles avant même l'intégration.

Dessous, vous trouvez la phrase [Click here to get the Html code], et donc forcément, vous allez cliquer. C'est pas le moment de flancher.

EmailMeForm-creation-08-get-html-code.jpgMais il avait dit que c'était gratuit non ?


Je maintiens. On ne vous demande de l'argent que pour récupérer le code HTML et le code PHP, le vrai code actif, celui qui fait mouvoir les robots de messagerie. Sur une plateforme de blog, vous n'en avez pas besoin.

Vous copiez donc le code, et vous l'intégrez dans une note



Pour intégrer le formulaire :

- Dans la note, positionner le curseur où se situera le formulaire.
- Cliquer sur le bouton avec la note et un haut-parleur [Insérer un fichier multimédia]
- Cliquer sur l'onglet [code embed]
- Dans la zone "Insérer le code de l'embed" coller le code obtenu chez EmailMeForm
- Valider en cliquant sur [Valider]
- De retour dans votre note, vous voyez le formulaire et vous pouvez en peaufiner la présentation.

C'est ce que j'ai du faire pour le formulaire de la page À propos, dont l'apparence d'origine est la suivante


Votre nom
Votre adresse électronique
Votre blog ou site
Sujet de votre message
Votre message
Image Verification
Please enter the text from the image:
[ Refresh Image ] [ What's This? ]

Je prévois un épilogue, mais vous avez déjà tout ce qu'il faut pour vous lancer.

Le feuilleton a commençé ici, et l'ensemble des notes a été réuni dans un document PDF à téléchager

14:31 Écrit par Gee Mee dans Boîte à outils | Lien permanent | Commentaires (0) | Tags : formulaire, contact, emailmeform | |  del.icio.us | | Digg! Digg |  Facebook

25.08.2009

Créer une page de contact : Suspension du feuilleton

EmailMeForm est en train de subir des améliorations "majeures", et de se voir attribuer un design "beaucoup mieux que le vieux"... Et mon feuilleton s'en trouve obsolète avant même d'avoir été terminé... Vous m'accordez un délai ?

Le feuilleton a commençé ici, et l'ensemble des notes a été réuni dans un document PDF à téléchager

---------- Forwarded message ----------
From: EmailMeForm <office@emailmeform.com>
Date: 2009/8/25
Subject: Gee, Notice of Improvements to Emailmeform's Server...
To: Gee Mee

Hello Gee,

Note: You are receiving this email because you have account with www.Emailmeform.com ( owning x forms , username: Gee Mee ). To cancel or unsubscribe please see bottom of this email.

We know your time is precious, so we will keep this short.

Lire la suite

12:56 Écrit par Gee Mee dans Boîte à outils | Lien permanent | Commentaires (2) | Tags : formulaire, contact, emailmeform | |  del.icio.us | | Digg! Digg |  Facebook

21.08.2009

Créer une page de contact pour votre blog Hautetfort - 4 - Mettre en forme

Si nous résumons l'épisode précédent, nous avons choisi nos champs et les avons organisé, nous reste maintenant la mise en forme du formulaire par l'intermédiaire d'EmailMeForm. Il sera possible, et parfois nécessaire, de modifier certains éléments via l'éditeur Hautetfort.

Pour vous éviter de mettre les mains dans le code du formulaire, et de créer un décalage entre le code stocké chez EmailMeForm pour vous, et celui qui est effectivement intégré dans vos pages, je vous conseille de personnaliser autant que possible lors de cette étape.

Lire la suite

16:17 Écrit par Gee Mee dans Boîte à outils | Lien permanent | Commentaires (0) | Tags : formulaire, contact, emailmeform | |  del.icio.us | | Digg! Digg |  Facebook

18.08.2009

Créer une page de contact pour votre blog Hautetfort - 3 - Organiser les champs

Si nous résumons l'épisode précédent, nous nous sommes inscrits, et nous avons publié une note qui fera office de page de remerciement. Nous nous sommes quittés en rase campagne, en plein champs, aussi nous consacrerons nous aujourd'hui aux différents types, et à leur organisation.

Par défaut le formulaire propose quatre champs de texte, dont l'un possède plusieurs lignes pour le corps de votre message. Vous avez bien d'autres choix, tant dans la quantité que dans la qualité. Vous trouverez ci-dessous un formulaire exploitant tout que vous avez déjà croisé par ailleurs.

Lire la suite

18:40 Écrit par Gee Mee dans Boîte à outils | Lien permanent | Commentaires (0) | Tags : formulaire, contact, emailmeform | |  del.icio.us | | Digg! Digg |  Facebook

14.08.2009

Créer une page de contact pour votre blog Hautetfort - 2

Nous avons trouvé en EmailMeForm une solution de formulaire à intégrer aux pages web pour proposer de laisser un message sans obligatoirement faire apparaître l'adresse du destinataire. Même pour faire fonctionner le très basique forumlaire de l'épisode précédent, il faut d'abord s'inscrire, et savoir remercier.

Je n'ai pas de prévention particulière à l'encontre d'EmailMeForm mais je n'ai pas de parts sociales non plus. Je n'arrive pas à soupçonner le site de collecter les adresses à des fins « inappropriées », mais si quelqu'un dispose d'informations incitant à la méfiance, qu'il n'hésite pas à en faire état. Par ailleurs, il existe peut-être une solution équivalente en français ; si une bonne âme en venait à me la faire connaître, j'en assurerais sûrement la promotion.

Lire la suite

12:21 Écrit par Gee Mee dans Boîte à outils | Lien permanent | Commentaires (0) | Tags : formulaire, contact, emailmeform | |  del.icio.us | | Digg! Digg |  Facebook

11.08.2009

Créer une page de contact pour votre blog Hautetfort - 1

C'est le nouveau feuilleton de l'été sur ce blog pour pallier l'une des carences de la plateforme : le formulaire de contact. Vous hésitez à mettre votre adresse en direct sur votre blog, mais vous voulez que l'on puisse vous envoyer un message ? Vous êtes au bon endroit.

Sans être extrêmement compliquée, la chose n'est pas si simple, en particulier pour ceux qui ne seraient pas très à l'aise avec l'anglais. Je remercie Soufiane de Leblogger d'avoir publié cet article qui m'a mis sur la voie. Je vous conseille d'ailleurs la lecture régulière de son blog, qui fourmille de solutions intéressantes, même si les mises en œuvre sont consacrées à Blogger & Blogspot.

Commençons par la fin, voici le résultat...

Lire la suite

11:02 Écrit par Gee Mee dans Boîte à outils | Lien permanent | Commentaires (6) | Tags : formulaire, contact, emailmeform, leblogger | |  del.icio.us | | Digg! Digg |  Facebook