Background et zone de saisi

Bonjour,

Débutant en conception web, j'ai utilisé CoffeeCup Web Form Builder pour créer un formulaire de contact.
Je ne trouve néanmoins pas le moyen de mettre une image (background) dans les 3 parties de saisi de mon formulaire (nom, email, et message).

Il y a 6 fichiers dans mon formulaire:

- swfobject.js
- new.xml
- new.swf
- new.php
- new.html
- Contact.css

Je ne sais pas dans quel fichier je dois faire une modification pour avoir ce backgroud.
Merci de me demander quel code je dois vous afficher...

Merci aussi pour vos réponses...

Bonjour,
Je dirais dans le css mais comme on n'a pas accès a tes fichiers... dur de le déterminer !

Voici donc mon CSS:

html {
margin:0;
padding:0;
background: url(Images/bg2.jpg) no-repeat center fixed; 
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */ 
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#fff;
}



#main_container{
width:902px;
height:auto;
margin:auto;
padding:0px;
}



/*---------------- menu tab----------------------*/
#menu_tab{
width:902px;
float:left;
padding:15px;
}

#header{
width:902px;
height:109px;
margin:auto;
padding:0 0 0 0;
background:url(images/top_menu_bg.png) no-repeat;behavior: url(iepngfix.htc);
background-position:center;
}

ul.menu {
list-style-type:none; display:block; width:630px; 
margin: auto; 
padding:90px 0 0 25px;
background:none;}

ul.menu li {
display:inline;
font-size:13px;
font-weight:bold;
line-height:28px;}

ul.menu li.divider {
display:block;
float:left;
width:1px;
height:31px;
padding:0px ;
margin:0px;
}

