Gå til innhold

Kontaktskjema script

Bika

Av Bika
i Programmering og webutvikling

Anbefalte innlegg

Bika

Bika

Skrevet
Skrevet

Hei.

Jeg prøver å legge til et kontaktskjema til min nettside. Jeg har 1 side uten PHP tilgang og 1 med.. Kan jeg legge PHP scripte på 1 server og HTML scripte på den siden jeg trenger kontaktskjema på også legger jeg inn navnet på stedet der php filen ligger. Eller vil den ikke få kontakt?

Eksempel:
Min side uten PHP heter "Hunder.no", men jeg har også en side med PHP som heter "katter.no"

 

Jeg legger php filen i ftp på "katter.no", men html scripte legger jeg i "hunder.no"
I html scripte henviser jeg da til katter.no, som f.eks "<form name="contactform" method="post" action="katter.no/send_form_email.php">

 

Vil det da funke? Vil hunder.no videresende skjema til katter.no som sender det til den eposten jeg legger inn i php scripte. Eller MÅ det være på samme server?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Bika

Bika

Skrevet
  • Forfatter
Skrevet (endret)

Det vil fungere, men du må sette opp tilkoblingen via ajax dersom du skal returnere html inn i eksisterende side.

Har ikke vært borti ajax før.. Hvordan settes det opp? Trodde html scriptet ville sende skjema til php scriptet som igjen ville sende html skjema over til den eposten som ligger i php scripte?

 

Her er scriptene som skal brukes:

<form name="contactform" method="post" action="martinsbingo.com/send_form_email.php">
 
<table width="450px">
 
<tr>
 
 <td valign="top">
 
  <label for="first_name">Fornavn: *</label>
 
 </td>
 
 <td valign="top">
 
  <input  type="text" name="first_name" maxlength="50" size="30">
 
 </td>
 
</tr>
 
<tr>
 
 <td valign="top"">
 
  <label for="last_name">Etternavn: *</label>
 
 </td>
 
 <td valign="top">
 
  <input  type="text" name="last_name" maxlength="50" size="30">
 
 </td>
 
</tr>
 
<tr>
 
 <td valign="top">
 
  <label for="email">Epost: *</label>
 
 </td>
 
 <td valign="top">
 
  <input  type="text" name="email" maxlength="80" size="30">
 
 </td>
 
</tr>
 
<tr>
 
 <td valign="top">
 
  <label for="telephone">Telefon nr: </label>
 
 </td>
 
 <td valign="top">
 
  <input  type="text" name="telephone" maxlength="30" size="30">
 
 </td>
 
</tr>
 
<tr>
 
 <td valign="top">
 
  <label for="comments">Tillegsinfo: *</label>
 
 </td>
 
 <td valign="top">
 
  <textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>
 
 </td>
 
</tr>
 
<tr>
 
 <td colspan="2" style="text-align:center">
 
  <input type="submit" value="Send">
 
 </td>
 
</tr>
 
</table>
 
</form>

PHP scripte:

<?php
 
