Na, bist du bereit, mit Advanced Custom Fields und einem Block-Theme deine eigenen Formulare zu erstellen und die E-Mail-Eingänge von besorgten Besuchern zu bearbeiten? Dann schnall dich an und wir werden dir zeigen, wie du deine Website von der flachen Oberfläche zu einer interaktiven Wunderwelt machst! In diesem Blog-Beitrag wirst du lernen, wie man ein dynamisches Formular erstellt, das E-Mails verschickt und dich sogar von deinen Konkurrenten abhebt!
1. ACF-Felder erstellen
Als erstes erstellt man ganz klassisch die ACF-Felder, welche später als Formular eingesetzt werden sollen
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.
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.
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.
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 );
}