Formularz kontaktowy na stronie - pomoc w uruchomieniu

Formularz kontaktowy na stronie - pomoc w uruchomieniu
gruby19
G1
gruby19
G1
  • Rejestracja:ponad 10 lat
  • Ostatnio:ponad 3 lata
  • Postów:48
0

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:

title

,a kod odpowiedzialny za niego, tak:

Kopiuj
    <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ć.

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
serek
serek
serek
serek
  • Rejestracja:około 11 lat
  • Ostatnio:około 3 godziny
  • Postów:1472
1

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.
edytowany 1x, ostatnio: serek
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
gruby19
G1
gruby19
G1
  • Rejestracja:ponad 10 lat
  • Ostatnio:ponad 3 lata
  • Postów:48
0

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

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

Kopiuj
<?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.

edytowany 2x, ostatnio: gruby19
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
serek
serek
serek
serek
  • Rejestracja:około 11 lat
  • Ostatnio:około 3 godziny
  • Postów:1472
0

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

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
gruby19
G1
gruby19
G1
  • Rejestracja:ponad 10 lat
  • Ostatnio:ponad 3 lata
  • Postów:48
0

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?

edytowany 2x, ostatnio: gruby19
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
serek
serek
serek
serek
  • Rejestracja:około 11 lat
  • Ostatnio:około 3 godziny
  • Postów:1472
0

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

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Treść
Podgląd
Kliknij, aby dodać treść...
Kliknij, aby dodać załącznik lub wklej ze schowka.
Instrukcja obsługi Markdown
Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)