Φορμα επικοινωνιας html

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
gotham78
Δημοσιεύσεις: 177
Εγγραφή: 22 Οκτ 2009 00:57

Φορμα επικοινωνιας html

Δημοσίευση από gotham78 » 27 Μάιος 2014 00:25

Καλησπέρα

Θέλω να φτιάξω μια φόρμα επικοινωνιας σε ένα αρχείο index.html. Βρήκα κάποιους κώδικες στο νετ που όμως λέει οτι και θέλει κομμάτι php (π.χ. http://www.123contactform.com/html-contact-form/). μπορώ να το βάλω στην html?

Βασικά θέλω μια φόρμα απλή που να βάζει κάποιος ονομα, επωνυμο, τηλεφωνο,μαιλ, μηνυμα και να μου ερχεται στο email.

Υ.Γ. Γίνεται στην φόρμα να έχω και ένα dropdown menu που ανάλογα την επιλογή να αλλάζει και ο παραλήπτης. Δηλαδή σε άλλον να πηγαίνει αν κάποιος επιλέγει "αποστολή άρθρου" και σε άλλον αν επιλέγει "παρατηρήσεις/παράπονα"
Εικόνα

geomagas
Δημοσιεύσεις: 667
Εγγραφή: 06 Απρ 2013 13:36
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

Φορμα επικοινωνιας html

Δημοσίευση από geomagas » 27 Μάιος 2014 01:08

gotham78 έγραψε:Βασικά θέλω μια φόρμα απλή που να βάζει κάποιος ονομα, επωνυμο, τηλεφωνο,μαιλ, μηνυμα και να μου ερχεται στο email.
Ε, για να σου έρχεται αυτό το mail, κάποιος θα πρέπει να σου το στείλει.
Χρειάζεται λοιπόν ένα σκριπτάκι στη μεριά του server (σε php) που θα ελέγχει αν η φόρμα έχει υποβληθεί και αν ναι, να στέλνει το mail.
Και να βγάζει κι ένα "Ευχαριστούμε για την επικοινωνία". Μην είμαστε αγενείς! :D
gotham78 έγραψε:Υ.Γ. Γίνεται στην φόρμα να έχω και ένα dropdown menu που ανάλογα την επιλογή να αλλάζει και ο παραλήπτης. Δηλαδή σε άλλον να πηγαίνει αν κάποιος επιλέγει "αποστολή άρθρου" και σε άλλον αν επιλέγει "παρατηρήσεις/παράπονα"
Ναι αμέ!

gotham78
Δημοσιεύσεις: 177
Εγγραφή: 22 Οκτ 2009 00:57

Φορμα επικοινωνιας html

Δημοσίευση από gotham78 » 27 Μάιος 2014 02:05

Λοιπον πήρα απο μια σελίδα έτοιμη φόρμα και πιστεύω οτι σε αυτή την γραμμή είναι το ζουμί.

Κώδικας: Επιλογή όλων

<form action="http&#58;//www.enasite.gr/en/save_form.asp" name="theForm" method="post" onsubmit="return echeck&#40;&#41;;">
Τι αρχείο πρέπει να φτιάξω εγώ και τι αλλαγή στο παραπάνω κώδικα πρέπει να κάνω?[/code]
Εικόνα

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Φορμα επικοινωνιας html

Δημοσίευση από alou » 27 Μάιος 2014 07:37

Η φόρμα επικοινωνίας έχει τουλάχιστον 2 και συνήθως 3 κομμάτια. Το πρώτο είναι η html που όσον αφορά τη φόρμα, ξεκινάει με κάτι παρόμοιο με αυτό που παρέθεσες. To σπάω για να καταλάβεις τι κάνει:

Κώδικας: Επιλογή όλων

<form action="path/file.php" 
το αρχείο php που θα πρέπει να υπάρχει και να παραλάβει τα στοιχεία των πεδίων κατά την αποστολή της φόρμας.

Κώδικας: Επιλογή όλων

name="theForm" method="post" 
το όνομα και η μέθοδος, post ή get, στο όνομα βάζεις ότι θες και αφήνεις το post

Κώδικας: Επιλογή όλων

onsubmit="return echeck&#40;&#41;;">
Αυτό είναι το όνομα μιας συνάρτησης που θα εκτελεστεί πριν γίνει η αποστολή, σε javascript, για να ελέγξει αν έχουν συμπληρωθεί τα πεδία που πρέπει.

Θα συνεχίσεις με τα πεδία που θες:

Κώδικας: Επιλογή όλων

<input type="text" name="onoma" placeholder="το όνομά σου">
κλπ, ένα κουμπί submit

Κώδικας: Επιλογή όλων

<input type="submit" value="Στείλτο">
και θα κλείσεις τη φόρμα

Κώδικας: Επιλογή όλων

</form>
Μετά πρέπει να φτιάξεις και τα άλλα δυο κομμάτια, της php και της javascript αν θες να κάνεις validate πριν την αποστολή.

Στην php θα παραλάβεις τα πεδία μέσω της $_POST['onoma input'] και θα τα χρησιμοποιήσεις για να στείλεις το email.

gotham78
Δημοσιεύσεις: 177
Εγγραφή: 22 Οκτ 2009 00:57

Φορμα επικοινωνιας html

Δημοσίευση από gotham78 » 03 Ιουν 2014 01:29

Λοιπον κατέβασα αυτο το αρχειο απο δω http://www.quackit.com/html/codes/html_ ... _email.cfm και θα το διαμορφώσω αναλογα.

Απλα μια ερώτηση. Στo php η μονη αλλαγή (εκτος το email) είναι να αλλάξω τα πεδια που εχει και να βαλω όλα τα πεδία της φόρμας?

Εμένα τα πεδία της φορμας είναι

Κώδικας: Επιλογή όλων

<input type="text" name="u_lastname" size="30">
<input type="text" name="u_firstname" size="30">
<input type="text" name="u_city" size="30">
κλπ κλπ κλπ

Αρα αντί

Κώδικας: Επιλογή όλων

$email_address = $_REQUEST&#91;'email_address'&#93; ;
$comments = $_REQUEST&#91;'comments'&#93; ;


πρεπει να βαλω τα δικά μου έτσι π.χ. ????

Κώδικας: Επιλογή όλων

$Lastname = $_REQUEST&#91;'u_lastname'&#93; ;
$firstname = $_REQUEST&#91;'u_firstname'&#93; ;
$city = $_REQUEST&#91;'u_city'&#93; ;
Εικόνα

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Φορμα επικοινωνιας html

Δημοσίευση από alou » 03 Ιουν 2014 10:27

Ναι, και ειδικά αν είναι να τα καταχωρίσεις στη βάση, πρέπει να τα κάνεις sanitize οπωσδήποτε.

Άβαταρ μέλους
webgift
Δημοσιεύσεις: 50
Εγγραφή: 25 Απρ 2012 23:49
Επικοινωνία:

Φορμα επικοινωνιας html

Δημοσίευση από webgift » 03 Ιουν 2014 11:10

Μην εμπιστεύεστε κανένα ειδικά όταν πρόκειται για καταχώρηση από φόρμα. Αυξήστε δραματικά τους ελέγχους μετά την υποβολή της φόρμας και πριν την καταχώρηση στην βάση. Εδώ έχουμε έναν μικρό και χρήσιμο οδηγό στα αγγλικά: http://www.elxis.org/eblog/evolution/trust-no-one.html

gotham78
Δημοσιεύσεις: 177
Εγγραφή: 22 Οκτ 2009 00:57

Φορμα επικοινωνιας html

Δημοσίευση από gotham78 » 03 Ιουν 2014 15:06

Εκει που νομιζα οτι ημουν σχεδον ετοιμος, παω παλι στο μηδεν. ποια βαση? ενα απλο html ειναι. Πρεπει να φτιαξω και βαση?
Εικόνα

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Φορμα επικοινωνιας html

Δημοσίευση από alou » 03 Ιουν 2014 15:34

Τα στοιχεία που κάνει submit τι γίνονται? κοίτα, υπάρχουν τρύπες στα submit, πρέπει να τα "αποστειρώνεις" ανάλογα με τη χρήση τους.

Όχι, δεν χρειάζεται βάση, η ερώτηση ήταν ΑΝ τα εισάγεις σε βάση.

Άβαταρ μέλους
webdevgr
Δημοσιεύσεις: 709
Εγγραφή: 11 Δεκ 2010 17:25
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Φορμα επικοινωνιας html

Δημοσίευση από webdevgr » 03 Ιουν 2014 15:48

Φόρμα επικοινωνίας θέλει το παλικάρι τι το μπερδεύετε με βάσεις; :)

