Formularz kontaktowy na stronie - pomoc w uruchomieniu

Cześć

Chcę utworzyć prostą stronkę internetową na własne potrzeby. Kupiłem szablon, który mi się podobał i dostosowuję go do swoich potrzeb.
Nie jestem webmasterem, ale chcę to zrobić samemu - nie po to żeby się czegoś nauczyć, ale dlatego, że nie chce nikogo angażować w tak niewielkie zmiany, a projekt nie ma charakteru komercyjnego. W sumie całkiem nieźle mi idzie - pozostał tylko do uruchomienia formularz kontaktowy, ale nie mam pojęcia jak do tego podejść i tutaj chciałbym Was prosić o pomoc. Znam trochę html (ale taki sprzed 10 lat). Patrząc na strukturę plików w szablonie, to szablon jest napisany w html + css + bootstrap + javascript + jquery (jeżeli piszę jakieś bzdury, to przepraszam, ale nie znam się na tym)

formularz na stronie wygląda tak:

,a kod odpowiedzialny za niego, tak:

    <div class="site-section bg-image2 overlay" id="contact-section" style="background-image: url('images/bckgrnd.jpeg');">
      <div class="container">
        <div class="row mb-5">
          <div class="col-12 text-center">
            <h2 class="section-title mb-3 text-white">Kontakt</h2>
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-lg-7 mb-5">
            <form action="#" class="p-5 bg-white">
              
              <h2 class="h4 text-black mb-5">Masz pytania lub propozycje? Napisz!</h2> 

              <div class="row form-group">
                <div class="col-md-6 mb-3 mb-md-0">
                  <label class="text-black" for="fname">Imię</label>
                  <input type="text" id="fname" class="form-control rounded-0">
                </div>
                <div class="col-md-6">
                  <label class="text-black" for="lname">Nazwisko</label>
                  <input type="text" id="lname" class="form-control rounded-0">
                </div>
              </div>

              <div class="row form-group">
                
                <div class="col-md-12">
                  <label class="text-black" for="email">E-mail</label> 
                  <input type="email" id="email" class="form-control rounded-0">
                </div>
              </div>

              <div class="row form-group">
                
                <div class="col-md-12">
                  <label class="text-black" for="subject">Temat</label> 
                  <input type="subject" id="subject" class="form-control rounded-0">
                </div>
              </div>

              <div class="row form-group">
                <div class="col-md-12">
                  <label class="text-black" for="message">Wiadomość</label> 
                  <textarea name="message" id="message" cols="30" rows="7" class="form-control rounded-0" placeholder="Zostaw swoją wiadomość tutaj..."></textarea>
                </div>
              </div>

              <div class="row form-group">
                <div class="col-md-12">
                  <input type="submit" value="Wyślij!" class="btn btn-primary mr-2 mb-2">
                </div>
              </div>
            </form>
          </div>       
        </div>     
      </div>
    </div>

Co jest do zrobienia? Wiadomo - chciałbym, aby po wypełnieniu formularza i naciśnięciu przycisku, wiadomość została wysłana na mój adres email.
Bardzo proszę o pomoc, jak tego dokonać. Coś mi mówi, że parametr "<form action="#" " powinien przyjąć wartość POST, ale nie wiem jak to dokładnie skonfigurować.

Jeżeli będzie potrzeba więcej informacji, to postaram się odpowiedzieć.

W action podajesz adres do skryptu PHP, który będzie to wszystko pobierał i przesyłał mailem dalej.

Skoro niezbyt się znasz to na początek:

1. Poczytaj jak pobierać dane wysłane z formularza (tablica $_POST)
2. poczytaj sobie o funkcji mail(). Chociaż może będzie trzeba coś bardziej zaawansowanego.

@serek:
Dziękuję za wskazówki. Dawno mnie tu nie było, ale postanowiłem wrócić do tematu.
Przejrzałem kilka tutoriali jak takie formularze konfigurować. Wykorzystałem przykładowe skrypty dostosowując je do swoich potrzeb:

