Wenn dieses Tutorial ist nicht genau was Sie suchen und Sie noch Fragen oder Vorschläge haben – lassen Sie uns wissen. Helfen Sie uns bitte um besser zu dienen!

Ihr Name

Emailadresse

Ihre Nachricht (benötigt)

captcha

Ausgewählte Vorlagen

Wie erstellt man einen Kontaktformular in HTML

In diesem Tutorial wollen wir Ihnen zeigen, wie erstellt man ein leichtes Kontaktformular fur HTML-basierte Website Template.

Zuerst erstellen Sie 2 Dateien: contact_form.html und contact.php. In der ersten Datei gibt es HTML-Code fur das Formular und die zweite verarbeitet die Daten aus dem Formular


HTML

Unten ist der HTML-Code des Kontaktformulars

<form action="contact.php" method="post">
	Your name
<input type="text" name="cf_name">
Your e-mail
<input type="text" name="cf_email">
Message
<textarea name="cf_message">
<input type="submit" value="Send"> <input type="reset" value="Clear"> </form>

Und hier ist wie das im Browser aussehen konnte

HTML contact form

So sehen die wichtigen Aspekte aus. Das <form (Formular)> Tag soll 2 zusatzliche Attribute haben:

action=”contact.php” – Dieses Attribut gibt an, wohin die vorgelegten Daten aus den Kontaktformular Felder schicken lassen

method=”post” – Dieses Attribut gibt an, wie Daten aus dem Formular an die Datei, die im actionAttribut ist, schicken lassen.Die <input> und <textarea> Tags sollen ein Attribute “Name” mit einem eindeutigen Identifizier haben. Man benutzt dieses Attribut um die Formulardaten, die schon im Server vorgeschlagen werden, zu identifizieren. Und 2 Eingabeelementen, die man als Submit und Clear Buttons benutzt, eine soll das Typ=”submit” und andere das Typ=”reset” haben”

Grundsatzlich, das ist alles. Ganz einfach!

PHP

Jetzt fur die contact.php Datei, die tatsachlich die Daten aus den Feldern greifen, zu einer Nachricht komponieren und an Ihre E-Mail senden. Laden Sie die Datei contact.php aus dieses Link. Unten ist der Code von die Date mit den Kommentaren fur ihre wichtigen Hauptabschnitte.

Zuordnung von Daten, die aus Felder des Komtaktfolmulars gesendet werden, zu PHP-Variablen ($cf_message, $field_email, $field_message)
$field_name = $_POST['cf_name'];
$field_email = $_POST['cf_email'];
$field_message = $_POST['cf_message'];

$mail_to muss die E-Mail der Websitebesitzer, das ist der Platz wohin die Mail zugestellt werden soll, enthalten. Die mehrere E-Mails konnen durch Kommas getrennt angegeben werden (z.B. mail-one@template-help.com, mail-two@template-help.com)

$mail_to = 'test@test-mail.com';

Der Betreff der E-Mail bekommen Sie aus den Kontaktfolmular

$subject = 'Message from a site visitor ' . $field_name;

Den Body der E-Mail bauen Sie auf wie folgt:

$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message;

Den E-Mail Header bauen Sie auf wie folgt:

$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message;

Die Definierung der Mail-Funktion() und Zuordnen die zum variablen $mail_status, der man benutzt um zu prufen, ob die Mail geliefert oder nicht geliefert wird

$mail_status = mail($mail_to, $subject, $body_message, $headers);

Fur den erfolgreiche E-Mail-Funktion gibt es den folgenden Code

if ($mail_status) { ?>
	<script language="javascript" type="text/javascript">
		// Print a message
		alert('Vielen Dank fur Ihre Nachricht. Wir werden Sie umgehend kontaktieren.');
		// Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com
		window.location = 'contact_page.html';
	</script>
<?php
}

Wenn die E-Mail-Funktion ausfallt, gibt es den folgenden Code

else { ?>
	<script language="javascript" type="text/javascript">
		// Print a message
		alert(' Senden der Nachricht fehlgeschlagen. Bitte, senden Sie die E-mail an gordon@template-help.com');
		// Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com
		window.location = 'contact_page.html';
	</script>
<?php
}?>

Laden Sie die kompilierten Dateien contact_form.html und contact.php als Gesamtpaket herunter (single package)

.

 

