ACF-Formular in Block-Theme mit dynamischen Inhalten

In diesem Beitrag habe ich festgehalten, wie man in einem Block-Theme ein Formular mit dem beliebten Plugin Advanced Custom Fields als Block einbindet und die Formular-Felder dynamisch anpassen kann. Das Formular erzeugt eine Email an den Webseitenbetreiber.

1. ACF-Felder erstellen

Als erstes erstellt man ganz klassisch die ACF-Felder, welche später als Formular eingesetzt werden sollen

Wordpress | Webdesign | Schwyz | Zug | Luzern | Altdorf | ulrich.digital
ACF-Felder, welche später als Formular-Felder eingesetzt werden.

2. ACF-Felder als Block

Damit später das Formular bequem als Block hinzugefügt werden kann, werden die ACF-Feldgruppe als Block registriert. Eine ausführliche Beschreibung findest Du hier.

add_action('acf/init', 'my_acf_blocks_init');
function my_acf_blocks_init() {

    if( function_exists('acf_register_block_type') ) {   
        // ACF-Form
	acf_register_block_type( array(
	    'title' => 'Kontakt-Formular',
	    'name' => 'contact_form',
            'render_template' => 'blocks/acf_contact_form/block.php',
            'enqueue_style' => get_stylesheet_directory_uri() . '/blocks/acf_contact_form/block.css',
            'enqueue_script' => get_template_directory_uri() . '/blocks/acf_contact_form/block.js?ver=' . filemtime(get_stylesheet_directory() . '/blocks/acf_neufahrzeug/block.js'),
            'mode' => 'edit',
                'supports' => [
                    'align' => false,
                    'anchor' => true,
		    'customClassName' => true,
		    'jsx' => true,
                ]   
        ));
    }
} 

Nach dem Registrieren des Blocks, muss die Feldgruppe dem Block hinzugefügt werden.

Webshop | Webdesign | Schwyz | Zug | Luzern | Altdorf | ulrich.digital

3. Block-Render-Template

Bei der Block-Registration habe ich als Render-Template den Pfad blocks/acf_contact_form/block.php angegeben. In dieser block.php-Datei wird nun die Formular-Ausgabe erzeugt. Als Feldgruppe wird der Schlüssel des ACF-Feldgruppe hinterlegt werden.

acf_form(array(
	'post_id' => 'new_post',
	'field_groups' => array('group_62b9c9f1231f7'),
	'submit_value'	=> 'Send'
));

Nun kann der Block Kontakt-Formular bequem mit dem Block-Inserter auf der gewünschten Seite eingefügt werden, damit das Formular im Frontend ausgeben werden kann.

Website für Kultur und Wirtschaft | Webdesign |Schwyz | Zug | Luzern | Altdorf | ulrich.digital

4. Formular-Ausgabe in Block-Theme

Um ein ACF-Formular im Frontend anzuzeigen, musste üblicherweise vor der wp-head()-Funktion die acf-form-head()-Funktion aufgerufen werden. Da Block-Theme allerdings keine php-Templates mehr besitzt, ist dies nicht mehr möglich. Man kann diese Funktion aber beispielsweise über die functions.php-Datei einbinden. Mit der zusätzlichen Abfrage von is_admin() wird verhindert, dass die Funktion im Backend nicht aufgerufen wird.

add_action( 'init', 'wp_uldi_get_header_action', 10, 1 );
function wp_uldi_get_header_action(){
	if(!is_admin()){
		acf_form_head();	
	}
}

5. Formular-Felder dynamisch füllen

Im vorliegenden Fall sollten die Werte unter Marke und Modell dynamisch aus einem anderen Block in das Formular eingefügt werden. Dazu habe ich je einen Filter in der functions.php definiert. Damit der Filter weiss, welches Formular-Feld überschrieben werden muss, wird per key das entsprechende Feld angegeben.

Neue Homepage erstellen lassen | Webdesign | Schwyz | Zug | Luzern | Altdorf | ulrich.digital

Der Filter acf/prepare_field hängt sich nun im Marken-Feld des Formulars ein, und zwar bevor das Feld gerendert wird. An dieser Stelle wird die Funktion modify_marke_field aufgerufen, welche in einem anderen Block die Marke ausliest, und den Wert des Marken-Feld des Formulars überschreibt.

// Marke
function modify_marke_field($field){
	$post_id = get_the_ID();
	$blocks = parse_blocks( get_the_content($post_id) );
	foreach ( $blocks as $block ) :
		if ( 'acf/neufahrzeug' === $block['blockName'] ) {			
			$marke = $block['attrs']['data']['marke'];			
			$field['value'] = $marke;
		}
	endforeach;
    return $field;
}
add_filter('acf/prepare_field/key=field_62bdc77f826bd', 'modify_marke_field');

Damit im Frontend dieser Eintrag nicht geändert werden kann, genügt die CSS-Regel pointer-events: none;

6. Email-Versand

