How to get HTML form sent through PHP

Question

I'm learning through making a website for my stepfather's hostel. It has a contact form with a calendar to select check in and out dates. I have used a lot of resources I've found online and have tried to make them work together, but I can't manage to make the form sendable. When I click the submit button with this code, it just shows me the contents of the PHP page. I was hoping someone can lead me or point out to me what am I doing wrong.

<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">         </script>
<script type="text/javascript">
jQuery(function($){
$.datepicker.regional['es'] = {
    closeText: 'Cerrar',
    prevText: '&#x3c;Ant',
    nextText: 'Sig&#x3e;',
    currentText: 'Hoy',
    monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
    'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
    'Jul','Ago','Sep','Oct','Nov','Dic'],
    dayNames: ['Domingo','Lunes','Martes','Mi&eacute;rcoles','Jueves','Viernes','S&aacute;bado'],
    dayNamesShort: ['Dom','Lun','Mar','Mi&eacute;','Juv','Vie','S&aacute;b'],
    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','S&aacute;'],
    weekHeader: 'Sm',
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['es']);
});    

$(document).ready(function() {
var date = new Date();
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();    
$("#llegada").datepicker({minDate: new Date(y, m, d), dateFormat: 'dd/mm/yy'});
$("#salida").datepicker({minDate: new Date(y, m, d), dateFormat: 'dd/mm/yy'});
 });
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#text {
position: absolute;
left: 282px;
top: 210px;
width: 616px;
height: 40px;
z-index: 1;
text-align: justify;
color: #87796D;
}
</style>
<script language="JavaScript" src="js/gen_validatorv31.js" type="text/javascript"></script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="text">
<form action="contact.php" method="post" enctype="text/plain" class="pure-form pure-form-stacked" >
<fieldset>
    <legend>Formulario de reserva</legend>

    <div class="pure-g">

        <div class="pure-u-1 pure-u-md-1-3">
            <label for="name">Nombre</label>
            <input id="name" class="pure-u-23-24" type="text">
        </div>

        <div class="pure-u-1 pure-u-md-1-3">
            <label for="email">E-Mail</label>
            <input id="email" class="pure-u-23-24" type="email" required>
        </div>

        <div class="pure-u-1 pure-u-md-1-3">
            <label for="phone">Teléfono</label>
            <input id="phone" class="pure-u-23-24" type="text">
        </div>

        <div class="pure-u-1 pure-u-md-1-3">
<label for="llegada">Check-in:</label>
<input class="pure-u-23-24" type="text" name="datepicker" id="llegada"/>
         </div>

        <div class="pure-u-1 pure-u-md-1-3">
<label for"salida"> Check-out:</label>
<input class="pure-u-23-24" type="text" name="datepicker" id="salida"/>
        </div>
             <div class="pure-u-1 pure-u-md-1-3">
            <textarea for="message" class="pure-input-23-24" placeholder="Mensaje opcional"></textarea>
            </div>       
</fieldset>
<button style="float:right;" type="submit" class="pure-button pure-button-primary">Enviar</button>
</form>
</div>
</body>
</html>

And for the contact.php page I'm using

<?php
if(!isset($_POST['submit']))
{
echo "error; you need to submit the form!";
}
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$phone = $_POST['phone'];
$llegada = $_POST['llegada'];
$salida = $_POST['salida'];
$message = $_POST['message'];

if(empty($name)||empty($visitor_email)) 
{echo "Por favor, completa los datos requeridos";
exit;}

if(IsInjected($visitor_email))
{echo "Bad email value!";
exit;}

$email_from = 'hostalsierragorda@gmail.com';//
$email_subject = "Mensaje del formulario de reserva";
$email_body = "Mensaje recibido de $name.\n".
          "\n $message".

$to = "hostalsierragorda@gmail.com";//<== update the email address
$headers = "From: $email_from \r\n";
$headers .= "Responder a: $visitor_email \r\n";

mail($to,$email_subject,$email_body,$headers);

header('Location: enviado.html');

function IsInjected($str)
{
$injections = array('(\n+)',
          '(\r+)',
          '(\t+)',
          '(%0A+)',
          '(%0D+)',
          '(%08+)',
          '(%09+)'
          );
$inject = join('|', $injections);
$inject = "/$inject/i";
if(preg_match($inject,$str))
{return true;}
else
{return false;}
}

?>

I don't wanna sound evil, but you should first start by learning. — Ionut Necula, Nov 23 '15 at 16:08
Stupid question... but since you see the PHP-code.. do you have PHP installed on the server? And does the PHP-file have the .php extention? — M. Eriksson, Nov 23 '15 at 16:12

score 0 · Answer 1 · edited Nov 29 '15 at 13:07

First of all, the document is HTML, second, the inputs &the buttons need the name tag, like this:

<input id="name" name="name" class="pure-u-23-24" type="text">
                 ^^^^^^^^^^^

On your contact.php, you ask for $_POST['submit'], I thought it was about the button, and the button do also don't have the name tag.

And for helping you, to run any PHP document, you need a server, try XAMPP.

Just set those errors, and the form would be OK.

How to get HTML form sent through PHP

1 Answers1