Cum să creezi un formular în WordPress fără pluginuri

Doriți să creați un formular în WordPress fără a utiliza pluginuri? Formularele sunt unele dintre cele mai esențiale și utilizate elemente ale unui site web și există mai multe avantaje de a crea unul fără a utiliza pluginuri.

De ce să creați un formular în WordPress fără pluginuri

Există multe pluginuri de formulare WordPress pe care le puteți folosi pentru a crea un formular. Dar crearea unui formular în WordPress fără a utiliza pluginuri poate fi benefică din mai multe motive:

• Simplitate și ușurință: evitați costul suplimentar care vine cu instalarea și întreținerea pluginurilor atunci când creați un formular fără pluginuri. Un formular simplu creat cu cod personalizat poate fi mai ușor și mai eficient decât unul realizat folosind un plugin.
• Personalizare: Construirea unui formular de la zero vă oferă control complet asupra designului și funcționalității acestuia. Puteți personaliza formularul pentru a se potrivi nevoilor specifice ale site-ului dvs. și îl puteți personaliza în consecință.
• Experiență de învățare: construirea unui formular fără pluginuri poate fi o experiență de învățare grozavă pentru dezvoltatori sau utilizatori interesați să-și îmbunătățească abilitățile de codare. Înțelegeți mecanismele care stau la baza procesării formularelor și procesării datelor.
• Dependență redusă: Reduceți dependența site-ului dvs. de codul extern prin faptul că nu vă bazați pe pluginuri. Acest lucru poate fi util dacă doriți să minimizați potențialele riscuri de securitate sau conflicte care decurg din utilizarea mai multor plugin-uri.
• Performanță: Formularele personalizate pot oferi performanțe și viteză mai bune pentru site-ul dvs., deoarece sunt ușoare în comparație cu pluginurile. Aceste formulare personalizate includ doar caracteristicile de care aveți nevoie și nu au funcționalitățile suplimentare oferite de pluginuri pe care este posibil să nu le utilizați.
• Flexibilitate: Formularele personalizate oferă o flexibilitate mai mare pentru integrarea cu alte părți ale site-ului dvs. web sau cu tipuri de postări personalizate. Puteți extinde funcționalitatea formularului în funcție de cerințele dvs. unice.
  Sigur, majoritatea pluginurilor oferă opțiuni similare folosind codurile scurte. Dar cu formularele personalizate, le puteți adăuga în anumite locații de pe site, în funcție de modul în care doriți să le afișați.

Cum să creezi un formular în WordPress fără pluginuri

Există multe tipuri de formulare pe care le puteți crea în WordPress fără a utiliza pluginurile. Dar un formular de contact este unul dintre cele mai esențiale și populare. Așadar, vă vom arăta cum să creați un formular de contact în acest tutorial.

Înainte de a începe , sperăm că aveți o înțelegere de bază a programarii, deoarece vom folosi limbaje de scripting și limbaje de marcare precum HTML și PHP. Dacă nu aveți cunoștințele necesare pentru aceasta, vă recomandăm să solicitați asistența unui programator care să vă ajute să creați un formular.

Pentru a crea un formular de contact în WordPress, trebuie să creați mai întâi o pagină de contact. Deci, să începem cu asta.

1) Creați o pagină pentru formular

Accesați Pagini > Adăugați nou din tabloul de bord WordPress.

Aceasta va deschide editorul de pagini, unde puteți introduce titlul paginii și descrierea suplimentară necesară, în afară de formularul de contact propriu-zis. Dar dacă un formular este singurul lucru de care aveți nevoie pe această pagină, putem continua și crea formularul direct.

2) Adăugați cod HTML pentru formular în Editor

 Acum, accesați editorul de cod făcând clic pe Opțiuni (trei puncte verticale) > Editor de cod din partea stângă sus a ecranului. Apoi, adăugați un cod HTML pentru formular în editor. Puteți adăuga câmpurile de formular necesare de care aveți nevoie pe baza următorului cod. 
<form method="post">
  <label for="name">Nume:</label>
