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:[email protected]">
            <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:[email protected]" 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.046
150
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 = "[email protected]";

//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.046
150
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
S passare un valore da un form a un file .php con metodo post PHP 4
K Form che manda dati doppi PHP 1
K Problema form update PHP 2
Elisacau [Contact form 7] Inserire Numero auto incrementante WordPress 1
K form Inserimento record mysql PHP 2
I Form con selettore HTML e CSS 0
K [php]form invio dati PHP 0
G form invio multiplo con checkbox PHP 12
nivaria.achinet Intercettare form solo dopo invio Javascript 1
D Form contatti non funzionante HTML e CSS 0
A Stampare dati da form PHP 8
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
I Form HTML e CSS 17
otto9due $_FILE non passa i dati dal form PHP 1
M Form: come tornare ai campi già compilati dopo invio PHP 1
G Invio form con PHP PHP 3
felino Form action costum e parametri in queryString WordPress 1
M Come recuperare molteplici input form PHP 1
M Collegamento tra form html e script php PHP 4
L form immagini per il database PHP 0
A form PHP prenotazione tramite query PHP 2
A Form php prenotazione di un azienda sanitaria locale presso studio medico PHP 1
L inserimento form dati multipli ? PHP 0
L Problemi form Pagina php HTML e CSS 3
Cosina Creare bottone delete in form upload PHP 5
Cosina Creare bottone delete in form upload PHP 1
D Devo far funzionare un form di contatti PHP 4
B form gestione input PHP 2
V PHP form intersecate PHP 0
8 Javascript - PDF Form Javascript 0
J Form inserimento dati in database Ajax 1
E Gestione profilo utente tramite Form PHP 3
R [C#] Form principale si blocca mentre un altro Thread lavora .NET Framework 0
M Problema con controllo form in real time jQuery 6
D Form validazione Javascript 2
R form recovery pass PHP 0
V Symfony e i form PHP 3
M form con checkbox PHP 8
S come aggiustare un form di contatto? HTML e CSS 3
F query e form con select multipla PHP 17
MarcoGrazia Verifica di una stringa o di un nome proveniente da form Snippet PHP 0
A Inserimento dati nel database tramite form + altre operazioni PHP 18
websilvia Contact form using Bootstrap 3.3.4 PHP 8
Alex_70 Button non funziona nella form PHP 2
C Form email php su pagina index.html? PHP 21
W Rinominare Documenti Con Form Asp Classic ASP 9
S Invio email da form PHP 8
L form multipla php sql,errore in inserimento MySQL 0
L inviare i dati di un form ad un database PHP 6
L Collegare un form html ad un database access Javascript 2

Discussioni simili