Mit der Aktion acf/save_post kann eine Funktion aufgerufen werden, welches das ausgefüllte Formular als Email versendet. Auch hier wird wieder der Aufruf im Backend ausgeschlossen.

add_action('acf/save_post', 'my_save_post');

function my_save_post( $post_id ) {	
	
	if( is_admin() ) {		
		return;
	}
	
	$body = get_field('vorname', $post_id) . '<br/>';
	$body .= get_field('nachname', $post_id) . '<br/>';
	$body .= get_field('email', $post_id) . '<br/>';
	$body .= get_field('telefon', $post_id) . '<br/>';
	
	// usw.

	$to = 'hello@ulrich.digital';
	$headers  = "MIME-Version: 1.0\r\n";
	$headers .= "Content-type: text/html; charset=utf-8\r\n";
	$headers .= 'From: Matthias <support@ulrich.digital>' . "\r\n";
	$subject = "Anfrage zu " . $modell;


	wp_mail($to, $subject, $body, $headers );
}

Hier der gesamte Code der functions.php

// ACF-Felder als Block registrieren

add_action('acf/init', 'my_acf_blocks_init');
function my_acf_blocks_init() {

    if( function_exists('acf_register_block_type') ) {   
        // ACF-Form
	acf_register_block_type( array(
	    'title' => 'Kontakt-Formular',
	    'name' => 'contact_form',
            'render_template' => 'blocks/acf_contact_form/block.php',
            'enqueue_style' => get_stylesheet_directory_uri() . '/blocks/acf_contact_form/block.css',
            'enqueue_script' => get_template_directory_uri() . '/blocks/acf_contact_form/block.js?ver=' . filemtime(get_stylesheet_directory() . '/blocks/acf_neufahrzeug/block.js'),
            'mode' => 'edit',
                'supports' => [
                    'align' => false,
                    'anchor' => true,
		    'customClassName' => true,
		    'jsx' => true,
                ]   
        ));
    }
} 


// ACF-Form-Head einbinden

add_action( 'init', 'wp_uldi_get_header_action', 10, 1 );
function wp_uldi_get_header_action(){
	if(!is_admin()){
		acf_form_head();	
	}
}


// ACF-Felder dynamisch befüllen

function modify_marke_field($field){
	$post_id = get_the_ID();
	$blocks = parse_blocks( get_the_content($post_id) );
	foreach ( $blocks as $block ) :
		if ( 'acf/neufahrzeug' === $block['blockName'] ) {			
			$marke = $block['attrs']['data']['marke'];			
			$field['value'] = $marke;
		}
	endforeach;
    return $field;
}
add_filter('acf/prepare_field/key=field_62bdc77f826bd', 'modify_marke_field');


// Formular als Email versenden

add_action('acf/save_post', 'my_save_post');

function my_save_post( $post_id ) {	
	
	if( is_admin() ) {		
		return;
	}
	
	// Farben
	$farben_str = "";
	$farben = get_field('farbe', $post_id);
	foreach($farben as $farbe){
		$farben_str .= $farbe; 
		$farben_str .= "<br />";
	}	
		
	// Ich interessiere mich für
	$ich_interessiere_mich_fur_str = "";
	$ich_interessiere_mich_fur = get_field('ich_interessiere_mich_fur', $post_id);
	foreach($ich_interessiere_mich_fur as $single_ich_interessiere_mich_fur):
		$ich_interessiere_mich_fur_str .= $single_ich_interessiere_mich_fur;
		$ich_interessiere_mich_fur_str .= "<br />";
	endforeach;
	
	//Modell 
	$modell = get_field('modell', $post_id);
	
	$body = "Kontakt: <br/>";
	$body .= get_field('anrede', $post_id) . '<br/>';
	$body .= get_field('vorname', $post_id) . '<br/>';
	$body .= get_field('nachname', $post_id) . '<br/>';
	$body .= get_field('email', $post_id) . '<br/>';
	$body .= get_field('telefon', $post_id) . '<br/>';
	$body .= '<br />';
	$body .= 'Marke: ';
	$body .= get_field('marke', $post_id) . '<br />';
	$body .= "Modell: ";
	$body .= get_field('modell', $post_id) . '<br/>';
	$body .= 'Farben: ';
	$body .= $farben_str;
	$body .= 'Interesse für: ';
	$body .= $ich_interessiere_mich_fur_str;
	$body .= 'Mitteilung: ';

	$body .= get_field('mitteilung', $post_id) . '<br/>';
	

	$to = 'hello@ulrich.digital';
	$headers  = "MIME-Version: 1.0\r\n";
	$headers .= "Content-type: text/html; charset=utf-8\r\n";
	$headers .= 'From: Matthias <support@ulrich.digital>' . "\r\n";
	$subject = "Anfrage zu " . $modell;


	wp_mail($to, $subject, $body, $headers );
}
1 Star2 Stars3 Stars4 Stars5 Stars (0)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert