Contact Form: Add post-submission options.

extensions/blocks/contact-form/components/jetpack-contact-form.js

@@ -4,10 +4,19 @@
 import classnames from 'classnames';
 import emailValidator from 'email-validator';
 import { __, sprintf } from '@wordpress/i18n';
-import { Button, PanelBody, Path, Placeholder, TextControl } from '@wordpress/components';
+import {
+	BaseControl,
+	Button,
+	PanelBody,
+	Path,
+	Placeholder,
+	SelectControl,
+	TextareaControl,
+	TextControl,
+} from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import { compose, withInstanceId } from '@wordpress/compose';
-import { InnerBlocks, InspectorControls } from '@wordpress/editor';
+import { InnerBlocks, InspectorControls, URLInput } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -190,6 +199,48 @@ class JetpackContactForm extends Component {
 		);
 	}
 
+	renderConfirmationMessageFields() {
+		const { instanceId } = this.props;
+		const { customThankyou, customThankyouMessage, customThankyouRedirect } = this.props.attributes;
+		return (
+			<Fragment>
+				<SelectControl
+					label={ __( 'On Submission', 'jetpack' ) }
+					value={ customThankyou }
+					options={ [
+						{ label: __( 'Show a summary of submitted fields', 'jetpack' ), value: '' },
+						{ label: __( 'Show a custom text message', 'jetpack' ), value: 'message' },
+						{ label: __( 'Redirect to another webpage', 'jetpack' ), value: 'redirect' },
+					] }
+					onChange={ value => this.props.setAttributes( { customThankyou: value } ) }
+				/>
+				{ 'message' === customThankyou && (
+					<TextareaControl
+						label={ __( 'Message Text', 'jetpack' ) }
+						value={ customThankyouMessage }
+						placeholder={ __( 'Thank you for your submission!', 'jetpack' ) }
+						onChange={ value => this.props.setAttributes( { customThankyouMessage: value } ) }
+					/>
+				) }
+				{ 'redirect' === customThankyou && (
+					// @todo This can likely be simplified when WP 5.4 is the minimum supported version.
+					// See https://github.com/Automattic/jetpack/pull/13745#discussion_r334712381
+					<BaseControl
+						label={ __( 'Redirect Address', 'jetpack' ) }
+						id={ `contact-form-${ instanceId }-thankyou-url` }
+					>
+						<URLInput
+							id={ `contact-form-${ instanceId }-thankyou-url` }
+							value={ customThankyouRedirect }
+							className="jetpack-contact-form__thankyou-redirect-url"
+							onChange={ value => this.props.setAttributes( { customThankyouRedirect: value } ) }
+						/>
+					</BaseControl>
+				) }
+			</Fragment>
+		);
+	}
+
 	hasEmailError() {
 		const fieldEmailError = this.state.toError;
 		return fieldEmailError && fieldEmailError.length > 0;
@@ -205,9 +256,12 @@ class JetpackContactForm extends Component {
 		return (
 			<Fragment>
 				<InspectorControls>
-					<PanelBody title={ __( 'Email feedback settings', 'jetpack' ) }>
+					<PanelBody title={ __( 'Email Feedback Settings', 'jetpack' ) }>
 						{ this.renderToAndSubjectFields() }
 					</PanelBody>
+					<PanelBody title={ __( 'Confirmation Message', 'jetpack' ) }>
+						{ this.renderConfirmationMessageFields() }
+					</PanelBody>
 				</InspectorControls>
 				<div className={ formClassnames }>
 					{ ! hasFormSettingsSet && (

extensions/blocks/contact-form/editor.scss

@@ -39,6 +39,14 @@
 	width: 100%;
 }
 
+.jetpack-contact-form__thankyou-redirect-url input[type="text"] {
+	width: 100%;
+}
+
+.jetpack-contact-form__thankyou-redirect-url__suggestions {
+	width: 260px;
+}
+
 .jetpack-field-label {
 	display: flex;
 	flex-direction: row;

extensions/blocks/contact-form/index.js

@@ -56,6 +56,18 @@ export const settings = {
 			type: 'string',
 			default: null,
 		},
+		customThankyou: {
+			type: 'string',
+			default: '',
+		},
+		customThankyouMessage: {
+			type: 'string',
+			default: '',
+		},
+		customThankyouRedirect: {
+			type: 'string',
+			default: '',
+		},
 
 		// Deprecated
 		has_form_settings_set: {
@@ -135,7 +147,10 @@ export const settings = {
 
 			isEligible: attr => {
 				// when the deprecated, snake_case values are default, no need to migrate
-				if ( ! attr.has_form_settings_set && attr.submit_button_text === 'Submit' ) {
+				if (
+					! attr.has_form_settings_set &&
+					( ! attr.submit_button_text || attr.submit_button_text === 'Submit' )
+				) {
 					return false;
 				}
 				return true;

modules/contact-form/grunion-contact-form.php

@@ -1838,12 +1838,16 @@ function __construct( $attributes, $content = null ) {
 		self::$current_form = $this;
 
 		$this->defaults = array(
-			'to'                 => $default_to,
-			'subject'            => $default_subject,
-			'show_subject'       => 'no', // only used in back-compat mode
-			'widget'             => 0,    // Not exposed to the user. Works with Grunion_Contact_Form_Plugin::widget_atts()
-			'id'                 => null, // Not exposed to the user. Set above.
-			'submit_button_text' => __( 'Submit', 'jetpack' ),
+			'to'                     => $default_to,
+			'subject'                => $default_subject,
+			'show_subject'           => 'no', // only used in back-compat mode
+			'widget'                 => 0,    // Not exposed to the user. Works with Grunion_Contact_Form_Plugin::widget_atts()
+			'id'                     => null, // Not exposed to the user. Set above.
+			'submit_button_text'     => __( 'Submit', 'jetpack' ),
+			// These attributes come from the block editor, so use camel case instead of snake case.
+			'customThankyou'         => '', // Whether to show a custom thankyou response after submitting a form. '' for no, 'message' for a custom message, 'redirect' to redirect to a new URL.
+			'customThankyouMessage'  => __( 'Thank you for your submission!', 'jetpack' ), // The message to show when customThankyou is set to 'message'.
+			'customThankyouRedirect' => '', // The URL to redirect to when customThankyou is set to 'redirect'.
 		);
 
 		$attributes = shortcode_atts( $this->defaults, $attributes, 'contact-form' );
@@ -2100,10 +2104,16 @@ static function parse( $attributes, $content ) {
 	 * @return string $message
 	 */
 	static function success_message( $feedback_id, $form ) {
-		return wp_kses(
-			'<blockquote class="contact-form-submission">'
+		if ( 'message' === $form->get_attribute( 'customThankyou' ) ) {
+			$message = wpautop( $form->get_attribute( 'customThankyouMessage' ) );
+		} else {
+			$message = '<blockquote class="contact-form-submission">'
 			. '<p>' . join( '</p><p>', self::get_compiled_form( $feedback_id, $form ) ) . '</p>'
-			. '</blockquote>',
+			. '</blockquote>';
+		}
+
+		return wp_kses(
+			$message,
 			array(
 				'br'         => array(),
 				'blockquote' => array( 'class' => array() ),
@@ -2816,21 +2826,36 @@ function process_submission() {
 			return self::success_message( $post_id, $this );
 		}
 
-		$redirect = wp_get_referer();
-		if ( ! $redirect ) { // wp_get_referer() returns false if the referer is the same as the current page
-			$redirect = $_SERVER['REQUEST_URI'];
+		$redirect = '';
+		$custom_redirect = false;
+		if ( 'redirect' === $this->get_attribute( 'customThankyou' ) ) {
+			$custom_redirect = true;
+			$redirect        = esc_url( $this->get_attribute( 'customThankyouRedirect' ) );
 		}
 
-		$redirect = add_query_arg(
-			urlencode_deep(
-				array(
-					'contact-form-id'   => $id,
-					'contact-form-sent' => $post_id,
-					'contact-form-hash' => $this->hash,
-					'_wpnonce'          => wp_create_nonce( "contact-form-sent-{$post_id}" ), // wp_nonce_url HTMLencodes :(
-				)
-			), $redirect
-		);
+		if ( ! $redirect ) {
+			$custom_redirect = false;
+			$redirect        = wp_get_referer();
+		}
+
+		if ( ! $redirect ) { // wp_get_referer() returns false if the referer is the same as the current page.
+			$custom_redirect = false;
+			$redirect        = $_SERVER['REQUEST_URI'];
+		}
+
+		if ( ! $custom_redirect ) {
+			$redirect = add_query_arg(
+				urlencode_deep(
+					array(
+						'contact-form-id'   => $id,
+						'contact-form-sent' => $post_id,
+						'contact-form-hash' => $this->hash,
+						'_wpnonce'          => wp_create_nonce( "contact-form-sent-{$post_id}" ), // wp_nonce_url HTMLencodes :( .
+					)
+				),
+				$redirect
+			);
+		}
 
 		/**
 		 * Filter the URL where the reader is redirected after submitting a form.
@@ -2845,7 +2870,8 @@ function process_submission() {
 		 */
 		$redirect = apply_filters( 'grunion_contact_form_redirect_url', $redirect, $id, $post_id );
 
-		wp_safe_redirect( $redirect );
+		// phpcs:ignore WordPress.Security.SafeRedirect.wp_redirect_wp_redirect -- We intentially allow external redirects here.
+		wp_redirect( $redirect );
 		exit;
 	}
 

to-test.md

@@ -8,6 +8,10 @@ We've made some changes to simplify the Jetpack Dashboard interface when your us
 
 We've made some changes to ensure that blocks are properly translated in the block editor. If you switch to a language that offers language packs, like French or Spanish, you should see that Jetpack Blocks will now be translated in the editor.
 
+## Contact Form Block
+
+The Contact Form Block now includes options for showing a custom post-submission message, or to redirect to a different URL.
+
 ### Carousel
 
 In this release, we've made some changes to how the Carousel metadata was added to each gallery. To test this: