Im having trouble making this. I've never used PHP or Jquery before. I've tried various PHP codes and jquery codes from the internet but none seem to work for me. The latest I tried looks like this:
<?php
$from = 'SC contact form <test@test.com>';
$sendTo = 'SC contact form <test@test.com>';
$subject = 'Nieuw bericht van SC'
$fields = array('name' => 'Name', 'surname' => 'Surname', 'email' => 'Email', 'message' => 'Message');
$okMessage = 'Bericht met succes verzonden! Wij nemen zo spoedig mogelijk contact met u op.'
$errorMessage = 'Iets ging fout, probeer het nog een keer.'
error_reporting(E_ALL & ~E_NOTICA);
try
{
if(count($_POST) == 0) throw new \Exception('Form is empty');
$emailText = "You have a new message from your contact form\n=============================\n";
foreach ($_POST as $key => $value) {
if (isset($fields[$key])) {
$emailText .= "$fields[$key]: $value\n";
}
}
$headers = array('Content-Type: text/plain; charset="UTF-8";',
'From: ' . $from,
'Reply-To: ' . $from,
'Return-Path: ' . $from,
);
// Send email
mail($sendTo, $subject, $emailText, implode("\n", $headers));
$responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
else {
echo $responseArray['Message'];
}
And this is my Jquery:
$(function(){
$('#contact-form').validator();
$('#contact-form').on('submit', function (e){
if (!e.isDefaultPrevented()){
var url = "contact.php";
$.ajax({
type: "POST"
url: url,
data: $(this).serialize(),
succes: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText){
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
}
}
});
return false;
}
})
});
This is my html form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SeetCuvers - vliegtuig stoel hoezen</title>
<link href="./style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="mail.js"></script>
<script src="spinner.js"></script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
#contactbtn{
display: block;
margin: 27px auto;
}
</style>
<body>
<div class="bg-image img1" style="opacity: 0.25;"></div>
<div class="container">
<div class="row">
<div><img class="img-fluid mx-auto d-block" id="logo" src="./SC.jpg" alt="SeetCuvers logo"/></div>
</div>
</div>
<a href="#down"><svg class="bi bi-arrow-down-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M4.646 7.646a.5.5 0 0 1 .708 0L8 10.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z"/>
<path fill-rule="evenodd" d="M8 4.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5z"/>
</svg></a>
<nav class="navbar navbar-expand-sm bg-light navbar-light sticky-top">
<a class="navbar-brand" href="#">
<img src="./SCjpg" alt="logo" style="width:40px;">
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="./index2.html">SC</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact.html">Contact</a>
</li>
</li>
</ul>
</nav>
<div class="container" id="down">
<div class="row">
<div class="col-sm-6">
<p><blockquote>
<dl class="lijst_1">
<dd>Sample text</dd>
<dd>Sample text</dd>
<dd>Sample text</dd>
<dd>Sample text!</dd>
</dl>
</blockquote>
</div>
<div class="col-sm-3">
<img id="stoel" src="./Seet Cuvers.png">
</div>
</div>
</p>
</div>
</div>
<button id="contactbtn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#contactModal"><span onclick="spinFunction()" id="spinner" class="spinner-border spinner-border-sm" style = "display: none;"></span>Contact ons</button>
<div class="modal fade" id="contactModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Contact formulier</h4>
<button type="button" class="close" data-dismiss="modal">X</button>
</div>
<div class="modal-body">
<form method="post" action="mailhandler.php" id="contact-form" role="form">
<div class="form-group">
<label for="form_name">Voornaam *</label>
<input type="form_name" class="form-control" placeholder="Voornaam" id="name" required="required" data-error="Voornaam is verplicht">
<div class="help-block with-errors"></div>
</div>
<div class="from-group">
<label for="form_lastname">Achternaam *</label>
<input type="form_lastname" type="text" name="surname" class="form-control" placeholder="Achternaam" required="required" data-error="Achternaam is verplicht">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="form_email"> Email address *</label>
<input type="form_email" class="form-control" placeholder="Email" id="email" required="required" data-error="Voer aub een geldig email-adress in">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="form_message">Bericht *</label>
<textarea class="form-control" rows="5" id="form_message" placeholder="Bericht" required="required" data-error="Laat aub een bericht achter"></textarea>
<div class="help-block with-errors"></div>
</div>
Sample text <br>
Sample text <br>
Sample text <br>
Sample text <br><br>
Sample text <br> <br>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-send" value="Send message">Verzend</button>
</div>
<div class="succes_msg" style="width: 100%; height: 100%; display: none;"><h3>Succes! We nemen zo spoedig mogelijk contact met u op</h3></div>
<div class="error_msg" style="width: 100%; height: 100%; display: none;"><h3>Er ging iets mis, probeer het later opnieuw.</h3></div>
</div>
</div>
</div>
However when I run this on the website I get an error. It says there is an error on line 8 of the php file. I am completely at a loss.
Also what would be a good place to learn more PHP and Jquery (and maybe some sql)
