Verwijzing wordt niet zichtbaar
Ik heb een los CSS bestand en HTML bestand. Echter word de opmaak van het CSS bestand deels niet zichtbaar. De achtergrondkleur veranderd wel (body) er is dus wel een verbinding. Kan iemand aangeven wat ik mis doe?
Alvast bedankt.
Ik heb in een HTML bestand de volgende code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</head>
<link rel="stylesheet" href="contactform.css" type="text/css" />
<body>
<div id="formWrap">
<div id="form"></div>
<div class="row">
<div class="label"> naam </div>
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="" />
<div class="context">tekst dat hier staat</div>
</div>
</div>
</div>
<link rel="stylesheet" href="contactform.css" type="text/css" />
<body>
<div id="formWrap">
<div id="form"></div>
<div class="row">
<div class="label"> naam </div>
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="" />
<div class="context">tekst dat hier staat</div>
</div>
</div>
</div>
De code uit het CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body{
background:#E9E9E9;
#formWrap {
width:720px;
margin-top:30px;
margin-left:30px;
background:#FFF;
border:1px solid #F1F1F1;
-moz-border-radius:20px;
-moz-box-shadow:2px 2px 5px #999;
-webkit-border-radius:20px;
-webkit-box-shadow:2px 2px 5px #999;
padding:16px 10px 40px;
}
background:#E9E9E9;
#formWrap {
width:720px;
margin-top:30px;
margin-left:30px;
background:#FFF;
border:1px solid #F1F1F1;
-moz-border-radius:20px;
-moz-box-shadow:2px 2px 5px #999;
-webkit-border-radius:20px;
-webkit-box-shadow:2px 2px 5px #999;
padding:16px 10px 40px;
}
Gewijzigd op 02/09/2015 23:00:18 door - Ariën -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body{
background:#E9E9E9;
}
#formWrap {
width:720px;
margin-top:30px;
margin-left:30px;
background:#FFF;
border:1px solid #F1F1F1;
-moz-border-radius:20px;
-moz-box-shadow:2px 2px 5px #999;
-webkit-border-radius:20px;
-webkit-box-shadow:2px 2px 5px #999;
padding:16px 10px 40px;
}
background:#E9E9E9;
}
#formWrap {
width:720px;
margin-top:30px;
margin-left:30px;
background:#FFF;
border:1px solid #F1F1F1;
-moz-border-radius:20px;
-moz-box-shadow:2px 2px 5px #999;
-webkit-border-radius:20px;
-webkit-box-shadow:2px 2px 5px #999;
padding:16px 10px 40px;
}
Gewijzigd op 02/09/2015 23:00:34 door - Ariën -
Maar het kan zijn dat die later komen.
Daarbij hoort een <link> in de <head> te staan. En dat is soms wel zo handig.
Wil je je HTML eerst af hebben en dus sneller je pagina renderen, gooi je <link> dan echt helemaal aan het eind. Dus na </body>, maar wel voor </html>.
Toevoeging op 31/08/2015 12:14:46:
Ik ben een formulier los aan het maken (dus nog niet in mijn website) wanneer ik tevreden ben zal ik deze aan mijn webpagina toevoegen. Vandaar dat ik hem zo minimalistische opbouw.
Ik hoor graag feedback als deze gedachte niet slim is ;-)
De tekst van de e-mail adres en opmerkingen vallen niet in het grote witte vlak. Iemand enig idee wat er mis gaat?
CCS
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
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
body{
background:#E9E9E9;
}
#formWrap {
width:720px;
margin-top:30px;
margin-left:30px;
background:#FFF;
border:1px solid #F1F1F1;
-moz-border-radius:20px;
-moz-box-shadow:2px 2px 5px #999;
-webkit-border-radius:20px;
-webkit-box-shadow:2px 2px 5px #999;
padding:16px 10px 40px;
}
#formWrap .form {
border-top:1px solid #EEE;
width:720px;
}
#form .row {
border-bottom:1px dotted #EEE;
display:block;
line-height:36px
overflow:auto;
padding:24px 0px;
width:100%;
}
#form .row .label {
font-size: 16px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
width: 180px;
text-align: right;
float: left;
padding-right: 10px;
margin-right: 10px;
}
#form .row .input {
float: left;
margin-right: 10px;
width: auto;
}
.detail {
width:260px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 7px 8px;
margin: 0;
}
.mess {
width: 450px;
max-width: 450px;
height: 280px;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 7px 8px;
line-height: les;
margin:0;
}
#form .row .content{
color: #999;
font-size: 11px;
font-style: italic;
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
width: 200px;
float: left;
}
#form #submit{
font-family: Arial, Helvetica, sans-serif;
margin-top: 25px;
margin-left: 200px;
color: #000;
font-size: 16px;
text-shadow: 1px 1px 1px #999;
padding: 10px;
}
background:#E9E9E9;
}
#formWrap {
width:720px;
margin-top:30px;
margin-left:30px;
background:#FFF;
border:1px solid #F1F1F1;
-moz-border-radius:20px;
-moz-box-shadow:2px 2px 5px #999;
-webkit-border-radius:20px;
-webkit-box-shadow:2px 2px 5px #999;
padding:16px 10px 40px;
}
#formWrap .form {
border-top:1px solid #EEE;
width:720px;
}
#form .row {
border-bottom:1px dotted #EEE;
display:block;
line-height:36px
overflow:auto;
padding:24px 0px;
width:100%;
}
#form .row .label {
font-size: 16px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
width: 180px;
text-align: right;
float: left;
padding-right: 10px;
margin-right: 10px;
}
#form .row .input {
float: left;
margin-right: 10px;
width: auto;
}
.detail {
width:260px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 7px 8px;
margin: 0;
}
.mess {
width: 450px;
max-width: 450px;
height: 280px;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 7px 8px;
line-height: les;
margin:0;
}
#form .row .content{
color: #999;
font-size: 11px;
font-style: italic;
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
width: 200px;
float: left;
}
#form #submit{
font-family: Arial, Helvetica, sans-serif;
margin-top: 25px;
margin-left: 200px;
color: #000;
font-size: 16px;
text-shadow: 1px 1px 1px #999;
padding: 10px;
}
HTML
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
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
<link rel="stylesheet" href="contactform.css" type="text/css" />
<body>
<div id="formWrap">
<div id="form"></div>
<div class="row">
<div class="label"> naam </div>
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="" />
<div class="context">tekst dat hier staat</div>
</div>
</div>
</div>
<div class="row">
<div class="label"> E-mailadres </div>
<div class="input">
<input type="text" id="e-mail" class="detail" name="email" value="" />
<div class="context">tekst over je e-mail</div>
</div>
</div>
</div>
<div class="row">
<div class="label"> opmerkingen </div>
<div class="input">
<textarea id= "comment" name="comment" class="mess"></textarea>
</div>
</div>
</div>
<div class="submit">
<input type= "submit" id="submit" name="submit" value="send message"
</div>
</div>
</body>
</html>
<body>
<div id="formWrap">
<div id="form"></div>
<div class="row">
<div class="label"> naam </div>
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="" />
<div class="context">tekst dat hier staat</div>
</div>
</div>
</div>
<div class="row">
<div class="label"> E-mailadres </div>
<div class="input">
<input type="text" id="e-mail" class="detail" name="email" value="" />
<div class="context">tekst over je e-mail</div>
</div>
</div>
</div>
<div class="row">
<div class="label"> opmerkingen </div>
<div class="input">
<textarea id= "comment" name="comment" class="mess"></textarea>
</div>
</div>
</div>
<div class="submit">
<input type= "submit" id="submit" name="submit" value="send message"
</div>
</div>
</body>
</html>
Gewijzigd op 02/09/2015 23:00:59 door - Ariën -
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
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
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Mijn Titel</title>
<link rel="stylesheet" href="contactform.css" type="text/css" />
</head>
<body>
<div id="formWrap">
<div id="form"></div>
<div class="row">
<div class="label"> naam </div>
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="" />
<div class="context">tekst dat hier staat</div>
</div>
</div>
<div class="row">
<div class="label"> E-mailadres </div>
<div class="input">
<input type="text" id="e-mail" class="detail" name="email" value="" />
<div class="context">tekst over je e-mail</div>
</div>
</div>
<div class="row">
<div class="label"> opmerkingen </div>
<div class="input">
<textarea id= "comment" name="comment" class="mess"></textarea>
</div>
</div>
<div class="submit">
<input type= "submit" id="submit" name="submit" value="send message" />
</div>
</div>
</body>
</html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Mijn Titel</title>
<link rel="stylesheet" href="contactform.css" type="text/css" />
</head>
<body>
<div id="formWrap">
<div id="form"></div>
<div class="row">
<div class="label"> naam </div>
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="" />
<div class="context">tekst dat hier staat</div>
</div>
</div>
<div class="row">
<div class="label"> E-mailadres </div>
<div class="input">
<input type="text" id="e-mail" class="detail" name="email" value="" />
<div class="context">tekst over je e-mail</div>
</div>
</div>
<div class="row">
<div class="label"> opmerkingen </div>
<div class="input">
<textarea id= "comment" name="comment" class="mess"></textarea>
</div>
</div>
<div class="submit">
<input type= "submit" id="submit" name="submit" value="send message" />
</div>
</div>
</body>
</html>
Je hebt 3 </div>'s voor elk veld, waarvan er maar 2 div's zijn. Sluit trouwens je input's wel goed af + Geef een Doctype op + charset.
Gewijzigd op 01/09/2015 19:07:01 door DavY -
Wat bedoel je precies met: Sluit trouwens je input's wel goed af + Geef een Doctype op + charset?
Tnx
Code (php)
1
<input type= "submit" id="submit" name="submit" value="send message"
Dat moest dus zo:
Code (php)
1
<input type= "submit" id="submit" name="submit" value="send message" />
Doctype:
Code (php)
1
<!DOCTYPE html>
Zie: http://www.handleidinghtml.nl/html/elementen/doctype.html
Charset:
Code (php)
1
<meta charset="utf-8">
Zie: https://nl.wikibooks.org/wiki/HTML/Character_sets
Eigenlijk is het teveel van het goede met al die div's en zou het netter zijn om het zo te schrijven: http://www.w3schools.com/tags/tag_fieldset.asp en http://www.w3schools.com/tags/tag_label.asp, maar ik neem aan dat je een beginner ben.
Gewijzigd op 01/09/2015 19:21:11 door DavY -
Ik heb nog een vraag.
Ik zou graag een optie met een datum keuze (agenda) en een tijdstip willen invoeren.
Enig idee hoe ik dit invoer?
oh en mijn redirect naar index.html werkt niet. Iemand een idee hoe dit kan?
Momenteel zien de codes er zo uit:
PHP
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<?php
// Set email variables
$email_to = '[email protected]';
$email_subject = 'Verrassing aanvraag';
// Set required fields
$required_fields = array('fullname','email','cellphone');
// set error messages
$error_messages = array(
'fullname' => 'Vul je naam in.',
'email' => 'Vul je e-mailadres in.',
'cellphone' => 'Vul je telefoonnummer in.'
);
// Set form status
$form_complete = FALSE;
// configure validation array
$validation = array();
// check form submittal
if(!empty($_POST)) {
// Sanitise POST array
foreach($_POST as $key => $value) $_POST[$key] = remove_email_injection(trim($value));
// Loop into required fields and make sure they match our needs
foreach($required_fields as $field) {
// the field has been submitted?
if(!array_key_exists($field, $_POST)) array_push($validation, $field);
// check there is information in the field?
if($_POST[$field] == '') array_push($validation, $field);
// validate the email address supplied
if($field == 'email') if(!validate_email_address($_POST[$field])) array_push($validation, $field);
}
// basic validation result
if(count($validation) == 0) {
// Prepare our content string
$email_content = 'New Website Comment: ' . "\n\n";
// simple email content
foreach($_POST as $key => $value) {
if($key != 'submit') $email_content .= $key . ': ' . $value . "\n";
}
// if validation passed ok then send the email
mail($email_to, $email_subject, $email_content);
// Update form switch
$form_complete = TRUE;
}
}
function validate_email_address($email = FALSE) {
return (preg_match('/^[^@\s]+@([-a-z0-9]+\.)+[a-z]{2,}$/i', $email))? TRUE : FALSE;
}
function remove_email_injection($field = FALSE) {
return (str_ireplace(array("\r", "\n", "%0a", "%0d", "Content-Type:", "bcc:","to:","cc:"), '', $field));
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Contact Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="contactform.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript">
var nameError = '<?php echo $error_messages['fullname']; ?>';
var emailError = '<?php echo $error_messages['email']; ?>';
var cellphoneError = '<?php echo $error_messages['sellphone']; ?>';
</script>
</head>
<body>
<div id="formWrap">
<div id="form">
</div>
<form action="contact.php" method="post" id="comments_form">
<?php if($form_complete === FALSE): ?>
<div class="row">
<div class="label"> Voor en achternaam </div>
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="<?php echo isset($_POST['fullname'])? $_POST['fullname'] : ''; ?>" /><?php if(in_array('fullname', $validation)): ?><span class="error"><?php echo $error_messages['fullname']; ?></span><?php endif; ?>
<div class="context"></div>
</div>
</div>
<div class="row">
<div class="label"> E-mailadres </div>
<div class="input">
<input type="text" id="e-mail" class="detail" name="email" value="<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>" /><?php if(in_array('email', $validation)): ?><span class="error"><?php echo $error_messages['email']; ?></span><?php endif; ?>
<div class="context"></div>
</div>
</div>
<div class="row">
<div class="label"> Telefoonnummer </div>
<div class="input">
<input type="number" id="cellphone" class="detail" name="cellphone" value="<?php echo isset($_POST['cellphone'])? $_POST['cellphone'] : ''; ?>" /><?php if(in_array('cellphone', $validation)): ?><span class="error"><?php echo $error_messages['cellphone']; ?></span><?php endif; ?>
<div class="context"></div>
</div>
</div>
<div class="row">
<div class="label"> Opmerkingen </div>
<div class="input">
<textarea id= "comment" name="comment" class="mess"><?php echo isset($_POST['comment'])? $_POST['comment'] : ''; ?></textarea><?php if(in_array('comment', $validation)): ?><span class="error"><?php echo $error_messages['comment']; ?></span><?php endif; ?>
</div>
</div>
<div class="submit">
<input type= "submit" id="submit" name="submit" value="send message" />
</div>
</form>
<?php else: ?>
<p>Thank you for your Message!</p>
<script type="text-javascript">
setTimeout('ourRedirect()',5000)
function ourRedirect() {
location.href='index.html'
}
</script>
<?php endif; ?>
</div>
</body>
</html>
// Set email variables
$email_to = '[email protected]';
$email_subject = 'Verrassing aanvraag';
// Set required fields
$required_fields = array('fullname','email','cellphone');
// set error messages
$error_messages = array(
'fullname' => 'Vul je naam in.',
'email' => 'Vul je e-mailadres in.',
'cellphone' => 'Vul je telefoonnummer in.'
);
// Set form status
$form_complete = FALSE;
// configure validation array
$validation = array();
// check form submittal
if(!empty($_POST)) {
// Sanitise POST array
foreach($_POST as $key => $value) $_POST[$key] = remove_email_injection(trim($value));
// Loop into required fields and make sure they match our needs
foreach($required_fields as $field) {
// the field has been submitted?
if(!array_key_exists($field, $_POST)) array_push($validation, $field);
// check there is information in the field?
if($_POST[$field] == '') array_push($validation, $field);
// validate the email address supplied
if($field == 'email') if(!validate_email_address($_POST[$field])) array_push($validation, $field);
}
// basic validation result
if(count($validation) == 0) {
// Prepare our content string
$email_content = 'New Website Comment: ' . "\n\n";
// simple email content
foreach($_POST as $key => $value) {
if($key != 'submit') $email_content .= $key . ': ' . $value . "\n";
}
// if validation passed ok then send the email
mail($email_to, $email_subject, $email_content);
// Update form switch
$form_complete = TRUE;
}
}
function validate_email_address($email = FALSE) {
return (preg_match('/^[^@\s]+@([-a-z0-9]+\.)+[a-z]{2,}$/i', $email))? TRUE : FALSE;
}
function remove_email_injection($field = FALSE) {
return (str_ireplace(array("\r", "\n", "%0a", "%0d", "Content-Type:", "bcc:","to:","cc:"), '', $field));
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Contact Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="contactform.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript">
var nameError = '<?php echo $error_messages['fullname']; ?>';
var emailError = '<?php echo $error_messages['email']; ?>';
var cellphoneError = '<?php echo $error_messages['sellphone']; ?>';
</script>
</head>
<body>
<div id="formWrap">
<div id="form">
</div>
<form action="contact.php" method="post" id="comments_form">
<?php if($form_complete === FALSE): ?>
<div class="row">
<div class="label"> Voor en achternaam </div>
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="<?php echo isset($_POST['fullname'])? $_POST['fullname'] : ''; ?>" /><?php if(in_array('fullname', $validation)): ?><span class="error"><?php echo $error_messages['fullname']; ?></span><?php endif; ?>
<div class="context"></div>
</div>
</div>
<div class="row">
<div class="label"> E-mailadres </div>
<div class="input">
<input type="text" id="e-mail" class="detail" name="email" value="<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>" /><?php if(in_array('email', $validation)): ?><span class="error"><?php echo $error_messages['email']; ?></span><?php endif; ?>
<div class="context"></div>
</div>
</div>
<div class="row">
<div class="label"> Telefoonnummer </div>
<div class="input">
<input type="number" id="cellphone" class="detail" name="cellphone" value="<?php echo isset($_POST['cellphone'])? $_POST['cellphone'] : ''; ?>" /><?php if(in_array('cellphone', $validation)): ?><span class="error"><?php echo $error_messages['cellphone']; ?></span><?php endif; ?>
<div class="context"></div>
</div>
</div>
<div class="row">
<div class="label"> Opmerkingen </div>
<div class="input">
<textarea id= "comment" name="comment" class="mess"><?php echo isset($_POST['comment'])? $_POST['comment'] : ''; ?></textarea><?php if(in_array('comment', $validation)): ?><span class="error"><?php echo $error_messages['comment']; ?></span><?php endif; ?>
</div>
</div>
<div class="submit">
<input type= "submit" id="submit" name="submit" value="send message" />
</div>
</form>
<?php else: ?>
<p>Thank you for your Message!</p>
<script type="text-javascript">
setTimeout('ourRedirect()',5000)
function ourRedirect() {
location.href='index.html'
}
</script>
<?php endif; ?>
</div>
</body>
</html>
CSS
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
89
90
91
92
93
94
95
96
97
98
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
89
90
91
92
93
94
95
96
97
98
body{
background:#E9E9E9;
}
#formWrap {
width:720px;
margin-top:30px;
margin-left:30px;
background:#FFF;
border:1px solid #F1F1F1;
-moz-border-radius:20px;
-moz-box-shadow:2px 2px 5px #999;
-webkit-border-radius:20px;
-webkit-box-shadow:2px 2px 5px #999;
padding:16px 10px 40px;
}
#formWrap .form {
border-top:1px solid #EEE;
width:720px;
}
#form .row {
border-bottom:1px dotted #EEE;
display:block;
line-height:36px
overflow:auto;
padding:24px 0px;
width:100%;
}
#form .row .label {
font-size: 16px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
width: 180px;
text-align: right;
float: left;
padding-right: 10px;
margin-right: 10px;
}
#form .row .input {
float: left;
margin-right: 10px;
width: auto;
}
.detail {
width:260px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 7px 8px;
margin: 0;
display: block;
}
.mess {
width: 450px;
max-width: 450px;
height: 280px;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 7px 8px;
line-height: les;
margin:0;
display: block;
}
#form .row .content{
color: #999;
font-size: 11px;
font-style: italic;
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
width: 200px;
float: left;
}
#form #submit{
font-family: Arial, Helvetica, sans-serif;
margin-top: 25px;
margin-left: 200px;
color: #000;
font-size: 16px;
text-shadow: 1px 1px 1px #999;
padding: 10px;
}
span.error{
color: #000;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px
padding: 25px;
}
background:#E9E9E9;
}
#formWrap {
width:720px;
margin-top:30px;
margin-left:30px;
background:#FFF;
border:1px solid #F1F1F1;
-moz-border-radius:20px;
-moz-box-shadow:2px 2px 5px #999;
-webkit-border-radius:20px;
-webkit-box-shadow:2px 2px 5px #999;
padding:16px 10px 40px;
}
#formWrap .form {
border-top:1px solid #EEE;
width:720px;
}
#form .row {
border-bottom:1px dotted #EEE;
display:block;
line-height:36px
overflow:auto;
padding:24px 0px;
width:100%;
}
#form .row .label {
font-size: 16px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
width: 180px;
text-align: right;
float: left;
padding-right: 10px;
margin-right: 10px;
}
#form .row .input {
float: left;
margin-right: 10px;
width: auto;
}
.detail {
width:260px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 7px 8px;
margin: 0;
display: block;
}
.mess {
width: 450px;
max-width: 450px;
height: 280px;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 7px 8px;
line-height: les;
margin:0;
display: block;
}
#form .row .content{
color: #999;
font-size: 11px;
font-style: italic;
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
width: 200px;
float: left;
}
#form #submit{
font-family: Arial, Helvetica, sans-serif;
margin-top: 25px;
margin-left: 200px;
color: #000;
font-size: 16px;
text-shadow: 1px 1px 1px #999;
padding: 10px;
}
span.error{
color: #000;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px
padding: 25px;
}
- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken. Zie ook deze uitleg over de opmaakcodes.
Alvast bedankt!
Alvast bedankt!
Gewijzigd op 02/09/2015 23:02:06 door - Ariën -
Code (php)
1
Verder zou ik de settimout zou doen: window.setTimeout("location=('index.html');",5000);
Verder kan je in je formulier een datum en tijdveld invoegen, waarbij je eventueel gebruik kan maken van de datepicker uit jQueryUI. Vergeet uiteraard niet te valideren.
Bernhard G op 02/09/2015 22:52:18:
Ik zou graag een optie met een datum keuze (agenda) en een tijdstip willen invoeren.
Enig idee hoe ik dit invoer?
Enig idee hoe ik dit invoer?
jQuery datepicker + wat custom select boxes voor tijd?
Bernhard G op 02/09/2015 22:52:18:
oh en mijn redirect naar index.html werkt niet. Iemand een idee hoe dit kan?
Code (php)
1
<script type="text-javascript">
Het redirecten lukt nog niet. Ik wil straks graag dat degene die het veld heeft ingevuld verder gaat naar een iDeal formulier.
Nog een vraag:
Ik zou graag willen dat degene die het formulier heeft ingevuld een standaard mail krijgt met gegevens die hij heeft ingevuld. Is hier een standaard javascript voor?
Alvast bedankt.
- Aar - op 03/09/2015 09:08:24:
Mail kan niet met JavaScript. Je zult PHP moeten gebruiken. Bij voorkeur zelfs PHPmailer.
Dit kan dan wel in hetzelfde .php bestand?
Kan ik ergens een voorbeeld code vinden?
http://phpmailer.worxware.com/?pg=examples
- Aar - op 03/09/2015 09:38:09:
PHPmailer kan je prima in je eigen code verwerken. Het kan al met tiental regeltjes:
http://phpmailer.worxware.com/?pg=examples
http://phpmailer.worxware.com/?pg=examples
Super bedankt.
Moet ik de code in de head zetten of achter de bedankt pagina. En mag ik vragen hoe ik de actie er aan koppel?
Dan wordt wel duidelijk hoe je de code op de juiste structuur in kan bouwen.
Wanneer ik het in mijn php zet dan kan ik mijn hele pagina niet meer zien.
Wat doe ik fout?
Alvast bedankt.
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<?php
if ($_POST["submit"])
$onderwerp = 'Bevestigingsmail';
$webmaster = 'mijn e-mail';
$e-mailadres = $_POST['email'];
$naam = $_POST['fullname'];
$telefoonnummer = $_POST['cellphone'];
$stad = $_POST['city'];
$opmerking = $_POST['comment'];
$body = <<<EOD
<br><hr><br>
E-mail: $email <br>
Naam: $fullname <br>
telefoonnummer: $cellphone <br>
Stad: $city <br>
Opmerking: $comment <br>
EOD;
$headers = "from: $email\r\n";
$headers .= "conntent-type: text/html\r\n";
$success =mail ($webmaster, $onderwerp, $body, $headers);
// Set email variables
$email_to = 'mijn email';
$email_subject = 'onderwerp';
// Set required fields
$required_fields = array('fullname','email','cellphone','city');
// set error messages
$error_messages = array(
'fullname' => 'Vul je naam in.',
'email' => 'Vul je e-mailadres in.',
'cellphone' => 'Vul je telefoonnummer in.',
'city' => 'Kies een stad.',
);
// Set form status
$form_complete = FALSE;
// configure validation array
$validation = array();
// check form submittal
if(!empty($_POST)) {
// Sanitise POST array
foreach($_POST as $key => $value) $_POST[$key] = remove_email_injection(trim($value));
// Loop into required fields and make sure they match our needs
foreach($required_fields as $field) {
// the field has been submitted?
if(!array_key_exists($field, $_POST)) array_push($validation, $field);
// check there is information in the field?
if($_POST[$field] == '') array_push($validation, $field);
// validate the email address supplied
if($field == 'email') if(!validate_email_address($_POST[$field])) array_push($validation, $field);
}
// basic validation result
if(count($validation) == 0) {
// Prepare our content string
$email_content = 'New Website Comment: ' . "\n\n";
// simple email content
foreach($_POST as $key => $value) {
if($key != 'submit') $email_content .= $key . ': ' . $value . "\n";
}
// if validation passed ok then send the email
mail($email_to, $email_subject, $email_content);
// Update form switch
$form_complete = TRUE;
}
}
function validate_email_address($email = FALSE) {
return (preg_match('/^[^@\s]+@([-a-z0-9]+\.)+[a-z]{2,}$/i', $email))? TRUE : FALSE;
}
function remove_email_injection($field = FALSE) {
return (str_ireplace(array("\r", "\n", "%0a", "%0d", "Content-Type:", "bcc:","to:","cc:"), '', $field));
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Contact Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="contactform.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript">
var nameError = '<?php echo $error_messages['fullname']; ?>';
var emailError = '<?php echo $error_messages['email']; ?>';
var cellphoneError = '<?php echo $error_messages['cellphone']; ?>';
var cityError = '<?php echo $error_messages['city']; ?>';
</script>
</head>
<body>
<div id="formWrap">
<div id="form">
</div>
<form action="contact.php" method="post" id="comments_form">
<?php if($form_complete === FALSE): ?>
<div class="row">
<div class="label"> Voor en achternaam </div>
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="<?php echo isset($_POST['fullname'])? $_POST['fullname'] : ''; ?>" /><?php if(in_array('fullname', $validation)): ?><span class="error"><?php echo $error_messages['fullname']; ?></span><?php endif; ?>
<div class="context"></div>
</div>
</div>
<div class="row">
<div class="label"> E-mailadres </div>
<div class="input">
<input type="text" id="e-mail" class="detail" name="email" value="<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>" /><?php if(in_array('email', $validation)): ?><span class="error"><?php echo $error_messages['email']; ?></span><?php endif; ?>
<div class="context"></div>
</div>
</div>
<div class="row">
<div class="label"> Telefoonnummer </div>
<div class="input">
<input type="number" id="cellphone" class="detail" name="cellphone" value="<?php echo isset($_POST['cellphone'])? $_POST['cellphone'] : ''; ?>" /><?php if(in_array('cellphone', $validation)): ?><span class="error"><?php echo $error_messages['cellphone']; ?></span><?php endif; ?>
<div class="context"></div>
</div>
</div>
<div class="row">
<div class="label"> In welke stad? </div>
<div class="input">
<select>
<option value="Utrecht">Utrecht</option>
</select>
<input type="dropdown" id="city" class="" name="city" value="<?php echo isset($_POST['city'])? $_POST['city'] : ''; ?>" /><?php if(in_array('city', $validation)): ?><span class="error"><?php echo $error_messages['city']; ?></span><?php endif; ?>
</div>
</div>
<div class="row">
<div class="label"> Opmerkingen </div>
<div class="input">
<textarea id= "comment" name="comment" class="mess"><?php echo isset($_POST['comment'])? $_POST['comment'] : ''; ?></textarea><?php if(in_array('comment', $validation)): ?><span class="error"><?php echo $error_messages['comment']; ?></span><?php endif; ?>
</div>
</div>
<div class="submit">
<input type= "submit" id="submit" name="submit" value="send message" />
</div>
</form>
<?php else: ?>
<p>Thank you for your Message!</p>
<script type="text-javascript">
window.setTimeout("location=('index.html');",5000)
</script>
<?php endif; ?>
</div>
</body>
</html>
if ($_POST["submit"])
$onderwerp = 'Bevestigingsmail';
$webmaster = 'mijn e-mail';
$e-mailadres = $_POST['email'];
$naam = $_POST['fullname'];
$telefoonnummer = $_POST['cellphone'];
$stad = $_POST['city'];
$opmerking = $_POST['comment'];
$body = <<<EOD
<br><hr><br>
E-mail: $email <br>
Naam: $fullname <br>
telefoonnummer: $cellphone <br>
Stad: $city <br>
Opmerking: $comment <br>
EOD;
$headers = "from: $email\r\n";
$headers .= "conntent-type: text/html\r\n";
$success =mail ($webmaster, $onderwerp, $body, $headers);
// Set email variables
$email_to = 'mijn email';
$email_subject = 'onderwerp';
// Set required fields
$required_fields = array('fullname','email','cellphone','city');
// set error messages
$error_messages = array(
'fullname' => 'Vul je naam in.',
'email' => 'Vul je e-mailadres in.',
'cellphone' => 'Vul je telefoonnummer in.',
'city' => 'Kies een stad.',
);
// Set form status
$form_complete = FALSE;
// configure validation array
$validation = array();
// check form submittal
if(!empty($_POST)) {
// Sanitise POST array
foreach($_POST as $key => $value) $_POST[$key] = remove_email_injection(trim($value));
// Loop into required fields and make sure they match our needs
foreach($required_fields as $field) {
// the field has been submitted?
if(!array_key_exists($field, $_POST)) array_push($validation, $field);
// check there is information in the field?
if($_POST[$field] == '') array_push($validation, $field);
// validate the email address supplied
if($field == 'email') if(!validate_email_address($_POST[$field])) array_push($validation, $field);
}
// basic validation result
if(count($validation) == 0) {
// Prepare our content string
$email_content = 'New Website Comment: ' . "\n\n";
// simple email content
foreach($_POST as $key => $value) {
if($key != 'submit') $email_content .= $key . ': ' . $value . "\n";
}
// if validation passed ok then send the email
mail($email_to, $email_subject, $email_content);
// Update form switch
$form_complete = TRUE;
}
}
function validate_email_address($email = FALSE) {
return (preg_match('/^[^@\s]+@([-a-z0-9]+\.)+[a-z]{2,}$/i', $email))? TRUE : FALSE;
}
function remove_email_injection($field = FALSE) {
return (str_ireplace(array("\r", "\n", "%0a", "%0d", "Content-Type:", "bcc:","to:","cc:"), '', $field));
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Contact Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="contactform.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript">
var nameError = '<?php echo $error_messages['fullname']; ?>';
var emailError = '<?php echo $error_messages['email']; ?>';
var cellphoneError = '<?php echo $error_messages['cellphone']; ?>';
var cityError = '<?php echo $error_messages['city']; ?>';
</script>
</head>
<body>
<div id="formWrap">
<div id="form">
</div>
<form action="contact.php" method="post" id="comments_form">
<?php if($form_complete === FALSE): ?>
<div class="row">
<div class="label"> Voor en achternaam </div>
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="<?php echo isset($_POST['fullname'])? $_POST['fullname'] : ''; ?>" /><?php if(in_array('fullname', $validation)): ?><span class="error"><?php echo $error_messages['fullname']; ?></span><?php endif; ?>
<div class="context"></div>
</div>
</div>
<div class="row">
<div class="label"> E-mailadres </div>
<div class="input">
<input type="text" id="e-mail" class="detail" name="email" value="<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>" /><?php if(in_array('email', $validation)): ?><span class="error"><?php echo $error_messages['email']; ?></span><?php endif; ?>
<div class="context"></div>
</div>
</div>
<div class="row">
<div class="label"> Telefoonnummer </div>
<div class="input">
<input type="number" id="cellphone" class="detail" name="cellphone" value="<?php echo isset($_POST['cellphone'])? $_POST['cellphone'] : ''; ?>" /><?php if(in_array('cellphone', $validation)): ?><span class="error"><?php echo $error_messages['cellphone']; ?></span><?php endif; ?>
<div class="context"></div>
</div>
</div>
<div class="row">
<div class="label"> In welke stad? </div>
<div class="input">
<select>
<option value="Utrecht">Utrecht</option>
</select>
<input type="dropdown" id="city" class="" name="city" value="<?php echo isset($_POST['city'])? $_POST['city'] : ''; ?>" /><?php if(in_array('city', $validation)): ?><span class="error"><?php echo $error_messages['city']; ?></span><?php endif; ?>
</div>
</div>
<div class="row">
<div class="label"> Opmerkingen </div>
<div class="input">
<textarea id= "comment" name="comment" class="mess"><?php echo isset($_POST['comment'])? $_POST['comment'] : ''; ?></textarea><?php if(in_array('comment', $validation)): ?><span class="error"><?php echo $error_messages['comment']; ?></span><?php endif; ?>
</div>
</div>
<div class="submit">
<input type= "submit" id="submit" name="submit" value="send message" />
</div>
</form>
<?php else: ?>
<p>Thank you for your Message!</p>
<script type="text-javascript">
window.setTimeout("location=('index.html');",5000)
</script>
<?php endif; ?>
</div>
</body>
</html>
- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 05/09/2015 20:12:57 door - Ariën -
Bovenin je script:
Wanneer ik onderstaande code weg laat dan werkt hij wel:
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
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
<?php
if ($_POST["submit"])
$onderwerp = 'Bevestigingsmail';
$webmaster = 'mijn e-mail';
$e-mailadres = $_POST['email'];
$naam = $_POST['fullname'];
$telefoonnummer = $_POST['cellphone'];
$stad = $_POST['city'];
$opmerking = $_POST['comment'];
$body = <<<EOD
<br><hr><br>
E-mail: $email <br>
Naam: $fullname <br>
telefoonnummer: $cellphone <br>
Stad: $city <br>
Opmerking: $comment <br>
EOD;
$headers = "from: $email\r\n";
$headers .= "conntent-type: text/html\r\n";
$success =mail ($webmaster, $onderwerp, $body, $headers);
if ($_POST["submit"])
$onderwerp = 'Bevestigingsmail';
$webmaster = 'mijn e-mail';
$e-mailadres = $_POST['email'];
$naam = $_POST['fullname'];
$telefoonnummer = $_POST['cellphone'];
$stad = $_POST['city'];
$opmerking = $_POST['comment'];
$body = <<<EOD
<br><hr><br>
E-mail: $email <br>
Naam: $fullname <br>
telefoonnummer: $cellphone <br>
Stad: $city <br>
Opmerking: $comment <br>
EOD;
$headers = "from: $email\r\n";
$headers .= "conntent-type: text/html\r\n";
$success =mail ($webmaster, $onderwerp, $body, $headers);