diff --git a/extensions/blocks/contact-form/components/jetpack-contact-form.js b/extensions/blocks/contact-form/components/jetpack-contact-form.js index 952a3934deb99..2b5539a016640 100644 --- a/extensions/blocks/contact-form/components/jetpack-contact-form.js +++ b/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 ( + + this.props.setAttributes( { customThankyou: value } ) } + /> + { 'message' === customThankyou && ( + 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 + + this.props.setAttributes( { customThankyouRedirect: value } ) } + /> + + ) } + + ); + } + hasEmailError() { const fieldEmailError = this.state.toError; return fieldEmailError && fieldEmailError.length > 0; @@ -205,9 +256,12 @@ class JetpackContactForm extends Component { return ( - + { this.renderToAndSubjectFields() } + + { this.renderConfirmationMessageFields() } +
{ ! hasFormSettingsSet && ( diff --git a/extensions/blocks/contact-form/editor.scss b/extensions/blocks/contact-form/editor.scss index f1f69e8a9c7d8..e456b27a7e1d7 100644 --- a/extensions/blocks/contact-form/editor.scss +++ b/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; diff --git a/extensions/blocks/contact-form/index.js b/extensions/blocks/contact-form/index.js index f48e2a12f58cf..69ad647775dbb 100644 --- a/extensions/blocks/contact-form/index.js +++ b/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; diff --git a/modules/contact-form/grunion-contact-form.php b/modules/contact-form/grunion-contact-form.php index 8a02942651dc1..ccdddb4840963 100644 --- a/modules/contact-form/grunion-contact-form.php +++ b/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( - '
' + if ( 'message' === $form->get_attribute( 'customThankyou' ) ) { + $message = wpautop( $form->get_attribute( 'customThankyouMessage' ) ); + } else { + $message = '
' . '

' . join( '

', self::get_compiled_form( $feedback_id, $form ) ) . '

' - . '
', + . '
'; + } + + 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; } diff --git a/to-test.md b/to-test.md index 7fb5db57251e0..114d386d21b8e 100644 --- a/to-test.md +++ b/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: