Créer un formulaire de contact en FLASH

Dans ce tuto, nous allons voir ensemble comment créer un formulaire dans FLASH, y attacher un fichier XML contenant les données nécessaires à cette application, un bout de CSS pour le style du "mailto" de contact, verifier le bon remplissage des champs et traiter ces données avec un fichier PHP renvoyant le contenu sur votre boite mail.
Nous utiliserons "Caurina.transition.tweener" pour les transitions via le code ActionScript (téléchargeable dans ce tuto).

Ce que nous allons réaliser

 


PS : la fonction d'envoi de ce formulaire d'exemple est bien evidemment désactivée  

 

Etape 1 : créons le fichier XML

Dans votre éditeur de code préféré, créer un nouveau document que nous enregistrerons au format .xml. Il sera nommé dans ce tuto "contact.xml". Libre à vous de modifier ce nom mais n'oubliez pas, dans ce cas, de reporter votre nouvelle dénomination dans le code ActionScript.
Ce fichier indiquera l'adresse Email à laquelle vous souhaitez recevoir les données saisie dans le formulaire par le visiteur de votre site, la denomination de l'image d'entete ainsi que le texte d'information (et sa mise en forme) présent sur le formulaire.

Ce qui nous donnera ce petit bout de code :

<?xml version="1.0" encoding="utf-8"?>

<contacts>

<settings
yourEmailAddress =
"[email protected]"
imagePath = "image.png"
url = "#"
/>

<textBox><![CDATA[<font size="20" color="#000000">Plus d'infos</font>
<br><br>
<font size=
"14" color="#000000">Entrez votre texte ici.<br><br>Et n'hesitez pas à ajouter les commentaires qui vous parraissent adequats.<br><br>Tel: 00 11 00 11 00<br></font>
<br><br><br><br>
<A href=
"[email protected]">[email protected]</a>]]></textBox>
</contacts>

Enregistrer ce fichier .xml dans le meme dossier que celui qui contiendra votre formulaire et passons à la suite.

 

Etape 2 : créons le fichier PHP

Créons maintenant notre fichier PHP ayant pour fonction de traiter et transmettre les données saisie par l'utilisateur vers votre boite mail. Nous le nommerons tout simplement "email.php".

Ce fichier contiendra les lignes de code suivantes :

<?php

$send_to = $_POST['sendTo'];
$contact_name = $_POST['name'];
$contact_email = $_POST['email'];
$contact_subject = $_POST['subject'];
$contact_message = $_POST['message'];

if( $contact_name == true )
{
$sender = $contact_email;
$receiver = $send_to;
$client_ip = $_SERVER['REMOTE_ADDR'];
$email_body = "Name: $contact_name \nEmail: $sender \nSubject: $contact_subject \nMessage: $contact_message \nIP: $client_ip ";
$extra = "From: $sender\r\n" . "Reply-To: $sender \r\n" . "X-Mailer: PHP/" . phpversion();

if( mail( $receiver, "Formulaire de contact en flash - $contact_subject", $email_body, $extra ) )
{
echo "status=success";
}
else
{
echo "status=fail";
}
}

?>

Enregistrer ce fichier .php dans le meme dossier que celui qui contiendra votre formulaire et passons à la suite.

 

Etape 3 : un petit bout de CSS pour l'adresse mail de contact (facultatif)

Afin de rendre le survol de l'adresse mail de contact affichée dans les infos du formulaire, je lui assigne quelque ligne de CSS. Ceci n'est absolument pas obligatoire mais autant rendre l'utilisation de ce formulaire par votre visiteur la plus agréable possible. Ce fichier sera au format CSS et nommé "style.css".

a {
color: #000000;
text-decoration: underline;
}

a:hover {
color: #000000;
text-decoration: none;
}

Enregistrer ce fichier .php dans le meme dossier que celui qui contiendra votre formulaire et passons à la suite.

 

Etape 4 : préparons nos éléments avant de passer sur FLASH

Afin de faciliter et optimiser l'élaboration du formulaire sur FLASH Pro, je vous conseil de préparer les différents éléments donc nous aurons besoin :

  • votre image de fond de formulaire, nous utilisons ici une image au format .jpg d'une résolution de 800 x 420 pixels.
    Celle-ci :

  • Préparez votre image d'entete de formulaire, celle-ci intègre le texte et éventuellement le fond de celui-ci. Personnellement je n'ai pas mis de fond mais sachez que cette possibilité vous est ouverte afin de vous laisser toutes possibilitées de design final.
    nous utilisons dans ce tuto une image au format .png d'une résolution de 780 x 120 pixels.

    Celle-ci :

  • Télécharger le dossier "caurina" contenant les transitions Tweener, son contenu sera appellé dans le code ActionScript de notre formulaire Flash.
    Télécharger le ici
    , décompressez le dossier et placez le dossier "caurina" dans le dossier contenant votre formulaire.

Nous avons maintenant tous les éléments annexes à notre création, je vous invite à passer sur la page 2 afin d'élaborer ensemble le formulaire à proprement parler.