Kontaktformular.com

Each download package includes the contact form script with all available features. You can optionally activate and deactivate the consent to the data privacy policy (GDPR).

The Advanced Version, the Standard Version, and the Minimalistic Version differ only in their appearance. All versions include the full range of functions. You can also use our contact form tutorial to easily create a contact form based on our form script.

The contact form requires at least PHP 7.4 or higher. (PHP 8.3 compatible!)

Download your (responsive) HTML contact form code for your homepage today! It is mobile friendly and includes email upload and spam protection (captcha) functions!

  HTML Basics: Creating a Contact Form

In this HTML tutorial, we will show you how to create the HTML structure for a contact form script. The explanations in the tutorial can be easily followed with ChatGPT. An AI like ChatGPT can assist you in creating an HTML contact form if you need a very simple contact form script. On our site, we already offer a ready-made contact form script for download. Benefits: Many contact form templates (something for every website!); great features and excellent spam protection!

The Form Tag

In HTML, the form tag is used for forms. The form tag has an opening and a closing tag.

Within the opening tag, you can use the attribute "method" to specify whether you want to retrieve data from a server or submit data through the form. Since you want to submit data with a contact form, you would enter "post" here.

<form method="post"></form>

The Input Tag

For the small input fields of your contact form, you use the input tag. The input tag is a standalone tag and therefore does not require a closing tag.

Within the input tag, you can use the attribute "type" to specify the function of your input field. For the email input field, you would enter "email" here, and for a text input field, "text".

<input type="text">
<input type="email">

The Textarea Tag

For the large text field of your contact form, you use the textarea tag. This tag has an opening and a closing tag.

Within the opening tag, you can use the attribute "rows" to specify how many rows your text input field has. If you want your input field to be 7 rows high, you would enter the number "7" here.

<textarea rows="7"></textarea>

The Label Tag

Now, you should give each of your input fields a label, as otherwise, the visitors of your website won't know which information belongs in which field.

For this, you use the label tag in forms. The label tag has an opening and a closing tag. You then insert the respective text between the opening and closing tags.

<label>Name:</label>
<input type="text">
<label>Email:</label>
<input type="email">
<label>Subject:</label>
<input type="text">
<label>Message:</label>
<textarea rows="7"></textarea>

The "name" Attribute

Finally, you should give each of your input fields a name so that your server can understand which information is in which field. For this, you use the attribute "name".

<label>Name:</label>
<input type="text" name="name">
<label>Email:</label>
<input type="email" name="email">
<label>Subject:</label>
<input type="text" name="subject">
<label>Message:</label>
<textarea rows="7" name="message"></textarea>

Setting Required Fields

If your contact form contains required fields, you can define them using the attribute "required".

<label>Name:</label>
<input type="text" name="name">
<label>Email:</label>
<input type="email" name="email" required>
<label>Subject:</label>
<input type="text" name="subject">
<label>Message:</label>
<textarea rows="7" name="message" required></textarea>

Adding a Button

Finally, you need to add a button to your contact form. For buttons, you use the button tag. This tag has an opening and a closing tag.

Within the opening tag, you must specify the attribute "type="submit"" to indicate that this is the submit button.

Between the opening and closing tags, you can insert any text that will be displayed on your button.

<button type="submit">Submit Now!</button>

Then save your HTML file and open it in a browser.

The HTML Code

<form method="post">
    <label>Name:</label>
    <input type="text" name="name"> <br>
    <label>Email:</label>
    <input type="email" name="email" required> <br>
    <label>Subject:</label>
    <input type="text" name="subject"> <br>
    <label>Message:</label>
    <textarea rows="7" name="message" required></textarea> <br>
    <button type="submit">Submit Now!</button>
</form>

Now the HTML structure of your contact form is complete. To make the contact form functional, you need PHP. You can use the contact form from kontaktformular.com or create a contact form with ChatGPT. On kontaktformular.com, you will find a ready-made contact form script that uses HTML, CSS, JavaScript, and PHP.

The create-forms.html file:

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.3, user-scalable=yes">
    <meta name="description" content="This is the index.html file from the HTML basics course.">
    <meta name="keywords" content="html, basics course, tutorial, youtube">
    
    <title>Index - HTML Basics Course</title>

</head>

<body>

    <header>
    
        <ul>
            <li> <a href="./index.html">Home</a> </li>
            <li> <a href="./format-text.html">Format text</a> </li>
            <li> <a href="./add-images.html">Add images</a> </li>
            <li> <a href="./create-links.html">Create links</a> </li>
            <li> <a href="./create-lists.html">Create lists</a> </li>
            <li> <a href="./create-tables.html">Create tables</a> </li>
            <li> <a href="./create-forms.html">Create forms</a> </li>
        </ul>
    
    </header>
    
    <div>
        
        <h1>Create forms</h1><br>
        
        <form method="post">
            <label>Name:</label>
            <input type="text" name="name"> <br>
            <label>Email:</label>
            <input type="email" name="email" required> <br>
            <label>Subject:</label>
            <input type="text" name="subject"> <br>
            <label>Message:</label>
            <textarea rows="7" name="message" required></textarea> <br>
            <button type="submit">Submit Now!</button>
        </form>
        
    </div>
    
    <footer></footer>

</body>

</html>