4. November 2023

Formular-Daten in WordPress als Post speichern – wp_insert_post()

Mit folgendem Code lassen sich Daten aus einem Formular als (Custom-)Post in WordPress speichern.

Mögliche Anwendungsbereiche sind z.B.

• Veranstaltungs-Anmeldungen
• Gated Content – User müssen eine E-Mail-Adresse eintragen, bevor sie etwas runterladen könnnen
• Veranstaltungsvorschläge – User können aktiv Veranstaltungen vorschlagen und selbst eintragen
• …

Erstelle hierfür zunächst einen Custom Post Type, z.B. namens „Anmeldungen“. Das geht z.B. sehr easy mit dem Plug-in CPT UI.

Erstelle anschließend ein Formular mit den gewünschten Feldern.

<div class="anmeldeformular">
  <label class="form-label">Name</label>
  <input type="text" class="form-control name"> 

  <label class="form-label">E-Mail-Adresse</label>
  <input type="email" class="form-control email">

  <button type="button" class="button">Abschicken</button>
</div>Code-Sprache: JavaScript (javascript)

Ergänze im JavaScript folgenden Code. Hiermit werden die Formulareingaben an die Ajax-Schnittstelle von WordPress übertragen.

$('.button').click(function() {
  
  var email = $(this).parent().parent().find('.email').val();
  var name = $(this).parent().parent().find('.name').val();
  var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

  if (!emailPattern.test(email)) {

      $(this).parent().parent().find('.email').addClass('is-invalid');

  } else {

      $(this).parent().parent().find('.email').removeClass('is-invalid');
      
      $.ajax({
        type: 'POST',
        url: '/wp-admin/admin-ajax.php', 
        data: {
          action: 'save_sample_data',
          email: email,
          name: name
        },
        success: function(response) {
          $('.anmeldeformular').html('Vielen Dank.');
        }
      });
    
  }
});Code-Sprache: JavaScript (javascript)

In der functions.php wird folgender Code benötigt:

function save_sample_data() {
  if (isset($_POST['email']) && isset($_POST['name'])) {
    $email = sanitize_email($_POST['email']);
    $name = sanitize_text_field($_POST['name']);

    if (is_email($email)) {
    $post_data = array(
      'post_title' => $email,
      'content' => $name,
      'post_status' => 'private', // 'publish'
      'post_type' => '***CUSTOM-POST-TYPE-SLUG***',
    );

    $post_id = wp_insert_post($post_data);

    if ($post_id) {
      update_post_meta($post_id, 'sample_name', $name); // alternativ: Speichern als Meta-Data

      echo 'Daten wurden erfolgreich gespeichert'; 
    } else {
      echo 'Fehler beim Speichern der Daten'; 
    }
    } else {
    echo 'Ungültige E-Mail-Adresse'; 
    }
  }
  die(); 
}
  
add_action('wp_ajax_save_sample_data', 'save_sample_data'); // AJAX-Aufruf für angemeldete Benutzer
add_action('wp_ajax_nopriv_save_sample_data', 'save_sample_data'); // AJAX-Aufruf für nicht angemeldete BenutzeCode-Sprache: PHP (php)

Sollten noch weitere Felder erforderlich sein, können die Eingaben mit folgendem Code in den Meta-Feldern gespeichert werden.

update_post_meta($post_id, 'sample_telephone', $telephone);Code-Sprache: PHP (php)

Mit folgendem Code können die Meta-Felder im Backend angezeigt werden:

<?php 
function add_sample_telephone_meta_box() {
	add_meta_box(
	'sample_telephone_meta_box',
	'Telefonnummer',
	'display_sample_telephone_meta_box', 
	'***CUSTOM-POST-TYPE-SLUG***', 
	'normal', 
	'high' 
	);
}
  
function display_sample_telephone_meta_box($post) {
	$sample_telephone = get_post_meta($post->ID, 'sample_telephone', true);
?>
<input type="text" name="sample_telephone" value="<?php echo esc_attr($sample_telephone); ?>" style="width: 100%;">
<?php
}
  
add_action('add_meta_boxes', 'add_sample_telephone_meta_box');Code-Sprache: HTML, XML (xml)