A base config for Contact Form 7

cf7_base_config.md

PHP

The snippets below should be inserted into your WordPress theme's functions.php file or via a plugin that does this for you. I particularly like Code Snippets.

Disable paragraph tags

The following filter prevents CF7 from rendering multiple <p> tags in your form, improving custom styling.

add_filter('wpcf7_autop_or_not', '__return_false');

More info: https://contactform7.com/2024/01/11/contact-form-7-586/

Disable errors message

This type of error is seen in the From field within the Mail tab when the field value is a valid mailbox, but the email address doesn’t belong to the same domain as the web site.

add_filter(
  'wpcf7_config_validator_available_error_codes',
  function ( $error_codes, $contact_form ) {

	// List error codes to disable here.
	$error_codes_to_disable = array(
	  'email_not_in_site_domain',
    // you can add more errors to not display on your website. It 's at your own risk.
	);

	$error_codes = array_diff( $error_codes, $error_codes_to_disable );

	return $error_codes;
  },
  10, 2
);

• More info: https://contactform7.com/configuration-errors/email-not-in-site-domain/
• See configuration errors: https://contactform7.com/configuration-errors/

Javascript

Add the codes below before the </body> tag in your theme.

DOM Events

Official documentation: https://contactform7.com/dom-events/

wpcf7submit: Fires when an Ajax form submission has completed successfully, regardless of other incidents.

  $(document).on('wpcf7submit', function () {
    // do something...
  });

wpcf7mailsent: Fires when an Ajax form submission has completed successfully, and mail has been sent.

  $(document).on('wpcf7mailsent', function () {
    // do something...
    // hide fields, redirect to any page, etc...
    // Eg.:
    const $formFields = $('.my_fields_wrapper');
    $formFields.hide();
    window.location = 'https://example.com/thankyou_page'
  });

wpcf7mailfailed: Fires when an Ajax form submission has completed successfully, but it has failed in sending mail.

  $(document).on('wpcf7mailfailed', function () {
    // do something ...
  });

wpcf7invalid: Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.

  $(document).on('wpcf7invalid', function () {
    // do something ...
    alert('Some fields are invalids...');
  });

wpcf7spam: Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.

  $(document).on('wpcf7spam', function () {
    // do something ...
  });

CSS

Add the following code to your theme's stylesheet.

Styling

Add a custom class to the shortcode: [contact-form-7 id="form_id" html_class="base_form_styles"]

/* Fields HEIGHT */
.base_form_styles input,
.base_form_styles select {
    height: 44px;
    /* your own styles... */
}

/* Fields BASE */
.base_form_styles input,
.base_form_styles textarea,
.base_form_styles select {
    background-color: #FFF;
    border-radius: 0px;
    outline: 2px solid transparent;
    /* your own styles... */
}

/* Fields FOCUS */
.base_form_styles input:focus,
.base_form_styles textarea:focus {
    outline: 2px solid #777777;
    /* your own styles... */
}

/* Fields ERRORS */
.base_form_styles input[aria-invalid='true'],
.base_form_styles textarea[aria-invalid='true'],
.base_form_styles select[aria-invalid='true'] {
    border-color: red;
    /* your own styles... */
}

/* Loading State */
.base_form_styles .wpcf7-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    margin: 0;
}

.base_form_styles.submitting::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

/* Output message */
 .base_form_styles.sent .wpcf7-response-output {
  /* your own styles... */  
}

ToDo:

• Style Radio fields
• Create a grid/group fields