<input type="text" name="name" required="">

<label for="email">E-mail:</label>
<input type="email" name="email" required="">

<label for="message">Mesaj:</label>
<textarea name="message" required=""></textarea>

<input type="submit" value="Trimiteți">
</form>

Acest cod vă va ajuta să creați un formular de contact simplu în WordPress. Dar îl puteți modifica cu ușurință pentru a crea formularul dorit pe site-ul dvs. WordPress.

După ce adăugați toate câmpurile de formular necesare la cod, faceți clic pe Publicare sau Actualizare pentru a salva modificările pe pagina de contact.

Dacă previzualizați pagina, puteți vedea formularul pe care tocmai l-ați creat. Dar pentru a face formularul funcțional și pentru a extrage date din acesta, trebuie să vă ocupați și de trimiterile formularelor. Deci, trebuie să creăm o bază de date pentru trimiterile formularelor după aceasta.

3) Creați un tabel de bază de date pentru trimiterea formularelor

Pentru a crea o bază de date pentru trimiterea formularelor, puteți utiliza un instrument de gestionare a bazei de date precum phpMyAdmin. Îl puteți accesa conectându-vă la cPanel. Dacă nu aveți acreditările necesare, vă recomandăm să contactați serviciul de găzduire sau proprietarul site-ului.

Acum, derulați în jos la secțiunea Bază de date și faceți clic pe phpMyAdmin . Aceasta va deschide tabloul de bord phpMyAdmin, unde puteți vedea toate bazele de date ale site-ului dvs.

Extindeți tabelul bazei de date a site-ului dvs. web și derulați în partea de jos a paginii, unde puteți crea un nou tabel de bază de date. Aici, introduceți numele tabelului ca „ wp_contact_form_submission ” și faceți clic pe Go pentru a crea noul tabel.

Apoi, trebuie să introduceți câmpurile de date pentru câmpurile formular pe coloanele tabelului și tipurile acestora. Conform formularului pe care tocmai l-am creat, vom adăuga următoarele nume și tipuri de coloane:

• nume: TEXT
• e-mail: TEXT
• mesaj text
• submission_time: DATETIME

În cele din urmă, faceți clic peSalvare pentru a salva modificările în tabelul bazei de date.

Am denumit tabelul bazei de date pe baza formularului de contact creat. Deci, puteți schimba numele tabelului în funcție de formularul creat inițial. În mod similar, dacă ați folosit diferite câmpuri de formular în formularul dvs., puteți adăuga coloanele în consecință.

4) Adăugați cod pentru a gestiona trimiterile de formulare

După ce creați baza de date, mai trebuie să adăugați un set de coduri pentru a gestiona trimiterile de formulare în fișierul cu funcții tematice al site-ului dvs.

Dar vă recomandăm să faceți backup pentru site-ul dvs. înainte de a continua, deoarece vom edita unele dintre fișierele de bază ale site-ului. Și orice modificare neintenționată poate duce la alte probleme pe site-ul dvs. Puteți consulta ghidul nostru detaliat despre cum să faceți backup pentru un site web WordPress dacă aveți nevoie de ajutor.

4.1) Accesați fișierul cu funcții ale temei

Accesați Aspect > Editor fișier temă din tabloul de bord WordPress pentru a accesa fișierul cu funcțiile temei. Veți găsi aici toate fișierele teme de bază ale site-ului dvs. web. Apoi selectați fișierul Funcții tematice ( functions.php) din partea dreaptă a ecranului, unde vom adăuga codul.

4.2) Adăugați codul în Editorul de fișiere de teme