Folgen Sie bitte den Anweisungen in unserem Tutorial wie man die Felder im Kontaktfolmular hinzufugt ( Wie fugt man Felder zu Kontaktformular hinzu )

  • Aya

    Hello,

    1st thanks,
    When I try this code (how to create a contact form), I got the following error:

    Warning: mail() [function.mail]: Failed to connect to mailserver at “localhost” port 25, verify your “SMTP” and “smtp_port” setting in php.ini or use ini_set() in D:\XAMPP\xampp\htdocs\Own_Work_Comp\Company_Site\contact.php on line 11
    Failure

    No votes yet.
    Please wait...
    • Chris Diaz

      The contact form script can be used only on a live server. You are using it on your local server (XAMP based).

      In order to make it work you need to upload it to the live server (order hosting) or configure mail server on your XAMP localhost

      No votes yet.
      Please wait...
  • Bill

    Hi

    your tutorial is very easy understand and viable, but I have a question about how to make contact.php when contact form have a drop down selection. thanks if you can have any help.

    Bill

    No votes yet.
    Please wait...
  • somebody

    I used this form and I like that it is simple but I need to make some fields to be “required” how can I do this using this form?

    No votes yet.
    Please wait...
    • Chris Diaz

      The tutorial on how to create required fields will be added in nearest future

      No votes yet.
      Please wait...
      • somebody

        Thanks, could you post the link for that tutorial on a comment here(when that tutorial will be available)?

        No votes yet.
        Please wait...
  • Dreagoen

    Hi, after 10 minutes of trials and errors I managed to do that on the host it’s very simple. I don’t even know how do i made errors at all, maybe i’m just don’t pay enough attention. So if someone is failing at doing this, here’s the tip: Read EVERY WORD in this tutorial… And thanks to Gordon for the tutorial.

    No votes yet.
    Please wait...
  • magnus

    Hi. do i need to have installed a mail server on my web server for this to work? I have set it up like its shown in the tutorial, and i get the “tank you for the message i will contact you shortly”, but no mail to the mail to address. Is there something i`m missing. What are the requirements for this form to work?

    No votes yet.
    Please wait...
    • Gordon J. Blair

      Most local servers do not include mail server, so you’ll need to install some additional software for that. Though there are many risks connected with that, so I suggest you test the form on a live server.
      If you don’t have a host and a domain yet, then google for some free hosting providers. There are many on the web and most of them support php mail() function

      No votes yet.
      Please wait...
  • eric

    i need a form box that will email back to my email account. I have the box part which it was easy but i can’t email my account to me. Please help me.

    No votes yet.
    Please wait...
  • Jaswant

    Hi,
    The tutorial is very easy. Thanx to gordon.
    But i am facing a problem. When i amsubmitting the form it only prompts “Message failed,please send an email to me”.

    It is not emailing the contents to me.

    Jaswant

    No votes yet.
    Please wait...
    • Gordon J. Blair

      Might be that your server does not support PHP mail() function, so the script fails. Though this also can be some server specific configuration, which does not allow execution of the script. In general this should be investigated on the server side

      No votes yet.
      Please wait...
      • Gordon J. Blair

        Another common problem is that some hosts, require all PHP mails to specify a FROM: and TO: address that is in your own domain.
        E.g. if your site is ww w.mydomain.com then the email you use in the form can be only {some-name}@mydomain.com
        A solution to this would be deleting the $headers variable from the mail(…) function

        No votes yet.
        Please wait...
  • Patrick

    Tks just looking ill try it when I get home sounds simple tks again

    No votes yet.
    Please wait...
  • Robert Moran

    Great, there are actually some great tips on here that my customers might find this relevant, I will email them a link. Thanks

    No votes yet.
    Please wait...
  • Tom

    When I hit the submit button it takes me to a blank page.

    No votes yet.
    Please wait...
  • billy

    Awesome! great info.

    No votes yet.
    Please wait...
  • Radczyck

    awesome

    No votes yet.
    Please wait...
  • Fizurro

    hi thats cool
    1.when hit send button so where the data will send n how to make the data directly send to my email?
    2.if i want to put some creative out look box then how i want to use that code?

    No votes yet.
    Please wait...
    • Anonymous

      1. To make the messages be setnt to your specific email address edit the $mail_to = ‘test@test-mail.com’; variable. Replace text@text-mail.com with your email address

      2. Unfortunately this can’t be done in this example. To change the window style you need to create the JavaScript based form.

      No votes yet.
      Please wait...
  • Anonymous

    You can try to use this script:

    window.onload=function(){
    var elForm=document.getElementsByTagName(‘form’)[0]; // Get the first form in the document
    elForm.onsubmit=function()
    {
    var required=[‘First Name’,’Last Name’,’Member Name’];
    // Place in this array the name of the form that you think should be mandatory
    var bool=true; // Create bool variable and set its value to true
    for(var i=0;i<required.length;i++)
    {
    if(document.getElementsByName(required[i])[0].value=='')
    {
    alert(required[i]+' textbox is mandatory to fill in.');
    bool=false;
    }
    }
    return bool;
    }
    }

    I recommend you to search google for “HTML form required field”

    No votes yet.
    Please wait...
  • Anonymous

    Add it to the HTML file

    No votes yet.
    Please wait...
  • Lisa

    Hi. I changed only a few things in the php file and saved both locally to my computer. But when I test it out and fill out the form, it gives me a pop up asking if I want to download or save. What am I doing wrong?
    Thanks.
    Lisa

    No votes yet.
    Please wait...
    • Alex Ross

      Unfortunately, it will not work locally. You should upload it to your hosting server.

      No votes yet.
      Please wait...
  • Josh

    Hi there,

    Is there anyway to make the message box bigger automatically?

    Thanks,
    Josh

    No votes yet.
    Please wait...
    • naz

      I managed to increase the size of the message box by add altering this line:

      cols=”50″ means the width of the box is 50 characters long and rows=”10″ means the height is 10 characters high. hope that helps.

      No votes yet.
      Please wait...
  • Issamht65

    //////////////////////

    No votes yet.
    Please wait...
  • tejinder singh

    thanks alot………..i just downloaded the SINGLE PACKAGE n works on very
    first time

    No votes yet.
    Please wait...
  • Marco

    Thanks for the very useful code.

    No votes yet.
    Please wait...
  • escort hydra

    this is awesome code. I was looking for a html form and found your code. thanks a lot

    No votes yet.
    Please wait...
  • David Reilly

    How would I add code that would make certain fields a requirement? Thanks.

    No votes yet.
    Please wait...
    • alex_ross

      you can just add “required” attribute for a needed input:

      required=”required”

      so it will look like:

      <input type=”text” required=”required” />

      No votes yet.
      Please wait...
  • Keypixel

    Yes ! its work ! Thanks for the code !!!!!

    No votes yet.
    Please wait...
  • JB

    What does this require on the server side?

    No votes yet.
    Please wait...
    • alex_ross

      PHP software installed and enabled/configured PHP mail() function.

      No votes yet.
      Please wait...
  • Shane

    you cant add or remove anything to this, so if you want to add say for examples: Website, it doesnt work, only can you have the 3 things as listed. pointless!

    No votes yet.
    Please wait...
    • alex_ross

      make sure to check the following tutorial: http://www.templatemonster.com/help/adding-fields-to-the-html-contact-form.html

      No votes yet.
      Please wait...
  • alex_ross

    the most likely PHP is not installed or you just opened your page with CF

    No votes yet.
    Please wait...
    • Elle

      I’m having the same issue – when you click send, it just opens the php file in the browser. I know PHP is definitely installed. What else could cause this?

      No votes yet.
      Please wait...
      • Alex Ross

        Make sure you are opening .html file with your CF “via server” like by typing: http://localhost/contact.html in the browser address bar. It will not work if you just go to e.g.: AppServwwwcontact.html and open the file.

        No votes yet.
        Please wait...
  • alex_ross

    you need to contact your hosting provider and consult with them.

    No votes yet.
    Please wait...
  • Alex Ross

    please submit your request at: http://esupport.template-help.com/index.php?_m=tickets&_a=submit

    No votes yet.
    Please wait...
  • boxon

    I am just a stupid front-end developer, and i dont like to mess with PHP, MySQL and other witchcraft. But sometimes it is really hard to mess with programmers who usualy dont have any social skills at all, and it is easier to do something on my own. After about 50 attempts to make functional and working contact form, I stumbled upon this site, and did it from the first. This is apsolutely best, simplest and clearest tutorial that I have seen on the net in a whyle. Thank you, guys, and feel fre to make more tutorials.

    No votes yet.
    Please wait...
  • Kdembowski

    thaaanks a looooooot.

    No votes yet.
    Please wait...
  • thankful

    Thank you! I’ve only been using PHP for a bit, but this simplified things greatly!

    No votes yet.
    Please wait...
  • Pacquiao vs Bradley

    Amazing, the form I used before this will send the message to my spam folder but I change the code like above and it works, everytime I do testing, it will go to my inbox. Thanks a lot..

    No votes yet.
    Please wait...
  • Alex Ross

    The most likely the emails are being blocked by your hosting server. Please contact your hosting provider and check the issue with them.

    No votes yet.
    Please wait...
  • KP

    This is the most amazingly post I would have ever seen. I have been through a lot of contact form pages, but always ended up tearing my hair because of their complex scripts and codings. Here, it’s is very easy to understand and working script. Cheers :D

    No votes yet.
    Please wait...
  • Tonyabiyounes

    Big Thanks for your support

    No votes yet.
    Please wait...
  • Ewerew

    great thx

    No votes yet.
    Please wait...
  • Alexis Goovaerts

    nice, perfect!

    No votes yet.
    Please wait...
  • Adetola Sadiku

    Here is my error precisely ” Warning mail() [function.mail]: SMTP server response 550 5.7.1 Unable to relay for xyz@stc.com etc….. contact.php on line 16

    No votes yet.
    Please wait...
    • Alex Ross

      The most likely, your SMTP server isn’t open-relay one. Please consult with your hosting provider.

      No votes yet.
      Please wait...
      • Adetola Sadiku

        what kind of question do I need to ask? And when you say hos provider, do you yahoo?

        No votes yet.
        Please wait...
        • Alex Ross

          Unfortunately, I don’t know who is your hosting provider. This is Yahoo as far as I can see.

          No votes yet.
          Please wait...
          • Adetola Sadiku

            Yes, it is Yahoo

            No votes yet.
            Please wait...
          • Alex Ross

            In this case you should contact Yahoo hosting support team directly.

            No votes yet.
            Please wait...
  • Alex Ross

    1) Make sure you have:

    2) Make sure that names of input fields and names of grabbed variables in PHP are the same, e.g.:

    $field_name = $_POST[‘cf_name’];

    No votes yet.
    Please wait...
    • olya

      thanks! 2) was the issue

      No votes yet.
      Please wait...
  • JeanB

    This code is spam protected?

    No votes yet.
    Please wait...
    • Alex Ross

      Basically no.

      No votes yet.
      Please wait...
  • Rizwansalaam

    Thanks alot for this. Although there are many tutorial’s out there to show you how to create a contact form, none are as concise, a step-by-step way of doing this, (how tutorials should be). I’ve seen complex ways to the bizarre of creating a simple contact form. This truly is simple, and i have limited php knowledge, even i understand what is going on here. Keep up the excellent work.

    No votes yet.
    Please wait...
  • Jinja Bar Bistro

    Fantastic. Thank you!

    No votes yet.
    Please wait...
  • Devon Gilchrist

    So sorry, that last comment from Jinja was supposed to be from me (manage too many accounts:) This tut, html code snippet and php download just saved me a lot of time. Thank you!

    No votes yet.
    Please wait...
  • Dan

    THANK YOU SO MUCH!

    No votes yet.
    Please wait...
  • Midhu

    Brilliant Stuff! Loved the way it was explained. Thank you!

    No votes yet.
    Please wait...
  • Alex Ross

    Unfortunately, it will not work locally. You should upload it to your hosting server.

    No votes yet.
    Please wait...
  • Padmanaban Mine

    Nice bady……

    No votes yet.
    Please wait...
  • Alex Ross

    Please check the following tutorial:
    http://www.templatemonster.com/help/adding-fields-to-the-html-contact-form.html

    No votes yet.
    Please wait...
  • hugo

    I must thank you for the coding tips. It worked perfectly. Thanks so much my friend, always keep sharing your knowledge!

    No votes yet.
    Please wait...
  • Alex Ross

    Unfortunately, it will not work locally. You should upload it to your hosting server.

    No votes yet.
    Please wait...
  • james

    thank you :)

    No votes yet.
    Please wait...
  • Martin

    Man. THANK YOU. Just THANK YOU. Seriously, this post is 1 in a million.

    No votes yet.
    Please wait...
  • Tilak Dutt

    in which dir should i place the contact.php file?

    No votes yet.
    Please wait...
    • service2u

      it goes in the same dir as the contact HTML,

      No votes yet.
      Please wait...
  • Jessica Thompson

    This is the most helpful way to create a nice, working contact form I’ve found so far, thank you!

    No votes yet.
    Please wait...
  • Matthew Dewhurst

    I’m new to Php, I was wondering if you need a database for this to work or should it just work with that one Php file and the Html form? Thanks.

    No votes yet.
    Please wait...
    • Alex Ross

      Basically you don’t need a database to make CF work.You just need at least two files .html and .php one.

      No votes yet.
      Please wait...
      • Matthew Dewhurst

        Thanks for the reply, I didn’t actually notice you had replied to my comment until now, I went ahead and used the scripts anyway and it works perfectly, thanks a lot!

        No votes yet.
        Please wait...
  • ramesh b

    when i am using the contact form code when i press submit button on server side .php coding is displaying and even i cannot receive any following mail which specified in the contact.php.pls answer to the post to my mail bramesh.rams@gmail.com

    No votes yet.
    Please wait...
    • Alex Ross

      Please make sure that your server supports PHP.

      No votes yet.
      Please wait...
  • Remalion

    Outstanding, just what i was looking for. Great job mate.
    Nice and simple. many thanks.

    No votes yet.
    Please wait...
  • paguba

    Hello can anyone tell me why only message its shown in the email sent?…

    in php file i have placed like this:

    $nume = $_POST[‘nume’];
    $email = $_POST[’email’];
    $mesaj = $_POST[‘mesage’];

    $mail_to = ‘exemple@mail.com’;
    $subject = ‘Mesaj de la un vizitator ‘.$nume;

    $body_message .= ‘E-mail: ‘.$email.”n”;
    $body_message .= ‘Mesaj: ‘.$mesaj;

    $headers = ‘De la: ‘.$email.”rn”;

    $mail_status = mail($mail_to, $subject, $body_message, $headers);

    and in html file i placed like this:

    Nume :

    Email :

    Mesaj :
    mesaj

    so when i recieving mail ..i can see only message..but $body_message .= ‘E-mail: ‘.$email.”n”; and $headers = ‘De la: ‘.$email.”rn”; i can’t see it…where i’m doing wrong?please help me.

    Thx in advance.

    No votes yet.
    Please wait...
    • Alex Ross

      Your name and email fields in HTML should have attributes “name” with the corresponding values: nume and email

      No votes yet.
      Please wait...
  • asif

    supper post this is helpful post.
    Live Technology

    No votes yet.
    Please wait...
  • Sammy Kumar

    So simple thanks!

    No votes yet.
    Please wait...
  • 99th Packers

    Very useful information. Thank you for sharing
    it. Thanks 99th

    No votes yet.
    Please wait...
  • Carlton Stith

    This form worked great. Thanks!

    No votes yet.
    Please wait...
  • Jennifer Booth

    This is fantastic – thank you for simplifying my life! Quick question though – how do I increase the size of the input fields? I know it has to do with character count, but I’m not sure how/where to do it. Thanks!

    No votes yet.
    Please wait...
  • Luke

    Thanks alot. This is brilliant. :) Been trying to do this for so long.

    No votes yet.
    Please wait...
  • Dimitri Fox

    Dimitri Fox

    worked fine for me.thank you

    No votes yet.
    Please wait...
  • Preetham

    Does it work with local system?

    No votes yet.
    Please wait...
    • Alex Ross

      Unfortunately, no.

      No votes yet.
      Please wait...
  • Afsal mohammed

    thank you from adskart.

    No votes yet.
    Please wait...
  • Chantal M. Bourgonje

    Very grateful for this information. It works! It even worked at my first try. And it was simple too. Thank you so much for this.

    No votes yet.
    Please wait...
  • Suriyaa Kudo

    Thanks. Very helpful. :-D

    No votes yet.
    Please wait...
  • sturzi

    Thank you very much. This is exactly the kind of explanation I sought.

    No votes yet.
    Please wait...
  • vivek singh

    thanks a lot for the code

    No votes yet.
    Please wait...
  • Alexandru Tudoran

    Muchas gracias, nos ha ayudado con la landing page de nuestra empresa

    No votes yet.
    Please wait...
  • Daniel Alejandro Sánchez Norie

    Excelente y super sencillo, lo aplique a un diseño diferente de un template específico y funcionó de maravilla, ya hasta me siento un web mater. jeje Gracias Monsters

    No votes yet.
    Please wait...
  • vinayak jambhale

    thank you soooo muchhh sir…..
    that was really helpful for beginners….
    it works greatly..

    No votes yet.
    Please wait...
 
Online-Chat
We help you to choose the right product.
Chat starten