Meow Apps

Contact Form Block: Customization & FAQ

Navigation Close

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"]
[/contact-form-block]

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 ) {
  return '$subject = "[*site*] Message from *name*";';
}, 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 );