Tutorial for Contact Form Block

The Contact Form Block is more customizable than it seems. Let’s see how.

Gutenberg

If you are using Gutenberg, you probably noticed that you can modify all the labels, the button text, some of the colors, and more. That is probably the simplest way to customize the appearance of the contact form.

Shortcode

You can achieve the same results as the Gutenberg Block using the shortcode directly. The contact form normally looks good already by default, so you don’t need to use those attributes. But if you would like to customize it, here are the attributes.

[contact-form-block 
  name_label="Name" 
  email_label="E-mail" 
  phone_label="Phone" 
  message_label="Message" 
  header="false" 
  header_image_id="null" 
  header_image_size="50" 
  header_image_align="left" 
  header_title="Get in Touch" 
  header_text="Leave your message and we'll get back to you shortly." 
  button_text="Send" 
  button_color="#3d84f6" 
  button_text_color="white"  
  theme="default" 
  message_rows="5"
]

The theme attribute can be default, meowapps or none. The other attributes are self-explanatory.

Filters & Actions

If you would like to modify the behavior of the Contact Form, there are many filters and actions you can use. I will introduce each of them with a tiny example.

Modify the receiver of the email

This will send the message to the email mentioned in the from field.

add_filter( 'mcfb_email_to', function ( $to, $form ) {
  $to = $form['from'];
  return $to;
}, 10, 2 );

Modify the data received in the form

This will replace the word ‘hate’ by the word ‘love’ in the message.

add_filter( 'mcfb_email_to', function ( $form ) {
  $form['message'] = str_replace( 'hate', 'love', $form['message'] );
  return $form;
}, 10, 1 );

Validate the form

This will return an error to the visitor if the word ‘shampoo’ is found in the message, and it will not be sent.

add_filter( 'mcfb_validate', function ( $error, $form ) {
  if ( strpos( $form['message'], 'shampoo' ) !== false ) {
    return "Are you sure this message is really for me?";
  }
  return null;
}, 10, 1 );

Modify the subject of the email

This will define the subject for the email. By default, it looks like this: “[*site*] Message from *name*“.

add_filter( 'mcfb_email_subject', function ( $to, $form ) {
  $subject = "[*site*] Message from *name*";
  return $subject;
}, 10, 2 );

In this string, those words will be replaced by the real values they represent: *name*, *email*, *site*, *from*, and *message*.

Modify the content of the email

This will define the content for the email. By default, it will contain the name, followed by the e-mail, and then the message.

add_filter( 'mcfb_email_content', function ( $to, $form ) {
  return "Name: *name*\r\nE-mail: *email*\r\n\r\n*message*";
}, 10, 2 );

In this string, those words will be replaced by the real values they represent: *name*, *email*, *site*, *from*, and *message*.

Do something after the email has been sent

This will create a text file for each message received. But you could also create a new Post Type, and add a new Post for each email which is sent.

add_action( 'mcfb_form_sent', function ( $form ) {
  $id = uniqid();
  file_put_contents( "{$id}.txt", $form['message'] );
}, 10, 1 );

Override the Redirect URL

You would maybe like to modify the Redirect URL depending on success, failure, the content of the message, the domain of the sender, etc. Below, my brother will be redirect to a page especially made for him, as a surprise 🙂

add_filter( 'mcfb_redirect_url', function ( $url, $success, $error, $form ) {
  if ( $form['from'] === '[email protected]' )
    return 'https://myfamily.com/hellomybrother';
  return $url;
}, 10, 4 );

Code Examples

Add a new field

There is no UI to add a new field, as this would add complexity to the plugin, while, at the same time, not being extensible enough. However, the Contact Form Block was made so that you can add any kind of field by yourself, even extremely complex ones.

Have a look in the plugin’s files, at the phone_field.php file located in the addons directory in particular. This is a very simple case, and you can easily copy/paste this file in order to create your own field.

Anti-Spam: Ask a question

I know it, some of you enjoy implementing their own anti-spam system. So here is an example. With this code snippet, the form will ask a question, and if not replied correctly, will reject the form.

add_filter( 'mcfb_form_after_email', 'my_human_check_after_email', 4, 10 );
add_filter( 'mcfb_validate', 'my_human_check_validate', 2, 10 );

// Add the human check field after the e-mail field
function my_human_check_after_email( $html, $atts, $css, $reply ) {
	if ( $reply && $reply->success )
		return $html;
	$html .= "<div class='{$css['group']}'>";
	$html .= "<label class='{$css['label']}' for='mcfb_are_you_human'>What color was the white horse of Henry IV?</label>";
	$html .= "<input class='{$css['input']}' type='text' name='mcfb_are_you_human' value=''></input>";
	$html .= "</div>";
	return $html;
}

// Check if the field was properly filled in
function my_human_check_validate( $error, $form ) {
	$mcfb_are_you_human = trim( strtolower( sanitize_text_field( $_POST['mcfb_are_you_human'] ) ) );
	if ( $mcfb_are_you_human === 'white' )
		return null;
	return __( 'You failed to reply to the question. Are you really human?', 'contact-form-block' );
}