• Home
• Archives
• Tools   Resources
• About Allcreatives

This is a very quick tip when using the wonderful contact form 7 plugin for wordpress.

Whilst working on another web site recently I noticed that after installing the plugin and testing the form the success or warning message was appearing below the form on submit. This wasn’t ideal on longer forms as the messages would go completely unnoticed. So the idea was to get the message to appear above the form it was validating.

After a bit of research I couldn’t find a quick and easy way to configure this so I decided to go into the plugin and found it quite easy to change myself.

Changing this yourself …

After installing the plugin follow this path to get to open the file that will need editing.

Admin Home > Plugins > Editor > Contact Form 7 > Open – contact-form-7/includes/classes.php

Now look for this block of PHP code.

function form_html() {
		$form = '<div class="wpcf7" id="' . $this->unit_tag . '">';

		$url = wpcf7_get_request_uri();

		if ( $frag = strstr( $uri, '#' ) )
			$uri = substr( $uri, 0, -strlen( $frag ) );

		$url .= '#' . $this->unit_tag;

		$url = apply_filters( 'wpcf7_form_action_url', $url );
		$url = sanitize_url( $url );

		$enctype = apply_filters( 'wpcf7_form_enctype', '' );

		$form .= '<form action="' . $url
			. '" method="post" class="wpcf7-form"' . $enctype . '>' . "\n";
		$form .= '<div style="display: none;">' . "\n";
		$form .= '<input type="hidden" name="_wpcf7" value="'
			. esc_attr( $this->id ) . '" />' . "\n";
		$form .= '<input type="hidden" name="_wpcf7_version" value="'
			. esc_attr( WPCF7_VERSION ) . '" />' . "\n";
		$form .= '<input type="hidden" name="_wpcf7_unit_tag" value="'
			. esc_attr( $this->unit_tag ) . '" />' . "\n";
		$form .= '</div>' . "\n";
		$form .= $this->form_elements();
if ( ! $this->responses_count )
			$form .= $this->form_response_output();

		$form .= '</form>';

		$form .= '</div>';

		return $form;
	}

The lines that outputs the validation are …

if ( ! $this->responses_count )
			$form .= $this->form_response_output();

So if you cut this line and paste it anywhere else in the code block you can change the position of the validation block.

Here is my example of this which outputs the validation block before the form begins …

function form_html() {
		$form = '<div class="wpcf7" id="' . $this->unit_tag . '">';

		$url = wpcf7_get_request_uri();

		if ( $frag = strstr( $uri, '#' ) )
			$uri = substr( $uri, 0, -strlen( $frag ) );

		$url .= '#' . $this->unit_tag;

		$url = apply_filters( 'wpcf7_form_action_url', $url );
		$url = sanitize_url( $url );

		$enctype = apply_filters( 'wpcf7_form_enctype', '' );
if ( ! $this->responses_count )
			$form .= $this->form_response_output();

		$form .= '<form action="' . $url
			. '" method="post" class="wpcf7-form"' . $enctype . '>' . "\n";
		$form .= '<div style="display: none;">' . "\n";
		$form .= '<input type="hidden" name="_wpcf7" value="'
			. esc_attr( $this->id ) . '" />' . "\n";
		$form .= '<input type="hidden" name="_wpcf7_version" value="'
			. esc_attr( WPCF7_VERSION ) . '" />' . "\n";
		$form .= '<input type="hidden" name="_wpcf7_unit_tag" value="'
			. esc_attr( $this->unit_tag ) . '" />' . "\n";
		$form .= '</div>' . "\n";
		$form .= $this->form_elements();

		$form .= '</form>';

		$form .= '</div>';

		return $form;
	}

And that’s it! Any question, feel free to ask away in the comments.

Grab our RSS feed for more of the same ...