if(isset($_POST['email'])) {
 
     
 
 
    $email_to = "[email protected]";
 
    $email_subject = "EBC bremseklosser";
 
     
 
     
 
    function died($error) {
 
 
        echo "Beklager, men vi fikk ikke sendt skjema. Det var noe som manglet i skjema ";
 
        echo "Det fins følgende feil.<br /><br />";
 
        echo $error."<br /><br />";
 
        echo "vennligst gå tilbake og rett på disse punktene.<br /><br />";
 
        die();
 
    }
 
     
 
    // validation expected data exists
 
    if(!isset($_POST['first_name']) ||
 
        !isset($_POST['last_name']) ||
 
        !isset($_POST['email']) ||
 
        !isset($_POST['telephone']) ||
 
        !isset($_POST['comments'])) {
 
        died('Vi beklager. Men det er en feil med skjemaet du prøver å sende.');      
 
    }
 
     
 
    $first_name = $_POST['first_name']; // required
 
    $last_name = $_POST['last_name']; // required
 
    $email_from = $_POST['email']; // required
 
    $telephone = $_POST['telephone']; // not required
 
    $comments = $_POST['comments']; // required
 
     
 
    $error_message = "";
 
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
 
  if(!preg_match($email_exp,$email_from)) {
 
    $error_message .= 'Din epost er ikke gyldig.<br />';
 
  }
 
    $string_exp = "/^[A-Za-z .'-]+$/";
 
  if(!preg_match($string_exp,$first_name)) {
 
    $error_message .= 'Fornavn er ikke gyldig.<br />';
 
  }
 
  if(!preg_match($string_exp,$last_name)) {
 
    $error_message .= 'Etternavn er ikke gyldig.<br />';
 
  }
 
  if(strlen($comments) < 2) {
 
    $error_message .= 'Tillegsinfo er ikke gyldig.<br />';
 
  }
 
  if(strlen($error_message) > 0) {
 
    died($error_message);
 
  }
 
    $email_message = "Form details below.\n\n";
 
     
 
    function clean_string($string) {
 
      $bad = array("content-type","bcc:","to:","cc:","href");
 
      return str_replace($bad,"",$string);
 
    }
 
     
 
    $email_message .= "Fornavn: ".clean_string($first_name)."\n";
 
    $email_message .= "Etternavn: ".clean_string($last_name)."\n";
 
    $email_message .= "Epost: ".clean_string($email_from)."\n";
 
    $email_message .= "Telefon nr: ".clean_string($telephone)."\n";
 
    $email_message .= "Tillegsinfo: ".clean_string($comments)."\n";
 
     
 
     
 
// create email headers
 
$headers = 'Fra: '.$email_from."\r\n".
 
'Svar til: '.$email_from."\r\n" .
 
'X-Mailer: PHP/' . phpversion();
 
@mail($email_to, $email_subject, $email_message, $headers); 
 
?>
 
 
 
 
 
 
Takk for at du tok kontakt med oss. Vi vill besvare din henvendelse så fort vi kan. Normal behandligstid er 1-3 virkedager.
 
 
 
<?php
 
}
 
?>

Dette er de aktuelle scriptene jeg har prøvd..

Endret av Bika
Lenke til kommentar
quantum

quantum

Skrevet
Skrevet

Dette finner du vel ut av ved å kjøre scriptet? Men ja, det vil vel virke som du tenker. Men når du hopper fra den ene til den andre serveren vil du ikke hoppe tilbake igjen, altså om du starter opp på hunder.no vil du ikke komme tilbake igjen dit når teksten "takk for at du tok kontakt ..." vises. Det vil sikkert noen synes er helt ok, mens andre vil bli forvirra.

Lenke til kommentar
Bika

Bika

Skrevet
  • Forfatter
Skrevet (endret)

Jeg har satt opp scriptene på hver sin server, og hvis jeg trykker på send hopper den tilbake til forsiden av "Hunder.no" og det kommer ingen mail fra skjema jeg nettopp fylte ut.

Noen som ser årsaken til dette? Ut fra hvordan scriptene er satt opp burde jo det sendes et skjema til php serveren "katter.no" som igjen sender det skjema på mail til eposten i scripte :confused:

 

Dette finner du vel ut av ved å kjøre scriptet? Men ja, det vil vel virke som du tenker. Men når du hopper fra den ene til den andre serveren vil du ikke hoppe tilbake igjen, altså om du starter opp på hunder.no vil du ikke komme tilbake igjen dit når teksten "takk for at du tok kontakt ..." vises. Det vil sikkert noen synes er helt ok, mens andre vil bli forvirra.

Endret av Bika
Lenke til kommentar
Bika

Bika

Skrevet
  • Forfatter
Skrevet (endret)

