hoe ik kan background image voor contact formulier maken in php?

Door johannes davidian op 26-01-2017 13:53

2.063 views

hallo.

ik heb deze code voor mij contact formulier in Header.php :


<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:


<?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.";
  }
}
?>

ik heb deze code op mij front page van wordpress


<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>

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

Marlies Maalderink

26-01-2017 14:11 gewijzigd op 26-01-2017 14:13

Even los van de background image, het is niet zo handig om dat contactformulier zo in je pagina's te stoppen, want dan heb je kans dat het script zich onvoorspelbaar gaat gedragen en op onverwachte momenten ineens opduikt of foutmeldingen geeft. Bovendien (tenzij je een child hebt aangemaakt voor een template) ben je alles kwijt als je theme geupdate wordt. Ik zou er een plugin van maken, dan kun je netjes je javascript en php in aparte mapjes zetten en het geheel bijvoorbeeld via een shortcode op de juiste plaats in je template kunnen tonen.

buiten dat, je zou het zo kunnen oplossen:


<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>

en dan in je css:


.formlayout {
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.

johannes davidian

26-01-2017 14:53

Hartelijke bedankt,
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

Ariën

26-01-2017 15:02

Ik zou die code gewoon in een css-file plaatsen. Veel makkelijker te onderhouden.

Marlies Maalderink

26-01-2017 15:19

In header.php vind je iets wat er zo uitziet:


<!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>

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:


<style type="text/css">
.formlayout {
background: url(deurlvandeafbeelding.png) no-repeat scroll top;
}
</style>

[size=xsmall]Toevoeging op 26/01/2017 15:22:25:[/size]

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?


<?php $urlafbeelding = "http://www.decompleteurl.png"; ?>

<style type="text/css">
.formlayout {
background: url(<?php echo $urlafbeelding; ?>) no-repeat scroll top;
}
</style>

johannes davidian

26-01-2017 16:14

dank u wel,
ik weet nu voldoende
johannes

Reageren

Inloggen om te reageren