Θα χρειαστείς όμως κάποιον έλεγχο τύπου captcha για να μη σε βομβαρδίσουν με spam τα ρομποτάκια

Άβαταρ μέλους
webgift
Δημοσιεύσεις: 50
Εγγραφή: 25 Απρ 2012 23:49
Επικοινωνία:

Φορμα επικοινωνιας html

Δημοσίευση από webgift » 03 Ιουν 2014 17:18

2 είναι οι επιλογές είτε τα υποβληθέν στοιχεία τα στέλνεις στην βάση ή με mail σε έναν παραλήπτη.
Το θέμα των ελέγχων είναι σημαντικό ανεξάρτητα που στέλνονται.

gotham78
Δημοσιεύσεις: 177
Εγγραφή: 22 Οκτ 2009 00:57

Φορμα επικοινωνιας html

Δημοσίευση από gotham78 » 03 Ιουν 2014 18:56

Λοιπον. απο τον παραπανω κωδικαθελω να στελνω τα στοιχεια σε email. Ας φτιαξω αυτο για αρχη να τεςταρω οτι οντως μου ερχονται τα email και μετα ενσωματωνω και ενα captcha.
Εικόνα

gotham78
Δημοσιεύσεις: 177
Εγγραφή: 22 Οκτ 2009 00:57