jo.. Scripte ligger på serveren til martinsbingo.com
Men jeg fikk det til nå.. Mottar mail på ønsket epost og de kommer til en side på "martinsbingo.com" hvor det står "Takk for at du tok kontakt med oss. Vi vill besvare din henvendelse så fort vi kan. Normal behandligstid er 1-3 virkedager." Så bruker jeg bare et redirect script som sender de tilbake til siden de var på.

 

Men burde vel gå å få det sånn at siden kommer opp som en "pop up" og at de slipper å få en helt ny side? Jeg ser også at mailene ikke følger datofilter når de kommer inn. Noen forslag til hvorfor?

Endret av Bika
Lenke til kommentar
Lanes

Lanes

Skrevet
Skrevet (endret)

AJAX er ikke noe du setter opp sådan, men det er en metode for å kommunisere med en server uten å laste inn hele siden på nytt. Trenger ikke mange linjene JavaScript for å bruke det. Du vil fremdeles bruke (nesten) samme html, inputfelter og php, men selve innsendingen av skjema gjøres i bakgrunnen med JavaScript.

 

Dette vil for så vidt også la deg lage en egen pop-up som du ønsker.

 

Skal se om jeg ikke får laget et eksempel i løpet av dagen.

Endret av Lanes
Lenke til kommentar
Bika

Bika

Skrevet
  • Forfatter
Skrevet

AJAX er ikke noe du setter opp sådan, men det er en metode for å kommunisere med en server uten å laste inn hele siden på nytt. Trenger ikke mange linjene JavaScript for å bruke det. Du vil fremdeles bruke (nesten) samme html, inputfelter og php, men selve innsendingen av skjema gjøres i bakgrunnen med JavaScript.

 

Dette vil for så vidt også la deg lage en egen pop-up som du ønsker.

 

Skal se om jeg ikke får laget et eksempel i løpet av dagen.

Det er veldig snilt av deg hvis du finner tid til det.

Lenke til kommentar
Lanes

Lanes

Skrevet
Skrevet (endret)

Det gjenstår litt arbeid for å få dette til å se pent ut, men det burde være nok til å la deg sette i gang.

 

Merk at koden under kunne sett en del enklere ut dersom vi hadde benyttet oss av et rammeverk som f.eks. jQuery, jeg har derimot unnvært å gjøre dette siden vi kun skal sende et skjema.

 

Strengt tatt så trenger du ikke å gjøre så mye mer enn å kopiere inn koden under til bunnen av katter.html siden din og det vil fungere, men du ønsker nok å gjøre et par korreksjoner i hunder.php og i callback funksjonen i scriptet under for å få det til å se ut som du vil.


Ser vi bort fra mangelen på error handling i scriptet under så er det sådan kun nesten html redigering igjen.

<script type="text/javascript">

function sendAjax(form) {
	ajax.post('/hunder.php', serialize(form), function(response) {
        // Variablen som heter response er hva som ble returnert fra hunder.php, du kan gjøre hva du vil med denne. Jeg lager en alert boks kun for å vise at det kommer et svar fra serveren.
		alert(response);
	});
	return false;
}

document.forms['contactform'].onsubmit = function() {
	return sendAjax(this);
};

// Ajax koden under er tatt fra http://stackoverflow.com/a/18078705/1681418

var ajax = {};
ajax.x = function() {
    if (typeof XMLHttpRequest !== 'undefined') {
        return new XMLHttpRequest();  
    }
    var versions = [
        "MSXML2.XmlHttp.5.0",   
        "MSXML2.XmlHttp.4.0",  
        "MSXML2.XmlHttp.3.0",   
        "MSXML2.XmlHttp.2.0",  
        "Microsoft.XmlHttp"
    ];

    var xhr;
    for(var i = 0; i < versions.length; i++) {  
        try {  
            xhr = new ActiveXObject(versions[i]);  
            break;  
        } catch (e) {
        }  
    }
    return xhr;
};