Puteți utiliza următoarele pentru a gestiona trimiterea formularului pe site-ul dvs. web. Deci adăugați următorul cod la sfârșitul editorului.

 dacă ($_SERVER["REQUEST_METHOD"] === "POSTARE") {
  $nume = sanitize_text_field($_POST["nume"]);
  $email = sanitize_email($_POST["e-mail"]);
  $mesaj = sanitize_textarea_field($_POST[„mesaj”]);

  // Adăugați cod pentru a salva datele formularului în baza de date
  global $wpdb;
  $table_name = $wpdb->prefix . 'contact_form_submissions';
  $date = matrice(
    'nume' => $nume,
    'email' => $email,
    'message' => $mesaj,
    'submission_time' => current_time('mysql')
  );
  $insert_rezult = $wpdb->insert($nume_tabel, $date);

  if ($insert_result === false) {
    $răspuns = matrice(
      'succes' => fals,
      'message' => 'Eroare la salvarea datelor din formular.',
    );
  } altfel {
    $răspuns = matrice(
      „succes” => adevărat,
      'message' => 'Datele formularului au fost salvate cu succes.'
    );
  }

  // Returnează răspunsul JSON
  header('Content-Type: application/json');
  echo json_encode($răspuns);
  Ieșire;
}

Acest cod va stoca datele de formular introduse din formular în tabelul bazei de date de trimitere a formularelor pe care tocmai l-am creat. De asemenea, am inclus un răspuns JSON pentru a ne asigura că ați adăugat numele și câmpurile corecte ale tabelelor bazei de date în formular atunci când editați codul. Îl puteți elimina după ce datele din formular sunt stocate cu succes în baza de date.

Doar faceți clic pe Actualizare fișier după ce ați făcut toate modificările necesare codului.

5) Afișați trimiterile de formulare pe tabloul de bord

După ce datele formularului sunt stocate în baza de date, puteți crea meniul tabloului de bord pentru a vedea trimiterile formularelor. Așa că vom include și un cod pentru a-l afișa.

Puteți adăuga următorul cod în fișierul cu funcții ale temei ( funtions.php), la fel ca în pasul anterior.

 funcția display_contact_form_submissions_page() {
  global $wpdb;
  $table_name = $wpdb->prefix . 'contact_form_submissions';
  $form_data = $wpdb->get_results("SELECT * FROM $table_name WHERE nume <> '' AND email <> '' AND message <> '' ORDER BY submission_time DESC", ARRAY_A);

  ?>
  <div class="wrap">
    <h1>Trimiterea formularelor de contact</h1>
    <table class="wp-list-table widefat fixed striped">
      <cap>
        <tr>
          <th>Nume</th>
          <th>E-mail</th>
          <th>Mesaj</th>
          <th>Timp de trimitere</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($form_data as $data) : ?>
          <tr>
            <td><?php echo esc_html($data['nume']); ?></td>
            <td></?php echo esc_html($data['email']); ?></td>
            <td><?php echo esc_html($data['mesaj']); ?></td>
            <td></?php echo esc_html($data['submission_time']); ?></td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </tabel>
  </div>
<?php }

funcția register_contact_form_submissions_page() {
  add_menu_page(
    „Trimiterea formularelor de contact”,
    „Trimiterea formularelor”,
    'gestionare_opțiuni',
    „contact_form_submissions”,
    „display_contact_form_submissions_page”,
    „dashicons-feedback”
  );
}
add_action('admin_menu', 'register_contact_form_submissions_page');

Încă o dată, faceți clic pe Actualizare fișier după ce lipiți și editați codul conform formularului și tabelului de bază de date pe care le-ați creat.

Acum, dacă accesați tabloul de bord WordPress, veți putea vedea un meniu „ Trimite formulare de contact ”. Aceasta va afișa toate trimiterile de formulare ale formularului pe care l-ați creat inițial.

Opțiuni de depanare pentru a afișa trimiterile de formulare

Dacă nu puteți vedea datele din formular, vă recomandăm să adăugați un cod pentru ieșirea de depanare și interogarea SQL pe cod. Puteți adăuga codurile var_dump($form_data); și var_dump($wpdb->last_query); respectiv după interogare.

Deci codul poate arăta cam așa:

 funcția display_contact_form_submissions_page() {
  global $wpdb;
  $table_name = $wpdb->prefix . 'wp_contact_form_submissions';
  $form_data = $wpdb->get_results("SELECT * FROM $table_name ORDER BY submission_time DESC", ARRAY_A);

  var_dump($form_data); // Depanare ieșire
  var_dump($wpdb->ultima_interogare); // Depanați interogarea SQL

  ?>
  <!-- Restul codului... -->
  <?php
}

