Form

Luisa Fassino

Nuovo Utente
5 Apr 2012
9
0
0
Ciao a tutti.

Sono nuova in ogni senso.
Ho fatto un corso base HTLM e CSS e una piccola integrazione di Javascript... Vorrei approfondire tutto e sapere tutto, ilché praticamente impossibile.

In questo momento mi sto concentrando su un semplice FORM di richiesta informazioni.

Ne ho fatti due esempi in HTML modificandoli in CSS (scopiazzando vari codici da Internet) ma non so nemmeno da che parte cominciare e né che linguaggio di programmazione usare per farli funzionare.
Qualcuno potrebbe darmi una mano? Se vi mandassi i file zippati di entrambi?

Grazie

Luisa
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,


il form riguarda la parte HTML

i CSS per la grafica e altre funzioni

javascript lo vuoi utilizzare per la gestione dei dati inseriti?


Valeria.
 

Luisa Fassino

Nuovo Utente
5 Apr 2012
9
0
0
Codice Form Prova 1

CODICE HTML (Form Prova 1)

HTML:
<title>Form Informazioni</title>
<link href="CSS/Stile Form.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form>
          <div class="box">
            <form method="post" action="mailto:info@italianwinetravels.it">
            <h1>Form Informazioni</h1>
            <label>
               <span>Nome e Cognome</span>
               <input type="text" class="input_text" name="name" id="name"/>
            </label>
             <label>
               <span>Email</span>
               <input type="text" class="input_text" name="email" id="email"/>
            </label>
             <label>
                <span>Oggetto</span>
                <input type="text" class="input_text" name="subject" id="subject"/>
            </label>
            <label>
                <span>Messagio</span>
                <textarea class="message" name="feedback" id="feedback"></textarea>
                <tr><td></td><td><input type=submit value="Invia i Dati"><input type=reset value="Annulla"></td></tr>
            </label>
         </div>
    </form>
</body>
CODICE CSS (Form Prova 1)

Codice:
*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}
form,input,select,textarea{margin:0; padding:0; color:#ffffff;}

div.box {
margin:0 auto;
width:500px;
background:#222222;
position:relative;
top:50px;
border:1px solid #262626;
}

div.box h1 { 
color:#ffffff;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712; 
}

div.box label {
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}

div.box label span {
display: block;
color:#bbbbbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}

div.box .input_text {
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}

div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}

div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}
 
Ultima modifica di un moderatore:

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,

il Forn 2 se non hai il supporto per PHP non puoi usarlo.

il primo ti apre il sistema di messaggistica che usi Outlook Outlook Express ecc... manca un tag enctype="text/plain" e ci sono due tag <form>:

Correttto:

Codice:
<title>Form Informazioni</title>
<link href="CSS/Stile Form.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!--<form>-->
          <div class="box">
            <form method="post" action="mailto:info@italianwinetravels.it" enctype="text/plain">
            <h1>Form Informazioni</h1>
            <label>
               <span>Nome e Cognome</span>
               <input type="text" class="input_text" name="name" id="name"/>
            </label>
             <label>
               <span>Email</span>
               <input type="text" class="input_text" name="email" id="email"/>
            </label>
             <label>
                <span>Oggetto</span>
                <input type="text" class="input_text" name="subject" id="subject"/>
            </label>
            <label>
                <span>Messagio</span>
                <textarea class="message" name="feedback" id="feedback"></textarea>
                <tr><td></td><td><input type=submit value="Invia i Dati"><input type=reset value="Annulla"></td></tr>
            </label>
         </div>
    </form>
</body>
Adesso se premi il tasto "Invia i Dati" tu apre la mail.

Per adesso non ho controllato il CSS.

Mancano i controlli sull'inserimento corretto dei dati richiesti.

Questo riguarda JavaScript.

Valeria.
 

Luisa Fassino

Nuovo Utente
5 Apr 2012
9
0
0
oh cavoli pensavo fosse più semplice.

Mi sarebbe piaciuto usare l'altro modello ma di php non ci capisco niente.

C'è un modo senza usare php per far si che i dati vengano inviati automaticamente?

Grazie mille per la disponibilità
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,

no puoi farlo solo con un linguaggio lato server PHP, ASP

Il tuo hoster non ha neppure il supporto per ASP?

Valeria
 

Luisa Fassino

Nuovo Utente
5 Apr 2012
9
0
0
Non credo.

Io ho comprato un dominio Hosting Windows da Aruba, ma quello base base da 27,00 mi pare l'anno, non so se comprende anche altre cose o a questo punto se si può aggiungere...
 

Luisa Fassino

Nuovo Utente
5 Apr 2012
9
0
0
Se ha il php quindi significa che quando testo il form in locale non funziona perché sono senza supporto ma se lo carico con il ftp potrebbe funzionare?


Quindi posso usare questo form? Basta inserire l'indirizzo e-mail corretto dove c'è scritto nel file mail.php qui andrà inserito l'indirizzo e-mail e il resto è corretto?