ajax.send = function(url, callback, method, data, sync) {
    var x = ajax.x();
    x.open(method, url, sync);
    x.onreadystatechange = function() {
        if (x.readyState == 4) {
            callback(x.responseText)
        }
    };
    if (method == 'POST') {
        x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    x.send(data)
};

ajax.post = function(url, data, callback, sync) {
    ajax.send(url, callback, 'POST', data, sync)
};

// Her kopierer og legger du inn koden fra denne siden: 
// https://raw.githubusercontent.com/yurikoval/serialize-form/master/serialize.min.js
</script>

Jeg har satt opp et fungerende eksempel på https://dev.intensjon.no/hunder.html (merk at e-post ikke sendes, men du får meldingene). Jeg kommer til å fjerne scriptet etter noen dager.

 

Du vil få en sertifikatfeil når du kobler til serveren, men det er serveren min sitt problem, ikke scriptet ditt.

Endret av Lanes
Lenke til kommentar
Bika

Bika

Skrevet
  • Forfatter
Skrevet (endret)

Dette skal legges inn i html scripte mens php scripte skal forbli uberørt?

Tusen takk for koden

 

Blir dette riktig?

<p><strong>Vi er totalleverandør av EBC. Leverer til de fleste merker og modeller. Les under for å se hvilke klosser som passer deg!</strong></p>
<p><span style="text-decoration: underline;"><strong>Bruk kontaktskjema nederst for å få tilbud på EBC klosser fra oss.</strong></span></p>
<p><strong>EBC Utlimax</strong></p>
<p><span style="font-size: 12px;">Ett prisgunstig alternativ uten å gå på bekostning av kvalitet! EBC Ultimax klosser produseres uten tungmetaller og giftige fibre og er en av verdens første miljøvennlige bremseklosser. Klossene har høy friksjon, god levetid og minimalt støvnivå.</span></p>
<p><span style="font-size: 12px;"><span style="font-size: 12px;"><strong>EBC Greenstuff</strong></span></span></p>
<p><span style="font-size: 12px;"><span style="font-size: 12px;"><span style="font-size: 12px;">Vår bestselger for gatebruk!<br /> Greenstuff klossene gir generelt bedre bremseeffekt enn standard klosser og avgir vesentlig mindre støv, hele 30-50% mindre støv enn konvensjonelle stålfiber klosser. <br /></span></span></span></p>
<p><span style="font-size: 12px;"><span style="font-size: 12px;"><span style="font-size: 12px;"><span style="font-size: 12px;"><strong>EBC Redstuff</strong></span></span></span></span></p>
<p><span style="font-size: 12px;">For biler med 200hk+ og aktiv kjørestil!<br /> Redstuff C bremseklosser gir maks effekt, lang levetid og minst mulig støvnivå (60-90% mindre bremsestøv sammenlignet med vanlige stålfiber klosser). Disse anbefales for litt tyngre gatebiler og/eller biler med over 200hk + og en noe aktiv kjørestil. Dette kan også være ett perfekt valg for de som trekker mye vogn/henger. Redstuff C klossene er en hardere type legering som krever noe lengre innkjøring enn andre EBC klosser og du må regne med minst 1000km – og på enkelte modeller opp mot 2500km for skikkelig innkjøring.</span></p>
<p><span style="font-size: 12px;"><strong>EBC Yellowstuff R</strong></span></p>
<p><span style="font-size: 12px;">Produsert for maksimal bremse effekt og stort bruksområde, fra vanlig aktiv gatekjøring til klubb/ trackday kjøring.<br /> EBC Yellowstuff R klossene er et Aramid fiber basert belegg med høy effekt fra kaldt uten forvarming og egner seg på de fleste biler både for ordinær gatekjøring og klubbkjøring på bane. Selv om Yellowstuff R ikke krever forvarming vil den fungere bedre under påkjenning enn fra kaldt. Disse klossene er ikke en typisk EBC med lavt støvnivå, men er allikevel kjent for å støve mindre enn konkurrentene i samme kategori.<br /> Denne bremsepakken velges av mange entusiaster som driver mye klubbkjøring i tillegg til flere aktive førere innen Cup, Drifting, Rally, Formula Basic og annet. I Sverige er Yellowstuff R bl annet levert til Swedish Camaro Cup.</span></p>
<p><span style="font-size: 12px;"><span style="font-size: 12px;"><strong>EBC Bluestuff NDX</strong></span></span></p>
<p><span style="font-size: 12px;"><span style="font-size: 12px;"><span style="font-size: 12px;">For bane dager, klubbkjøring og profesjonell racing. EBC Bluestuff NDX er ett belegg som biter godt fra kaldt, gir progressiv følelse og meget god stoppeffekt. NDX klossene er laget med EBC Inter -layer system som betyr at det ligger ett mykere belegg mellom friksjonsdelen og bakplaten for å styrke bindingen og hindre at belegget løsner fra bakplaten under ekstreme påkjenninger. Med Bluestuff NDX klosser er det svært viktig med skikkelig innkjøring (Bed-In) prosedyre for riktig funksjon og levetid – når det er gjort kan vi virkelig si Mye kloss for pengene!<br /> Vi anbefaler alltid bruk av samme type kloss/belegg Foran og Bak. </span></span></span></p>
<form action="http://martinsbingo.com/send_form_email.php" method="post" name="contactform">
<table width="450px">
<tbody>
<tr>
<td valign="top"><label for="first_name">Fornavn: *</label></td>
<td valign="top"><input maxlength="50" name="first_name" size="30" type="text" /></td>
</tr>
<tr>
<td valign="top"><label for="last_name">Etternavn: *</label></td>
<td valign="top"><input maxlength="50" name="last_name" size="30" type="text" /></td>
</tr>
<tr>
<td valign="top"><label for="address">Adresse *</label></td>
<td valign="top"><input maxlength="30" name="address" size="30" type="text" /></td>
</tr>
<tr>
<td valign="top"><label for="email">Epost: *</label></td>
<td valign="top"><input maxlength="80" name="email" size="30" type="text" /></td>
</tr>
<tr>
<td valign="top"><label for="telephone">Telefon nr: *</label></td>
<td valign="top"><input maxlength="30" name="telephone" size="30" type="text" /></td>
</tr>
<tr>
<td valign="top"><label for="skilt_nr">Skilt nr: *</label></td>
<td valign="top"><input maxlength="30" name="skilt_nr" size="30" type="text" /></td>
</tr>
<tr>
<td valign="top"><label for="kontakt">Hvordan ønsker du å bli kontaktet?*</label></td>
<td valign="top"><input name="kontakt" type="checkbox" value="Mail" /> På Epost <input name="Ring" type="checkbox" value="ring" /> Ring meg</td>
</tr>
<tr>
<td valign="top"><label for="comments">Hvilke bremseklosser ønsker du tilbud på? *</label></td>
<td valign="top"><textarea cols="25" maxlength="1000" name="comments" rows="6"></textarea></td>
</tr>
<tr>
<td style="text-align: center;" colspan="2"><input type="submit" value="Send" /></td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript">

function sendAjax(form) {
	ajax.post('martinsbingo.com/send_contact_form.php', serialize(form), function(response) {
		alert(response);
	});
	return false;
}

document.forms['contactform'].onsubmit = function() {
	return sendAjax(this);
};

var ajax = {};
ajax.x = function() {
    if (typeof XMLHttpRequest !== 'undefined') {
        return new XMLHttpRequest();  
    }
    var versions = [
        "MSXML2.XmlHttp.5.0",   
        "MSXML2.XmlHttp.4.0",  
        "MSXML2.XmlHttp.3.0",   
        "MSXML2.XmlHttp.2.0",  
        "Microsoft.XmlHttp"
    ];

    var xhr;
    for(var i = 0; i < versions.length; i++) {  
        try {  
            xhr = new ActiveXObject(versions[i]);  
            break;  
        } catch (e) {
        }  
    }
    return xhr;
};

ajax.send = function(url, callback, method, data, sync) {
    var x = ajax.x();
    x.open(method, url, sync);
    x.onreadystatechange = function() {
        if (x.readyState == 4) {
            callback(x.responseText)
        }
    };
    if (method == 'POST') {
        x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    x.send(data)
};

ajax.post = function(url, data, callback, sync) {
    ajax.send(url, callback, 'POST', data, sync)
};

window.serialize = function(f) {
	  var i, j, q;
	  if (!f || f.nodeName !== "FORM") {
	    return;
	  }
	  i = j = void 0;
	  q = [];
	  i = f.elements.length - 1;
	  while (i >= 0) {
	    if (f.elements[i].name === "") {
	      i = i - 1;
	      continue;
	    }
	    switch (f.elements[i].nodeName) {
	      case "INPUT":
	        switch (f.elements[i].type) {
	          case "text":
	          case "hidden":
	          case "password":
	          case "button":
	          case "reset":
	          case "submit":
	            q.push(f.elements[i].name + "=" + encodeURIComponent(f.elements[i].value));
	            break;
	          case "checkbox":
	          case "radio":
	            if (f.elements[i].checked) {
	              q.push(f.elements[i].name + "=" + encodeURIComponent(f.elements[i].value));
	            }
	            break;
	          case "file":
	            break;
	        }
	        break;
	      case "TEXTAREA":
	        q.push(f.elements[i].name + "=" + encodeURIComponent(f.elements[i].value));
	        break;
	      case "SELECT":
	        switch (f.elements[i].type) {
	          case "select-one":
	            q.push(f.elements[i].name + "=" + encodeURIComponent(f.elements[i].value));
	            break;
	          case "select-multiple":
	            j = f.elements[i].options.length - 1;
	            while (j >= 0) {
	              if (f.elements[i].options[j].selected) {
	                q.push(f.elements[i].name + "=" + encodeURIComponent(f.elements[i].options[j].value));
	              }
	              j = j - 1;
	            }
	        }
	        break;
	      case "BUTTON":
	        switch (f.elements[i].type) {
	          case "reset":
	          case "submit":
	          case "button":
	            q.push(f.elements[i].name + "=" + encodeURIComponent(f.elements[i].value));
	        }
	    }
	    i = i - 1;
	  }
	  return q.join("&");
	};
</script>
Endret av Bika
Lenke til kommentar
Lanes

Lanes

Skrevet
Skrevet (endret)

Det ser korrekt ut, men det er jo bare å prøve og se.

 

Men det jeg ga deg er ikke en komplett løsning, det vil fungerere slik som det er nå, men du ønsker nok å redigere litt i php filen for å få outputen til å passe inn i et format som javascriptet i html siden kan takle. Om du testet det på min server ser du jo blant annet at meldingen som kommer opp har en rekke html tags i seg, som jo naturligvis ikke burde være der.

 

Du kan for eksempel bytte ut sendAjax funksjonen med noe slikt:

function sendAjax(form) {
	ajax.post('/katter.php', serialize(form), function(response) {
		document.getElementById('target').innerHTML = response;
	});
	return false;
}

Om du da lager en <div id="target"> på toppen av html siden din, og </div> rett etter </form> på bunnen vil responsen fra php filen settes direkte inn i siden. Velger du denne løsningen burde du nok lage en knapp eller lenke for å returnere tilbake til utgangspunktet da tilbake knappen i nettleseren ikke vil fungere.

 

Edit: Jeg oppdaterte versjonen på serveren min nå, du kan se hvordan det fungerer der.

Endret av Lanes
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...