Pe baza raportului de depanare, puteți edita codurile în continuare pentru a vă asigura că datele din formular sunt afișate corect. Dar puteți parcurge și punctele din secțiunea următoare pentru a vă asigura că nu a existat nicio eroare la codul pe care l-ați folosit.

Considerații esențiale pentru crearea unui formular personalizat eficient

Iată câțiva factori pe care ar trebui să îi luați în considerare atunci când editați codurile pentru a vă crea formularul personalizat . Ele pot fi de ajutor dacă întâmpinați erori în timpul procesului.

• Verificați baza de date: Asigurați-vă că datele formularului sunt salvate corect în tabelul corect. Pentru acest tutorial, este tabelul „wp_contact_form_submissions”.
• Verificați erorile: verificați jurnalele de erori PHP sau activați raportarea erorilor pentru a vedea dacă există erori legate de trimiterea formularului sau de afișarea datelor. Erorile pot oferi indicii despre ce ar putea merge prost.
• Verificați procesul de trimitere a formularului: Asigurați-vă că datele formularului sunt trimise corect și că codul PHP pentru salvarea datelor formularului se execută fără erori. Verificați dacă datele formularului sunt transmise corect codului PHP atunci când este trimis formularul.
• Verificați numele tabelului: verificați de două ori dacă numele tabelului utilizat în funcția „display_contact_form_submissions_page()” se potrivește cu numele actual al tabelului din baza de date. Asigurați-vă că este „wp_contact_form_submissions” sau ajustați numele tabelului în funcție de tabelul bazei de date.
• Ștergeți memoria cache: dacă utilizați pluginuri de stocare în cache sau stocare în cache pe server, ștergeți memoria cache pentru a vă asigura că vedeți cele mai recente date.
• Permisiuni: asigurați-vă că rolul de utilizator la care sunteți conectat are capacitatea „manage_options” pentru a accesa pagina de administrare personalizată. Această capacitate permite administratorilor să acceseze pagina în mod implicit.

Am menționat un set de coduri pentru a crea un formular de contact în WordPress. Dar trebuie să editați codurile dacă doriți să faceți orice alt formular sau un formular alternativ cu câmpuri de date diferite. Deci, punctele de mai sus vă pot fi utile și pentru a vă crea formularul personalizat pe WordPress.

Concluzie

Acesta este modul în care creați un formular în WordPress fără a utiliza pluginuri. Puteți crea formulare și folosind plugin-uri. Cu toate acestea, crearea unui formular codificat personalizat are o mulțime de avantaje dacă aveți o înțelegere de bază a programarii.

Puteți crea cu ușurință un formular cu seturile de bază de coduri pe care le-am inclus în acest tutorial. Pentru a rezuma, iată pașii de bază pentru a construi unul eficient:

• Adăugați codul pentru formular în editorul de pagini
• Creați o bază de date pentru trimiterea formularelor
• Adăugați codurile necesare pentru a gestiona trimiterile de formulare și afișați-le

Sperăm că acum puteți crea cu încredere un formular pe site-ul dvs. folosind codurile menționate în acest tutorial. Le puteți edita pentru a include câmpuri de formular suplimentare, în funcție de nevoile dvs. Dacă întâmpinați probleme, am adăugat chiar și câteva opțiuni de depanare și factori de luat în considerare atunci când construim un cod personalizat pe WordPress.

Deci, ați încercat vreodată să creați un formular în WordPress fără un plugin?

Anunțați-ne în comentariile de mai jos.

Între timp, nu ezitați să vă uitați la următoarele articole pentru a vă ajuta să vă îmbunătățiți și să vă personalizați site-ul WordPress.

• Cum să personalizați formularul de înregistrare WooCommerce
• Formularul de contact Divi nu funcționează? Iată cum să o remediați!
• Cum să adăugați un formular pop-up la WordPress