http://javascript.html.it/script/ved...-jquery-e-php/
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.039
146
63
PR
www.borgo-italia.it
ciao
dovresti postare tutto il codice che usi per vedere se funzia.
il codice dovrebbe essere parte in html (il form) e parte in php (l'invio).
il link che hai postato non funzia, da avviso di pagina rimossa
 

Luisa Fassino

Nuovo Utente
5 Apr 2012
9
0
0
HTML:
<!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" lang="it">
<head>
	<title>Form Info</title>
	<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery_mail.js"></script>
	</head>
<body>
<h1 align="center">RICHIESTA INFORMAZIONI</h1>
<form id="formail" method="post" action="">
	<div id="risposta">
	</div>
	<p align="center"><strong>Nome:</strong></p>
	<div align="center">
	  <input type="text" id="nome" name="nome"  value="" />
	  <br />
  </div>
	<p align="center"><strong>E-mail:</strong></p>
	<div align="center">
	  <input type="text" id="email" name="email"  value="" />
	  <br />
  </div>
	<p align="center"><strong>Oggetto:</strong></p>
	<div align="center">
	  <input type="text" id="oggetto" name="ogggetto"  value="" />
	  <br />
  </div>
	<p align="center"><strong>Messaggio:</strong></p>
	<div align="center">
	  <textarea id="messaggio" name="messaggio" rows="9" cols="20"></textarea>
	  <br />
	  <input type="submit" id="invia" name="invia" value="Invia" />
  </div>
  <form method=post action="mail.php"
</form>
<div align="center"><br />
  <br /><br /><br /><br /><br />
</body>
</html>
PHP:
<?php
//Recuperiamo tutte le variabili
$mail = $_POST['mail'];
$name = $_POST['name'];
$subject = $_POST['subject'];
$text = $_POST['messaggio'];
$ip = $_SERVER['REMOTE_ADDR'];

//Qui andrà inserito il tuo indirizzo e-mail
$to = "info@italianwinetravels.it";

//Creazione del mesaggio da inviare
$message = "Hai ricevuto una e-mail da: ".$name.", ".$mail.".<br />";
$message .= "Messaggio: <br />".$text."<br /><br />";
$message .= "IP: ".$ip."<br />";
$headers = "From: $mail \n";
$headers .= "Reply-To: $mail \n";
$headers .= "MIME-Version: 1.0 \n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1 \n";

//Se l'e-mail viene spedita correttamente, compare un messaggio di avvenuto invio
if(mail($to, $subject,$message, $headers)){
echo "<p>Messaggio inviato con successo</p>";
}
//Altrimenti un messaggio di errore
else{ 
echo "<p>Ci sono stati degli errori nell'invio della e-mail.</p>";
}
?>
Codice:
$(document).ready(function(){
$("#invia").click(function(){

//Recuperiamo tutte le variabili
var valid = '';
var isr = ' è richiesto.</p>';
var name = $("#nome").val();
var mail = $("#email").val();
var subject = $("#oggetto").val();
var messaggio = $("#messaggio").val();
//Eseguiamo una serie di controlli
if (name.length<1) {
valid += '<p>Un nome valido'+isr;
}
if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
valid += '<p>Un indirizzo e-mail valido'+isr;
}
if (subject.length<1) {
valid += '<p>Un oggetto valido'+isr;
}

//Se i controlli non vengono superati, appare il messaggio di errore.
if (valid!='') {
$("#risposta").fadeIn("slow");
$("#risposta").html("<p><b>Errore:</b></p>"+valid);
$("#risposta").css("background-color","#ffc0c0");
}
//Se i controlli vengono superati, compare un messaggio di invio in corso
else {
var datastr ='name=' + name + '&mail=' + mail + '&subject=' + subject + '&messaggio=' + encodeURIComponent(messaggio);
$("#risposta").css("display", "block");
$("#risposta").css("background-color","#FFFFA0");
$("#risposta").html("<p>Invio del messaggio in corso..</p>");
$("#risposta").fadeIn("slow");
setTimeout("send('"+datastr+"')",2000);
}
return false;
});
});
//Creazione della funzione di invio. Si baserà sul nostro file php "mail.php".
function send(datastr){
$.ajax({	
type: "POST",
url: "mail.php",
data: datastr,
cache: false,
success: function(html){
$("#risposta").fadeIn("slow");
$("#risposta").html(html);
$("#risposta").css("background-color","#e1ffc0");
setTimeout('$("#risposta").fadeOut("slow")',2000);
}
});
}
 
Ultima modifica di un moderatore:

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.039
146
63
PR
www.borgo-italia.it
ciao
visto così (se non hai fatto errori di copia incolla) dovrebbe funzionare il tutto.
devi caricare i tre file (l'html, il js ed il php) sul tuo spazio.

l'hai preso da qui? http://www.artedelweb.it/creiamo-un-bellissimo-contact-form-in-jquery-e-php/

l'unica cosa forse è una piccola modifica (di comodità, non funzionale) è mettere un ritorno nel file php in caso di invio ok o di invio errato

p.s.
quando posti codice racchiudilo tra gli appositi tag (barra formattazione del post - seconda riga - ultime tre iconcine, nell'ordine code htm php)
 

Luisa Fassino

Nuovo Utente
5 Apr 2012
9
0
0
OK!

Grazie mille!

Prima di leggere il tuo messaggio mi sono connessa per dirti che funge in realtà...

Ho fatto la prova di caricarlo online e in effetti il problema era solo che io non ho il supporto php per vederlo in locale ma online funzionava benissimo...

Per cui grazie mille e scusate ma mi ci è voluto un po' per capire...

PS L'ho preso da html.it e poi l'ho modificato con il css per adattarlo al sito in cui volevo inserirlo..

Ho ancora molto da lavorare :p