PHP formulier in HTML Pagina
Ik ben al dagen bezig met onderstaande script voor mijn website, maar ik krijg het niet voor elkaar.
Dit heeft met mijn kennis te maken.
Ik hoop dat de experts hier mij kunnen helpen.
Vanwege privacy heb ik delen in mijn html pagina weggelaten.
Mijn website heb ik gebouwd op basis van html, alle pagina's zijn .html
Nu heb ik een aantal formulieren, dit zijn php forms, die ik wil implementeren op mijn .html pagina.
Wat ik ook doe ik blijf een blank pagina behouden.
Ik zet in mijn volgende bericht mijn html pagina en de form scripts.
Ik hoop dat jullie mij hiermee zouden kunnen helpen.
Thanks voor jullie support, waardeer het enorm!
Toevoeging op 08/04/2016 01:14:04:
PHP Formulier :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<?php
use phpformbuilder\Form;
use phpformbuilder\Validator\Validator;
/* =============================================
start session and include form class
============================================= */
session_start();
include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/Form.php';
/* =============================================
validation if posted
============================================= */
if ($_SERVER["REQUEST_METHOD"] == "POST") {
include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/Validator/Validator.php';
include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/Validator/Exception.php';
$validator = new Validator($_POST);
$required = array('user-name', 'user-first-name', 'user-email', 'user-phone', 'message');
foreach ($required as $required) {
$validator->required()->validate($required);
}
$validator->maxLength(100)->validate('message');
$validator->email()->validate('user-email');
$validator->captcha('captcha')->validate('captcha');
// check for errors
if ($validator->hasErrors()) {
$_SESSION['errors']['contact-form-1'] = $validator->getAllErrors();
} else {
$from_email = '[email protected]';
$adress = addslashes($_POST['user-email']);
$subject = 'phpformbuilder - Contact Form 1';
$filter_values = 'contact-form-1, captcha, submit-btn, captchaHash';
$sent_message = Form::sendMail($from_email, $adress, $subject, $filter_values);
Form::clear('contact-form-1');
}
}
/* ==================================================
The Form
for class and methods documentation,
go to documentation/index.html
================================================== */
$form = new Form('contact-form-1', 'horizontal', 'novalidate=true');
$options = array(
'horizontalLabelCol' => '',
'horizontalOffsetCol' => '',
'horizontalElementCol' => 'col-xs-12'
);
$form->setOptions($options);
$form->startFieldset('Please fill in this form to contact us');
$form->addHtml('<p class="text-warning">All fields are required</p>');
$form->setOptions(array('horizontalElementCol' => 'col-xs-6'));
$form->groupInputs('user-name', 'user-first-name');
$form->addInputWrapper('<div class="input-group"></div>', 'user-name');
$form->addHtml('<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>', 'user-name', 'before');
$form->addInput('text', 'user-name', '', '', 'required=required, placeholder=Name');
$form->addInputWrapper('<div class="input-group"></div>', 'user-first-name');
$form->addHtml('<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>', 'user-first-name', 'before');
$form->addInput('text', 'user-first-name', '', '', 'required=required, placeholder=First Name');
$form->setOptions(array('horizontalElementCol' => 'col-xs-12'));
$form->addInputWrapper('<div class="input-group"></div>', 'user-email');
$form->addHtml('<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>', 'user-email', 'before');
$form->addInput('email', 'user-email', '', '', 'required=required, placeholder=Email');
$form->addInputWrapper('<div class="input-group"></div>', 'user-phone');
$form->addHtml('<div class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></div>', 'user-phone', 'before');
$form->addInput('text', 'user-phone', '', '', 'required=required, placeholder=Phone');
$form->addTextarea('message', '', '', 'cols=30, rows=4, required=required, placeholder=Message');
$form->addPlugin('word-character-count', '#message', 'default', array('%maxAuthorized%' => 100));
$form->addCheckbox('newsletter-checkboxes', 'Suscribe to Newsletter', 'newsletter', 1, 'checked=checked');
$form->printCheckboxGroup('newsletter-checkboxes', '');
$options = array(
'horizontalLabelCol' => 'col-sm-3',
'horizontalOffsetCol' => 'col-sm-offset-3',
'horizontalElementCol' => 'col-sm-9',
);
$form->setOptions($options);
$form->addInput('text', 'captcha', '', 'Type the following characters :', 'size=15');
$form->addPlugin('captcha', '#captcha');
$form->addBtn('submit', 'submit-btn', 1, 'Send <span class="glyphicon glyphicon-envelope append"></span>', 'class=btn btn-success');
$form->endFieldset();
$form->addPlugin('icheck', 'input', 'default', array('%theme%' => 'square-custom', '%color%' => 'green'));
?>
use phpformbuilder\Form;
use phpformbuilder\Validator\Validator;
/* =============================================
start session and include form class
============================================= */
session_start();
include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/Form.php';
/* =============================================
validation if posted
============================================= */
if ($_SERVER["REQUEST_METHOD"] == "POST") {
include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/Validator/Validator.php';
include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/Validator/Exception.php';
$validator = new Validator($_POST);
$required = array('user-name', 'user-first-name', 'user-email', 'user-phone', 'message');
foreach ($required as $required) {
$validator->required()->validate($required);
}
$validator->maxLength(100)->validate('message');
$validator->email()->validate('user-email');
$validator->captcha('captcha')->validate('captcha');
// check for errors
if ($validator->hasErrors()) {
$_SESSION['errors']['contact-form-1'] = $validator->getAllErrors();
} else {
$from_email = '[email protected]';
$adress = addslashes($_POST['user-email']);
$subject = 'phpformbuilder - Contact Form 1';
$filter_values = 'contact-form-1, captcha, submit-btn, captchaHash';
$sent_message = Form::sendMail($from_email, $adress, $subject, $filter_values);
Form::clear('contact-form-1');
}
}
/* ==================================================
The Form
for class and methods documentation,
go to documentation/index.html
================================================== */
$form = new Form('contact-form-1', 'horizontal', 'novalidate=true');
$options = array(
'horizontalLabelCol' => '',
'horizontalOffsetCol' => '',
'horizontalElementCol' => 'col-xs-12'
);
$form->setOptions($options);
$form->startFieldset('Please fill in this form to contact us');
$form->addHtml('<p class="text-warning">All fields are required</p>');
$form->setOptions(array('horizontalElementCol' => 'col-xs-6'));
$form->groupInputs('user-name', 'user-first-name');
$form->addInputWrapper('<div class="input-group"></div>', 'user-name');
$form->addHtml('<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>', 'user-name', 'before');
$form->addInput('text', 'user-name', '', '', 'required=required, placeholder=Name');
$form->addInputWrapper('<div class="input-group"></div>', 'user-first-name');
$form->addHtml('<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>', 'user-first-name', 'before');
$form->addInput('text', 'user-first-name', '', '', 'required=required, placeholder=First Name');
$form->setOptions(array('horizontalElementCol' => 'col-xs-12'));
$form->addInputWrapper('<div class="input-group"></div>', 'user-email');
$form->addHtml('<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>', 'user-email', 'before');
$form->addInput('email', 'user-email', '', '', 'required=required, placeholder=Email');
$form->addInputWrapper('<div class="input-group"></div>', 'user-phone');
$form->addHtml('<div class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></div>', 'user-phone', 'before');
$form->addInput('text', 'user-phone', '', '', 'required=required, placeholder=Phone');
$form->addTextarea('message', '', '', 'cols=30, rows=4, required=required, placeholder=Message');
$form->addPlugin('word-character-count', '#message', 'default', array('%maxAuthorized%' => 100));
$form->addCheckbox('newsletter-checkboxes', 'Suscribe to Newsletter', 'newsletter', 1, 'checked=checked');
$form->printCheckboxGroup('newsletter-checkboxes', '');
$options = array(
'horizontalLabelCol' => 'col-sm-3',
'horizontalOffsetCol' => 'col-sm-offset-3',
'horizontalElementCol' => 'col-sm-9',
);
$form->setOptions($options);
$form->addInput('text', 'captcha', '', 'Type the following characters :', 'size=15');
$form->addPlugin('captcha', '#captcha');
$form->addBtn('submit', 'submit-btn', 1, 'Send <span class="glyphicon glyphicon-envelope append"></span>', 'class=btn btn-success');
$form->endFieldset();
$form->addPlugin('icheck', 'input', 'default', array('%theme%' => 'square-custom', '%color%' => 'green'));
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Form 1</title>
<!-- Bootstrap CSS -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
Code (php)
1
<?php $form->printIncludes('css'); ?>
</head>
<body>
<h1 class="text-center">Contact Form 1</h1>
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
</div>
</div>
</div>
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="../assets/js/bootstrap.min.js"></script>
Code (php)
1
2
3
4
2
3
4
<?php
$form->printIncludes('js');
$form->printJsCode();
?>
$form->printIncludes('js');
$form->printJsCode();
?>
</body>
</html>
Gewijzigd op 08/04/2016 01:32:12 door Shahied ayu
Zie ook de Veelgestelde Vragen.
Gewijzigd op 08/04/2016 01:24:03 door - Ariën -
<!DOCTYPE html>
<html>
<head>
<!-- Basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content=" ">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800%7CShadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<!-- Theme CSS -->
<!-- Current Page CSS -->
<!-- Skin CSS -->
<link rel="stylesheet" href="css/skins/default.css">
<!-- Head Libs -->
<script src="vendor/modernizr/modernizr.min.js"></script>
</head>
<body class="loading-overlay-showing" data-loading-overlay>
<div class="loading-overlay">
<div class="loader"></div>
</div>
<div class="body">
<div class="body">
<header id="header" class="header-narrow header-semi-transparent header-transparent-sticky-deactive header-transparent-bottom-border" data-plugin-options='{"stickyEnabled": true, "stickyEnableOnBoxed": true, "stickyEnableOnMobile": true, "stickyStartAt": 1, "stickySetTop": "1"}'>
<div class="header-body">
<div class="header-container container">
<div class="header-row">
<div class="header-column">
<div class="header-logo">
<a href="index.html">
</a>
</div>
</div>
<div class="header-column">
<div class="header-row">
<div class="header-nav header-nav-dark-dropdown">
<button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main">
<i class="fa fa-bars"></i>
</button>
<ul class="header-social-icons social-icons hidden-xs">
<li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li class="social-icons-instagram"><a href="http://www.instagram.com/" target="_blank" title="Instagram"><i class="fa fa-instagram"></i></a></li>
</ul>
<div class="header-nav-main header-nav-main-square header-nav-main-effect-3 header-nav-main-sub-effect-1 collapse">
<nav>
<ul class="nav nav-pills" id="mainNav">
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a href="contact.html">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div role="main" class="main">
<section class="page-header">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li class="active">Contact</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h1>Contact</h1>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="alert alert-success hidden" id="contactSuccess">
<strong>Success!</strong> Your message has been sent to us.
</div>
<div class="alert alert-danger hidden" id="contactError">
<strong>Error!</strong> There was an error sending your message.
</div>
<h2 class="mb-sm mt-sm"><strong>Contact</strong></h2>
<form id="contactForm" action="php/contact-form.php" method="POST">
<div class="row">
<div class="form-group">
<div class="col-md-6">
<label>Voor en Achternaam *</label>
<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name" required>
</div>
<div class="col-md-6">
<label>Email adres *</label>
<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" required>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Onderwerp</label>
<input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control" name="subject" id="subject" required>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Bericht *</label>
<textarea maxlength="5000" data-msg-required="Please enter your message." rows="10" class="form-control" name="message" id="message" required></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" value="Verstuur" class="btn btn-primary btn-lg mb-xlg" data-loading-text="Loading...">
</div>
</div>
</form>
</div>
<div class="col-md-6">
<hr>
<h4 class="heading-primary"><strong></strong></h4>
<ul class="list list-icons list-icons-style-3 mt-xlg">
<li><i class="fa fa-map-marker"></i> <strong>Adres:</strong></li>
</ul>
<hr>
<h4 class="heading-primary">Business <strong>Hours</strong></h4>
<ul class="list list-icons list-dark mt-xlg">
<li><i class="fa fa-clock-o"></i> Maandag </li>
</ul>
</div>
</div>
</div>
</div>
<section class="call-to-action call-to-action-default with-button-arrow call-to-action-in-footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="call-to-action-content">
<h3><strong></strong></h3>
<p> <strong></strong></p>
</div>
<div class="call-to-action-btn">
<a href=".html"class="btn btn-lg btn-primary"></a><span class="arrow hlb hidden-xs hidden-sm hidden-md" data-appear-animation="rotateInUpLeft" style="top: -12px;"></span>
</div>
</div>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<div class="row">
<div class="footer-ribbon">
<span>Get in Touch</span>
</div>
<div class="col-md-3">
<div class="newsletter">
<h4>Nieuwsbrief</h4>
<p>Meld u aan voor onze online nieuwsbrief en blijf op de hoogte van de laatste ontwikkelingen.</p>
<div class="alert alert-success hidden" id="newsletterSuccess">
<strong>Success!</strong> You've been added to our email list.
</div>
<div class="alert alert-danger hidden" id="newsletterError"></div>
<form id="newsletterForm" action="php/newsletter-subscribe.php" method="POST">
<div class="row">
<div class="form-group mb-xs">
<div class="col-md-12">
<input class="form-control" placeholder="Voornaam" data-msg-required="Voornaam" name="newsletterFirstName" id="newsletterFirstName" type="text">
</div>
</div>
</div>
<div class="row">
<div class="form-group mb-xs">
<div class="col-md-12">
<input class="form-control" placeholder="Achternaam" data-msg-required="Achternaam" name="newsletterLastName" id="newsletterLastName" type="text">
</div>
</div>
</div>
<div class="row">
<div class="form-group mb-sm">
<div class="col-md-12">
<input class="form-control" placeholder="E-mail Adres" data-msg-required="E-mail Adres" name="newsletterEmail" id="newsletterEmail" type="text">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<input type="submit" value="Verzenden" class="btn btn-primary pull-right">
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-2">
<h4>Volg Ons</h4>
<ul class="social-icons">
<li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li class="social-icons-instagram"><a href="http://www.instagram.com/" target="_blank" title="Twitter"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<div class="col-md-4">
<div class="contact-details">
<h4>Contact</h4>
<ul class="contact">
<li><p><i class="fa fa-map-marker"></i> <strong>Adres:</strong></p></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
<div class="row">
<div class="col-md-2">
<a href="index.html" class="logo">
<img alt="Company Logo" class="img-responsive" src="img/logo3.png">
</a>
</div>
<div class="col-md-6">
<p>© 2015 - 2016 </p>
</div>
<div class="col-md-4">
<nav id="sub-menu">
<ul>
<li><a href=".html"></a></li>
<li><a href=".html"> Policy</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- Vendor -->
<!-- Theme Base, Components and Settings -->
<!-- Current Page Vendor and Views -->
<!-- Theme Custom -->
<!-- Theme Initialization Files -->
<!-- Google Analytics: Change UA-XXXXX-X to be your site's ID. Go to http://www.google.com/analytics/ for more information.
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-12345678-1', 'auto');
ga('send', 'pageview');
</script>
-->
</body>
</html>
Gewijzigd op 08/04/2016 15:10:42 door - SanThe -
En ga dan voor jezelf eens na welke code onnodig is, neem als voorbeeld de code van Google Analytics en haal deze dan ook weg.
Edit:
Verder zou je de volgende code in een variable kunnen stoppen.
Code (php)
1
rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR)
Gewijzigd op 08/04/2016 16:12:21 door Marthijn Buijs
Shahied ayu op 08/04/2016 01:12:43:
Mijn website heb ik gebouwd op basis van html, alle pagina's zijn .html
Nu heb ik een aantal formulieren, dit zijn php forms, die ik wil implementeren op mijn .html pagina.
Ik zet in mijn volgende bericht mijn html pagina
Nu heb ik een aantal formulieren, dit zijn php forms, die ik wil implementeren op mijn .html pagina.
Ik zet in mijn volgende bericht mijn html pagina
Weet niet of ik het goed begrijp, maar php in .html bestanden werkt toch niet?
Obelix en Idefix op 08/04/2016 20:56:25:
Weet niet of ik het goed begrijp, maar php in .html bestanden werkt toch niet?
Dit klopt, dit werkt niet, tenzij je je webserver hiervoor speciaal configureert.
Eigenlijk is het simpel. Alle .html bestanden die PHP-code bevatten zouden de extensie .php moeten krijgen in plaats van .html. Zodat de webserver weet dat deze mogelijk PHP-code bevatten.
De webserver moet vervolgens het gebruik van PHP ondersteunen.
Als aan een van de twee voorwaarden niet is voldaan (of je webserver moet speciaal geconfigureerd zijn zodat alle HTML bestanden door de PHP parser gegooid worden) zal de PHP-code niet worden uitgevoerd.
De eenvoudigste manier om te zien of de PHP-code wordt uitgevoerd is de volgende: bekijk de broncode van je webpagina (Ctrl-U). Zie je hier blokken PHP code in terug dan wil dit zeggen dat de code niet is verwerkt aan de webserverkant.
Gewijzigd op 08/04/2016 21:04:54 door Thomas van den Heuvel
Wat krijg je dan als resultaat?