Φορμα επικοινωνιας html

Δημοσίευση από gotham78 » 03 Ιουν 2014 22:17

Λοιπον η φόρμα μου είναι αυτή και την έχω στο root του site. Τα άλλα αρχεία του παραδείγματος τα έβαλα σε υποφάκελο /forms. Δοκίμασα να στειλω email αλλά επανερχεται στην σελιδα επικοινωνιας. Κοιτάω τα email μου και δεν έχει έρθει κάτι.


Αυτή είναι η φόρμα

Κώδικας: Επιλογή όλων

<form action="http&#58;//www.mysites.gr/forms/sendem.php" name="theForm" method="post" onsubmit="return echeck&#40;&#41;;">
                            <table width="633" align="center">
                                <tbody><tr>
                                    <td colspan="8" align="left" class="insidetext1">
                                        <br>
                                  
                                        <h1>
                                            Ζητήστε Πληροφορίες.</h1>
                                        <br>
                                  
                                    </td>
                                </tr>
                                <tr>
                                    <td height="20" align="right" class="insidetext1">
                                        <div align="right">
                                            Eπώνυμο&#58;</div>
                                    </td>
                                    <td width="196" align="right" class="insidetext1">
                                        <div align="left">
                                            <input type="text" name="u_lastname" size="30">
                                            *
                                        </div>
                                    </td>
                                    <td align="right" class="insidetext1">
                                        <div align="right">
                                            <div align="right">
                                                Πόλη</div>
                                        </div>
                                    </td>
                                    <td width="235" colspan="5" align="right" class="insidetext1">
                                        <div align="left">
                                            <input type="text" name="u_city" size="30">
                                            *</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="20" align="right" class="insidetext1">
                                        <div align="right">
                                            Όνομα&#58;</div>
                                    </td>
                                    <td align="right" class="insidetext1">
                                        <div align="left">
                                            <input type="text" name="u_firstname" size="30">
                                            *</div>
                                    </td>
                                    <td align="right" class="insidetext1">
                                        <div align="right">
                                            T.K.&#58;</div>
                                    </td>
                                    <td colspan="5" align="right" class="insidetext1">
                                        <div align="left">
                                            <input type="text" name="u_zipCode" size="30" maxlength="8" onkeydown="return CheckKeyCode&#40;&#41;">
                                            *
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="20" align="right" class="insidetext1">
                                        <div align="right">
                                            Επάγγελμα/Ιδιότητα&#58;</div>
                                    </td>
                                    <td align="right" class="insidetext1">
                                        <div align="left">
                                            <input type="text" name="u_occupation" size="30">
                                        </div>
                                    </td>
                                    <td align="right" class="insidetext1">
                                        <div align="right">
                                            Τηλέφωνο&#58;</div>
                                    </td>
                                    <td colspan="5" align="right" class="insidetext1">
                                        <div align="left">
                                            <input type="text" name="u_phone" size="30" maxlength="10" onkeydown="return CheckKeyCode&#40;&#41;">
                                            *</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="20" align="right" class="insidetext1">
                                        <div align="right">
                                            Εταιρεία&#58;</div>
                                    </td>
                                    <td align="right" class="insidetext1">
                                        <div align="left">
                                            <input type="text" name="u_company" size="30">
                                        </div>
                                    </td>
                                    <td align="right" class="insidetext1">
                                        <div align="right">
                                            Email&#58;</div>
                                    </td>
                                    <td colspan="5" align="right" class="insidetext1">
                                        <div align="left">
                                            <input type="text" name="u_email" size="30">
                                            *
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="20" align="right" class="insidetext1">
                                        <div align="right">
                                            Διεύθυνση&#58;</div>
                                    </td>
                                    <td align="right" class="insidetext1">
                                        <div align="left">
                                            <input type="text" name="u_address" size="30">
                                            *</div>
                                    </td>
                                    <td align="right" class="insidetext1">
                                        &nbsp;</td>
                                    <td colspan="5" align="right" class="insidetext1">
                                        <div align="left">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="164" height="52" align="right" valign="top" class="insidetext1">
                                        <div align="right">
                                            Μήνυμα&#58;
                                        </div>
                                    </td>
                                    <td align="right" valign="top" class="insidetext1">
                                        <div align="left">
                                            <textarea name="u_message" rows="3" cols="30" class="insidetext1"></textarea>
                                        </div>
                                    </td>
                                    <td align="right" valign="top" class="insidetext1">
                                        &nbsp;</td>
                                    <td colspan="5" align="right" valign="top" class="insidetext1">
                                        <div align="left">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="20" align="right" class="insidetext1">
                                        <div align="right">
                                            Επικοινωνία&#58;</div>
                                    </td>
                                    <td align="right" class="insidetext1">
                                        <div align="left">
                                            <font style="font-size&#58; 11px;" face="Arial, Helvetica, sans-serif">
                                                <input class="insidetext1" type="radio" checked="" name="u_contactAccept" value="yes" style="background-image&#58; none; border&#58; 0px;" onclick="document.getElementById&#40;'inv2'&#41;.style.display='block';document.getElementById&#40;'inv2OFF'&#41;.style.display='none'">
                                                &nbsp;&nbsp;Ναι &nbsp;&nbsp;&nbsp;
                                                <input type="radio" name="u_contactAccept" value="no" style="background-image&#58; none;
                                                    border&#58; 0px" onclick="document.getElementById&#40;'inv2'&#41;.style.display='none';document.getElementById&#40;'inv2OFF'&#41;.style.display='block'">
                                                Όχι &nbsp;</font> **</div>
                                    </td>
                                    <td align="right" class="insidetext1">
                                        &nbsp;</td>
                                    <td colspan="5" align="right" class="insidetext1">
                                        <div align="left">
                                            <!--Ναι <input type="radio"  name="u_contactAccept" value="Yes" checked /> Όχι<input type="radio"  name="u_contactAccept"  value="No" />-->
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="20" align="right" class="insidetext1">
                                        <div align="right">
                                            Τρόπος Επικοινωνίας&#58;</div>
                                    </td>
                                    <td align="right" class="insidetext1">
                                        <div align="left">
                                            <select name="contactType">
                                                <option>Όλα</option>
                                                <option>Email</option>
                                                <option>Τηλέφωνο</option>
                                                <option>Ταχυδρομείο</option>
                                            </select>
                                    </div></td>
                                    <td align="right" class="insidetext1">
                                        &nbsp;</td>
                                    <td colspan="5" align="right" class="insidetext1">
                                    </td>
                                </tr>
                                <tr>
                                    <td height="41" colspan="8" valign="top" class="insidetext1">
                                        <div align="center">
                                            <input name="submit2" type="image" src="./plirofories_files/keyboard_buttonSend1.gif" onclick="return validateForm&#40;&#41;" onmouseover="this.src='keyboard_buttonSend2.gif'" onmouseout="this.src='keyboard_buttonSend1.gif'" value="Αποστολή" style="padding&#58; 0px;">
                                            <input name="reset2" type="image" src="./plirofories_files/keyboard_buttonCancel1.gif" onclick="return validateForm&#40;&#41;" onmouseover="this.src='keyboard_buttonCancel2.gif'" onmouseout="this.src='keyboard_buttonCancel1.gif'" class="insidetext3" value="Ακύρωση" style="padding&#58; 0px;">
                                            <!-- <input type="button" class="insidetext3" onClick="validateForm&#40;&#41;" value="Αποστολή">
                      <input name="reset2" type="reset" class="insidetext3" value="Ακύρωση">-->
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="26" colspan="8" valign="top" class="insidetext1">
                                        <font size="1" face="Arial, Helvetica, sans-serif">*Υποχρεωτικά πεδία<br>
                                </font>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="26" colspan="8" valign="top" class="insidetext1">
                                        <div align="center">
                                            <font face="Arial, Helvetica, sans-serif"></font>
                                        </div>
                                        <div align="left">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="8" valign="top" class="insidetext1">
                                        <div align="center">
                                        </div>
                                        <div align="center">
                                        </div>
                                    </td>
                                </tr>
                            </tbody></table>
                            <input type="hidden" name="form_type" value="1">
                        </form>