Wklejam jeszcze raz zmodyfikowany już fragment kodu html odpowiedzialny za formularz kontaktowy:

       
    <div class="site-section bg-image2 overlay" id="contact-section" style="background-image: url('images/bckgrnd1_small.jpeg');">
      <div class="container">
        <div class="row mb-5">
          <div class="col-12 text-center">
            <h2 class="section-title mb-3 text-white">Kontakt</h2>
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-lg-7 mb-5">
            <form name="contactform" method="post" action="sendform.php" class="p-5 bg-white">
             
              <h2 class="h4 text-black mb-5">Masz pytania lub propozycje? Napisz!</h2>
 
              <div class="row form-group">
                <div class="col-md-6 mb-3 mb-md-0">
                  <label class="text-black" for="fname">Imię</label>
                  <input type="text" id="fname" class="form-control rounded-0">
                </div>
                <div class="col-md-6">
                  <label class="text-black" for="lname">Nazwisko</label>
                  <input type="text" id="lname" class="form-control rounded-0">
                </div>
              </div>
 
              <div class="row form-group">
               
                <div class="col-md-12">
                  <label class="text-black" for="email">E-mail</label>
                  <input type="email" id="email" class="form-control rounded-0">
                </div>
              </div>
 
              <div class="row form-group">
               
                <div class="col-md-12">
                  <label class="text-black" for="subject">Temat</label>
                  <input type="subject" id="subject" class="form-control rounded-0">
                </div>
              </div>
 
              <div class="row form-group">
                <div class="col-md-12">
                  <label class="text-black" for="message">Wiadomość</label>
                  <textarea name="message" id="message" cols="30" rows="7" class="form-control rounded-0" placeholder="Zostaw swoją wiadomość tutaj..."></textarea>
                </div>
              </div>
 
              <div class="row form-group">
                <div class="col-md-12">
                  <input type="submit" value="Wyślij!" class="btn btn-primary mr-2 mb-2">
                </div>
              </div>
            </form>
          </div>      
        </div>    
      </div>
    </div>
 

Oraz mój dostosowany skrypt .php

<?php
if(isset($_POST['email'])) {
 
    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "<prywatny adres email na który chciałbym otrzymywać email>";
    $email_subject = "Your email subject line";
 
    function died($error) {
        // your error code can go here
        echo "We are very sorry, but there were error(s) found with the form you submitted. ";
        echo "These errors appear below.<br /><br />";
        echo $error."<br /><br />";
        echo "Please go back and fix these errors.<br /><br />";
        die();
    }
 
 
    // validation expected data exists
    if(!isset($_POST['fname']) ||
        !isset($_POST['lname']) ||
        !isset($_POST['email']) ||
        !isset($_POST['subject']) ||
        !isset($_POST['message'])) {
        died('We are sorry, but there appears to be a problem with the form you submitted.');       
    }
 
     
 
    $fname = $_POST['fname']; // required
    $lname = $_POST['lname']; // required
    $email_from = $_POST['email']; // required
    $subject = $_POST['subject']; // not required
    $message = $_POST['message']; // 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 .= 'The Email Address you entered does not appear to be valid.<br />';
  }
 
    $string_exp = "/^[A-Za-z .'-]+$/";
 
  if(!preg_match($string_exp,$fname)) {
    $error_message .= 'The First Name you entered does not appear to be valid.<br />';
  }
 
  if(!preg_match($string_exp,$lname)) {
    $error_message .= 'The Last Name you entered does not appear to be valid.<br />';
  }
 
  if(strlen($message) < 2) {
    $error_message .= 'The message you entered do not appear to be valid.<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 .= "First Name: ".clean_string($fname)."\n";
    $email_message .= "Last Name: ".clean_string($lname)."\n";
    $email_message .= "Email: ".clean_string($email_from)."\n";
    $email_message .= "subject: ".clean_string($subject)."\n";
    $email_message .= "message: ".clean_string($message)."\n";
 
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);  
?>
 
<!-- include your own success html here -->
 
Thank you for contacting us. We will be in touch with you very soon.
 
<?php
 
}
?>

Efekt jest taki, że po kliknięciu w przycisk wyślij, otwiera się pusta biała strona, bez żadnego tekstu.

Mam utworzony adres email na moim hostingu (hosting to domeny.pl), jednak nie wiem jak powinien być skonfigurowany do tego typu akcji.

Nie widzę atrybutu name w polach formularza. To jak to niby ma działać?

korzystałem z tego: https://www.freecontactform.com/email_form.php
moim zdaniem on bazuje na atrybucie FOR

edit!!
@serek
Dodałem atrybut name, tak jak napisałeś i wiadomość dotarła.

W takim razie mam inne pytanie - po wysłaniu wiadomości otwiera się pusta strona z tekstem: "Thank you for contacting us. We will be in touch with you very soon." tak jak w tym skrypcie php. Jak mogę zrobić, żeby skrypt wykonał się pod spodem a na stronie z formularzem wyskoczył tylko popup, że wiadomość została wysłana?

Poczytaj sobie czym jest for a czym jest name...