Form

Luisa Fassino · 5 Apr 2012

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

Web Designer · 6 Apr 2012

Ciao, posta i due codici qui.

Vale2 · 6 Apr 2012

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 · 6 Apr 2012

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;
}

Luisa Fassino · 6 Apr 2012

Prova Form 2

Il secondo invece l'ho scaricato da qui (a parte le mie modifiche della parte grafica non riesco a farlo funzionare, qui pensavo bastasse aggiungere l'e-mail nel file php dove c'è scritto qui andrà inserito l'indirizzo e-mail, invece niente :-(
http://javascript.html.it/script/vedi/6768/un-contact-form-con-jquery-e-php/

Vale2 · 6 Apr 2012

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 · 6 Apr 2012

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 · 6 Apr 2012

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 · 10 Apr 2012

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...

borgo italia · 11 Apr 2012

ciao

Luisa Fassino ha scritto:
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...

ha il php

Luisa Fassino · 11 Apr 2012

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 · 11 Apr 2012

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 · 11 Apr 2012

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);
}
});
}

borgo italia · 11 Apr 2012

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 · 11 Apr 2012

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

Cerca

Cerca

Form

Luisa Fassino

Nuovo Utente

Web Designer

Utente Attivo

Vale2

Utente Attivo

Luisa Fassino

Nuovo Utente

Luisa Fassino

Nuovo Utente

Vale2

Utente Attivo

Luisa Fassino

Nuovo Utente

Vale2

Utente Attivo

Luisa Fassino

Nuovo Utente

borgo italia

Super Moderatore

Luisa Fassino

Nuovo Utente

borgo italia

Super Moderatore

Luisa Fassino

Nuovo Utente

borgo italia

Super Moderatore

Luisa Fassino

Nuovo Utente

Discussioni simili