Και την έχω στο root http://mysite.gr/contact.html


Αυτό είναι το php που έκανα αλλαγές στο email και σε 2 πεδια που δοκίμασα.

Κώδικας: Επιλογή όλων

<?php
/*
This first bit sets the email address that you want the form to be submitted to.
You will need to change this value to a valid email address that you can access.
*/
$webmaster_email = "toemailmou@hotmail.com";

/*
This bit sets the URLs of the supporting pages.
If you change the names of any of the pages, you will need to change the values here.
*/
$feedback_page = "http&#58;//mysites.gr/contact.htm";
$error_page = "error_message.html";
$thankyou_page = "thank_you.html";

/*
This next bit loads the form field data into variables.
If you add a form field, you will need to add it here.
*/
$u_lastname = $_REQUEST&#91;'u_lastname'&#93; ;
$u_firstname = $_REQUEST&#91;'u_firstname'&#93; ;

/*
The following function checks for email injection.
Specifically, it checks for carriage returns - typically used by spammers to inject a CC list.
*/
function isInjected&#40;$str&#41; &#123;
	$injections = array&#40;'&#40;\n+&#41;',
	'&#40;\r+&#41;',
	'&#40;\t+&#41;',
	'&#40;%0A+&#41;',
	'&#40;%0D+&#41;',
	'&#40;%08+&#41;',
	'&#40;%09+&#41;'
	&#41;;
	$inject = join&#40;'|', $injections&#41;;
	$inject = "/$inject/i";
	if&#40;preg_match&#40;$inject,$str&#41;&#41; &#123;
		return true;
	&#125;
	else &#123;
		return false;
	&#125;
