hoe ik kan background image voor contact formulier maken in php?
ik heb deze code voor mij contact formulier in Header.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
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
<script>
function _(id) { return document.getelementById(id) ; }
function submitform() {
_("mybtn") .disabled = true;
_("status") .innerHTML = 'please wait ...' ;
var formdata = new FormData () ;
formdata.append( "b", _("b") .value );
formdata.append( "n", _("n") .value );
formdata.append( "e", _("e") .value );
formdata.append( "t", _("t") .value );
formdata.append( "o", _("o") .value );
formdata.append( "m", _("m") .value );
var ajax =new XMLHttprequest () ;
ajax.open( "POST", "example_parser.php" );
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
if(ajax.responseText =="success") {
_("my_form") .innerHTML = '<h2>Thanks '+_("n") .value+', your message has been sent.</h2>';
} else {
_("status") .innerHTML =ajax.responseText;
_("mybtn") .disabled =false;
}
}
}
ajax.send( formdata );
}
</script>
function _(id) { return document.getelementById(id) ; }
function submitform() {
_("mybtn") .disabled = true;
_("status") .innerHTML = 'please wait ...' ;
var formdata = new FormData () ;
formdata.append( "b", _("b") .value );
formdata.append( "n", _("n") .value );
formdata.append( "e", _("e") .value );
formdata.append( "t", _("t") .value );
formdata.append( "o", _("o") .value );
formdata.append( "m", _("m") .value );
var ajax =new XMLHttprequest () ;
ajax.open( "POST", "example_parser.php" );
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
if(ajax.responseText =="success") {
_("my_form") .innerHTML = '<h2>Thanks '+_("n") .value+', your message has been sent.</h2>';
} else {
_("status") .innerHTML =ajax.responseText;
_("mybtn") .disabled =false;
}
}
}
ajax.send( formdata );
}
</script>
ik heb deze code voor mij contact formulier in page.php:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
if( isset($_POST['n']) && isset($_POST['e']) && isset($_POST['t']) && isset($_POST['o']) && isset($_POST['m'] ) ) {
$n = $_POST['n'];
$e = $_POST['e'];
$t =$_POST['t'];
$o =$_POST['o'];
$m =nl2br($_POST['m'] );
$to ="[email protected]";
$from = $e;
$subject = 'Contact Form Message';
$headers = "From: $from\n";
$headers .="MIME-Version: 1.0\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\n";
if(mail($to, $subject, $message, $headers) ) {
echo "success";
} else {
echo "The server Failed to sent the message. Please try again later.";
}
}
?>
if( isset($_POST['n']) && isset($_POST['e']) && isset($_POST['t']) && isset($_POST['o']) && isset($_POST['m'] ) ) {
$n = $_POST['n'];
$e = $_POST['e'];
$t =$_POST['t'];
$o =$_POST['o'];
$m =nl2br($_POST['m'] );
$to ="[email protected]";
$from = $e;
$subject = 'Contact Form Message';
$headers = "From: $from\n";
$headers .="MIME-Version: 1.0\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\n";
if(mail($to, $subject, $message, $headers) ) {
echo "success";
} else {
echo "The server Failed to sent the message. Please try again later.";
}
}
?>
ik heb deze code op mij front page van wordpress
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<form id="my_form" onsubmit="submitForm(); return false;">
<p><input id="n" placeholder="Naam" required></p>
<p><input id="e" placeholder="Email Address" type="email" required></p>
<p><input id="t" placeholder="telefoon"required></p>
<p><input id="o" placeholder="Onderwerp" required></p>
<textarea id="m" placeholder="write your message here" rows="10" required></textarea>
<p><input id="mybtn" type="submit" value="Submit Form"> <span id="status"></span></p>
</form>
<p><input id="n" placeholder="Naam" required></p>
<p><input id="e" placeholder="Email Address" type="email" required></p>
<p><input id="t" placeholder="telefoon"required></p>
<p><input id="o" placeholder="Onderwerp" required></p>
<textarea id="m" placeholder="write your message here" rows="10" required></textarea>
<p><input id="mybtn" type="submit" value="Submit Form"> <span id="status"></span></p>
</form>
tuurlijk ik heb ook css styling code for deze contact formulier. .
het werkt allemaal perfect,
maar nu ik wil image gebruiken als background voor deze contact formulier,
ik heb van alles geprobeerd maar heeft niet gelukt.
ik denk zelf dat het moet in header.php zijn maar ik weet niet hoe en welke code!
hoe ik kan deze probleem oplossen?
dank u wel
johannes
buiten dat, je zou het zo kunnen oplossen:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div class="formlayout">
<form id="my_form" onsubmit="submitForm(); return false;">
<p><input id="n" placeholder="Naam" required></p>
<p><input id="e" placeholder="Email Address" type="email" required></p>
<p><input id="t" placeholder="telefoon"required></p>
<p><input id="o" placeholder="Onderwerp" required></p>
<textarea id="m" placeholder="write your message here" rows="10" required></textarea>
<p><input id="mybtn" type="submit" value="Submit Form"> <span id="status"></span></p>
</form>
</div>
<form id="my_form" onsubmit="submitForm(); return false;">
<p><input id="n" placeholder="Naam" required></p>
<p><input id="e" placeholder="Email Address" type="email" required></p>
<p><input id="t" placeholder="telefoon"required></p>
<p><input id="o" placeholder="Onderwerp" required></p>
<textarea id="m" placeholder="write your message here" rows="10" required></textarea>
<p><input id="mybtn" type="submit" value="Submit Form"> <span id="status"></span></p>
</form>
</div>
en dan in je css:
Code (php)
1
2
3
2
3
.formlayout {
background: url(deurlvandeafbeelding.png) no-repeat scroll top;
}
background: url(deurlvandeafbeelding.png) no-repeat scroll top;
}
Let erop dat je de absolute url gebruikt, zeker als je je code niet netjes in plugin mapjes zet waarbij je de juiste worpress methodes gebruikt om naar de bestanden te verwijzen. Want anders kan het probleem zijn dat wordpress gewoon de afbeelding niet kan vinden.
Gewijzigd op 26/01/2017 14:13:00 door Marlies Maalderink
het is gelukt
mij laatste vraag is alleen voor kennis te hebben.
kan deze .formlayout url in php ook plakken?
als ja hoe en waar?
korte antwoord is genoeg
johannes
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<!DOCTYPE HTML>
<html class="no-ja" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<?php wp_head(); ?>
</head>
<html class="no-ja" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<?php wp_head(); ?>
</head>
je ziet hier staan wp_head(); Dit is de functie die wordpress gebruikt om alle css en javascript bestanden te includen in de header en officieel de enige juiste manier om css in wordpress te gebruiken.
NOGMAALS als je losse code in je pagina's stopt ben je alles kwijt op het moment dat je theme geupdate wordt TENZIJ je een child theme gebruikt.
dat gezegd hebbende, als je persé die css los op een pagina wil includen doe je dat zo, direct voor de </head> tag in je header.php file:
Code (php)
1
2
3
4
5
2
3
4
5
<style type="text/css">
.formlayout {
background: url(deurlvandeafbeelding.png) no-repeat scroll top;
}
</style>
.formlayout {
background: url(deurlvandeafbeelding.png) no-repeat scroll top;
}
</style>
Toevoeging op 26/01/2017 15:22:25:
Dat is dan niet in php maar in html, begrijp niet precies wat je bedoelt met 'kan deze .formlayout url in php ook plakken?'
of bedoel je soms zoiets?
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?php $urlafbeelding = "http://www.decompleteurl.png"; ?>
<style type="text/css">
.formlayout {
background: url(<?php echo $urlafbeelding; ?>) no-repeat scroll top;
}
</style>
<style type="text/css">
.formlayout {
background: url(<?php echo $urlafbeelding; ?>) no-repeat scroll top;
}
</style>
ik weet nu voldoende
johannes