a.nav:link, a.nav:visited {
display:block; float:left; padding:0px; margin:0;width: auto; margin:0px 14px 0px 14px; text-align:center;
text-decoration:none; background:none; color:#fff;}

a.nav_selected:link, a.nav_selected:visited {
display:block; float:left; padding:0px; margin:0;width: auto;margin:0px 14px 0px 14px;text-align:center;
text-decoration:none; color: #E08040;}

a.nav:hover {
color: #E08040; text-decoration:none;}

/*----------------center_content----------------*/

#center_content{
width:902px;
float:left;
height:500px;
color:#fff;
}

#CC5819944{
width:580px;
margin:240px 0 0 0;
border-style:solid;
border-width:3px;
color:#000;
}

Modifié par valttt (15 Mar 2012 - 15:46)

Comme le XML ressemble au CSS pour la présentation, le voici aussi:

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

<form url="new.php"
 window="_self"
 method="POST"
 fontname="MS Sans Serif"
border="3"
 width="549"
 height="424"
 bkcolor="0xFFFFFF"
 transparent="t"
 fontcolor="0x000000"
 themecolor="0xFFFF99"
 fontcolor2="#000000"
 bkcolor2="#FFFFFF"
 includeresults="false"
 emailuser="true"
 verifymessage="The E-Mail address you entered does not match !"
 reqmessage="One or More Fields are Required"
 invalidemailmsg="is an invalid address, please correct it."
 transition="0"
 autoresponseincluderesults="f"
 autoresponseaddtotop="f"
 usephp="true"
 disableclicktoactiveprompt="true"
 extensions="*.txt;*.gif;*.jpg;*.jpeg;*.zip;*.doc;*.png;*.pdf;*.rtf"
>

<hidden
 name="subject"
 value="Message Autour de la Guitare"
></hidden>

<textinput
 name="name"
 x="179"
 y="43"
 w="324"
 h="22"
 initvalue=""
 bkcolor="0xFFFFFF"
  fontname="Arial"
  fontcolor="0x000000"
 editable="true"
>
</textinput>

<textinput
 name="Email Address"
 x="180"
 y="101"
 w="323"
 h="22"
 initvalue=""
 bkcolor="0xFFFFFF"
  fontname="Arial"
  fontcolor="0x000000"
 emailbox="true"
 editable="true"
  restrict="email"
>
</textinput>

<textarea
 name="comment"
 x="180"
 y="156"
 w="322"
 h="120"
 initvalue=""
 wordwrap="true"
 editable="true"
 bkcolor="0xFFFFFF"
  fontsize="12"
  fontname="Arial"
  fontcolor="0x000000"
></textarea>

<submitbutton
 name="Submit Button"
 x="340"
 y="332"
 w="160"
 h="40"
 label="send"
 fontname="Georgia"
 fontcolor="0x000000"
 image="envoyer.png"
  fontsize="12"
></submitbutton>

<label
 name="My Text 1"
 x="36"
 y="162"
 w="122"
 h="19"
 text="Votre Message:"
 fontbold="bold"
  fontname="Arial CE"
  fontcolor="0xFFFFFF"
  fontsize="16"
></label>

<label
 name="My Text 3"
 x="36"
 y="102"
 w="100"
 h="19"
 text="Votre Email :"
 fontbold="bold"
  fontname="Arial CE"
  fontcolor="0xFFFFFF"
  fontsize="16"
></label>

<label
 name="My Text 4"
 x="36"
 y="44"
 w="94"
 h="19"
 text="Votre Nom :"
 fontbold="bold"
  fontname="Arial CE"
  fontcolor="0xFFFFFF"
  fontsize="16"
></label>

<resetbutton
 name="Reset Button"
 x="50"
 y="333"
 w="160"
 h="40"
 label="Reset"
 fontname="Arial"
 fontcolor="0x000000"
 image="annuler.png"
  fontsize="12"
></resetbutton>

</form>

Par chance tu n'aurais pas un exemple en ligne ? En fait en voyant de CSS c'est dure de voir a quel balise il fait référence dans ton site... surtout si en plus c'est du code généré.

Je ne sais pas bien comment cela marche mais au moment d'éditer ton formulaire via CoffeCup Form Builder tu n'as pas pu modifier le style et mettre les images à ce moment ?

Merci Laurent pour ta réponse.

Non c'est du local pour l'instant. j'ai installer wamp pour pouvoir le tester en localhost et il fonctionne.
La seule modif que je veux y apporter, c'est ce background.

Si tu le souhaite, je peux afficher un autre fichier, mais je ne sais pas si cela pourra t'aider....

C'est dans les 2 "text input" que je veux le mettre:
- name="name"
- name="Email Address"

et dans le "textarea":
name="comment"

J'ai déja essayer de remplacer bkcolor="0xFFFFFF" par background-image:url(images/image_de_fond.jpg), mais tout disparait, les titres (nom, mail) et les champs de saisis...
Modifié par valttt (15 Mar 2012 - 16:11)

Il faudrait éventuellement le HTML alors...
Mais il serait bien d'avoir code généré de la page : une fois affichée sur ton navigateur > clic droit > "Code source de la page"

Le voilou...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="Contact.css" />
</head>
<body> 

<div id="main_container">
<div id="menu_tab">
<div id="header">                                     
                    <ul class="menu">
                    <li class="divider"></li>                                                                               
                         <li><a href="Accueil.html" class="nav"> Accueil </a></li>                                           <li><a href="Photo.html" class="nav"> Photos_Videos </a></li>

                         <li><a href="Agenda.html" class="nav"> Agenda </a></li>
                         <li><a href="Forum.html" class="nav"> Forum </a></li>
                         <li><a href="espace.html" class="nav"> Espace Membres </a></li>
                         <li><a href="Contact.html" class="nav_selected"> Contact </a></li>
                    </ul>

</div>
</div>

<div id="center_content">


<center>
<script type="text/javascript" src="swfobject.js"></script><div id="CC5819944">Form Object</div><script type="text/javascript">var so = new SWFObject("new.swf", "new.xml", "549", "424", "7,0,0,0", "#ffffff");so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");so.addParam("quality", "high");so.addParam("scale", "noscale");so.addParam("salign", "lt");so.addParam("wmode", "transparent");so.addParam("FlashVars", "xmlfile=new.xml&w=549&h=424");so.write("CC5819944");</script> 
</center>

</div>
</div>
</body>
</html>

Bon bah désolé mais la...

<script type="text/javascript" src="swfobject.js"></script><div id="CC5819944">Form Object</div><script type="text/javascript">var so = new SWFObject("new.swf", "new.xml", "549", "424", "7,0,0,0", "#ffffff");so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");so.addParam("quality", "high");so.addParam("scale", "noscale");so.addParam("salign", "lt");so.addParam("wmode", "transparent");so.addParam("FlashVars", "xmlfile=new.xml&w=549&h=424");so.write("CC5819944");</script> 

C'est tendu ! A mon avis le plus simple est de le faire dès la création du formulaire avec l'outil...

valttt a écrit :
J'ai déja essayer de remplacer bkcolor="0xFFFFFF" par background-image:url(images/image_de_fond.jpg), mais tout disparait, les titres (nom, mail) et les champs de saisis...

Comme tu l'as remarqué c'est bien vers le :

 bkcolor="0xFFFFFF"

que ca bloque mais ce n'est pas du code css... ici ce sont des paramètres que ton fichier va interpréter donc ce que tu a fait n'a pas fonctionné.

Donc a mon avis le faire dès la création du formulaire via l'outil. Sinon il vaudrait mieux que tu post sur le forum de CoffeeCup Web Form Builder directement... (ou bien si quelqu'un d'autre plus compétent sur le sujet passe par ici...)

Désolé de n'avoir su t'aider ici

Bonne continuation

Merci tout de même d'avoir essayé...

Je ne peux pas le faire avec le logiciel car il ne me donne pas la possibilité de le faire. Je n'ai droit qu'à une couleur...
Je suppose qu'avec la version pro, je pourrais le faire mais je ne l'ai pas...

Bah pour avoir parcouru très rapidement le forum, le peu de sujet qui parlait de changer le background ne traitait que de la couleur.

Il y avait aussi un post qui suggérait d'avoir des images en fond dans un sujet pour les amélioration mais ça n'a pas du être pris en compte pour le moment..

Ils ont bien bloqué leur solution...

Sinon attaque toi à la création d'un formulaire avec un bon tutoriel c'est vraiment pas compliqué et tu pourras faire tout ce que tu veux avec.

Au plaisir

Merci, mais je débute, et malheureusement cela fait 4 jours que je suis là dessus.
J'ai essayer avec CréaForm, mais d'autre problème viennent.
Il n'y a qu'avec CoffeeCup que j'ai réussi à faire ce que je souhaitais, hormis le background.

J'ai aussi essayé avec des tutos divers sur le web, mais je n'y arrive pas...

En fait je souhaite quelque chose de relativement simple.
Avoir un Nom, une adresse Mail, et un Texte.
Le tout dans un cadre/tableau transparent et pour finir avec un background dans la zone de saisi...

Je pense que cela n'est pas beaucoup, mais pour un néophyte c'est pas facile !!!
Je persévère quand même...

Salut,

Si j'arrive à bien comprendre ce script, il génère un formulaire à partir du format FLASH, alors là ... bon courage.

Sinon, comme l'indique Laurent, le plus simple et se mettre à coder un tout petit peu tout seul, pour mieux comprendre ce qu'il se passe

Merci, mais je n'ai jamais écrit de programme ni de script, à par du html, et du CSS, mais à partir de script déjà créés. En fait, je n'ai fait que modifier...

Qui peut donc me conseiller pour trouver un tuto expliquant comment faire ce que je veux ?

J'ai utilisé celui là mais il ne fonctionne pas:http://www.mmt-fr.org/article75.html
J'en ai essayer d'autre mais je n'obtiens rien de fonctionnel.

Merci encore pour votre aide...

Si tu codes déjà en html / css le php va pas être bien dur.

Si tu veux t'y mettre commence par les bases :
http://www.siteduzero.com/tutoriel-3-14668-concevez-votre-site-web-avec-php-et-mysql.html
La partie 2 traite de l'envoie de donnée via formulaires. Intéresse toi un bon coup au php ça sera payant, mais surtout commence par les bases avant de vouloir directement coder un formulaire.

Merci, je vais essayer...