&#125;

// If the user tries to access this script directly, redirect them to the feedback form,
if &#40;!isset&#40;$_REQUEST&#91;'email_address'&#93;&#41;&#41; &#123;
header&#40; "Location&#58; $feedback_page" &#41;;
&#125;

// If the form fields are empty, redirect to the error page.
elseif &#40;empty&#40;$email_address&#41; || empty&#40;$comments&#41;&#41; &#123;
header&#40; "Location&#58; $error_page" &#41;;
&#125;

// If email injection is detected, redirect to the error page.
elseif &#40; isInjected&#40;$email_address&#41; &#41; &#123;
header&#40; "Location&#58; $error_page" &#41;;
&#125;

// If we passed all previous tests, send the email then redirect to the thank you page.
else &#123;
mail&#40; "$webmaster_email", "Feedback Form Results",
  $comments, "From&#58; $email_address" &#41;;
header&#40; "Location&#58; $thankyou_page" &#41;;
&#125;
?>
Τι κάνω λάθος???
[/code]
Εικόνα

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Φορμα επικοινωνιας html

Δημοσίευση από alou » 04 Ιουν 2014 11:30

Στη φόρμα σου, υπάρχει αυτό:

Κώδικας: Επιλογή όλων

<form action="..." ... onsubmit="return echeck&#40;&#41;;"> 
που σημαίνει ότι πρέπει να βρει ένα javascript function με όνομα echeck() και αν επιστρέψει true να γίνει submit η φόρμα.

Επειδή μάλλον δεν υπάρχει, δεν το βρίσκει και υπάρχει προφανώς σφάλμα. Το βγάζεις (όλο το κομμάτι onsubmit="..." ) και ξαναδοκιμάζεις.

gotham78
Δημοσιεύσεις: 177
Εγγραφή: 22 Οκτ 2009 00:57

Φορμα επικοινωνιας html

Δημοσίευση από gotham78 » 04 Ιουν 2014 15:32

alou έγραψε:Στη φόρμα σου, υπάρχει αυτό:

Κώδικας: Επιλογή όλων

<form action="..." ... onsubmit="return echeck&#40;&#41;;"> 
που σημαίνει ότι πρέπει να βρει ένα javascript function με όνομα echeck() και αν επιστρέψει true να γίνει submit η φόρμα.

Επειδή μάλλον δεν υπάρχει, δεν το βρίσκει και υπάρχει προφανώς σφάλμα. Το βγάζεις (όλο το κομμάτι onsubmit="..." ) και ξαναδοκιμάζεις.
Ωραια θα το δοκιμασω το βραδυ γιατι δεν ειμα στο pc. Σβηνω μονο το

Κώδικας: Επιλογή όλων

onsubmit="return echeck&#40;&#41;;"
οκ?

Το php ειναι ενταξει?
Εικόνα

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες