From 2c0b02c4a61f6f426682eb92f7a5fa52af0e8453 Mon Sep 17 00:00:00 2001 From: Alexander Bigga Date: Wed, 19 Jun 2024 14:01:21 +0200 Subject: [PATCH] Add optional phone field to contact form, make fields optional required (#639) --- assets/js/frontend.js | 5 +- functions/contact-form.php | 30 +++-- languages/sunflower-contact-form-de_DE.mo | Bin 2030 -> 2300 bytes languages/sunflower-contact-form-de_DE.po | 113 ++++++++++++++++--- languages/sunflower-contact-form.pot | 130 ++++++++++++++++++---- sass/_comments.scss | 1 + src/contact-form/block.json | 12 ++ src/contact-form/edit.js | 44 +++++++- src/contact-form/editor.scss | 60 +++++----- src/contact-form/render.php | 31 +++++- 10 files changed, 351 insertions(+), 75 deletions(-) diff --git a/assets/js/frontend.js b/assets/js/frontend.js index f4129328..5432ddac 100644 --- a/assets/js/frontend.js +++ b/assets/js/frontend.js @@ -14,7 +14,9 @@ const observer = new IntersectionObserver( } ); -observer.observe( stickyDetector ); +if ( stickyDetector ) { + observer.observe( stickyDetector ); +} jQuery( function () { jQuery( '.show-leaflet' ).on( 'click', function () { @@ -131,6 +133,7 @@ jQuery( '#sunflower-contact-form' ).on( 'submit', function ( e ) { message: jQuery( '#message' ).val(), name: jQuery( '#name' ).val(), mail: jQuery( '#mail' ).val(), + phone: jQuery( '#phone' ).val(), title: jQuery( '#contact-form-title' ).html(), captcha: jQuery( '#captcha' ).val(), }, diff --git a/functions/contact-form.php b/functions/contact-form.php index a3e18d4f..fad26ced 100644 --- a/functions/contact-form.php +++ b/functions/contact-form.php @@ -30,25 +30,39 @@ function sunflower_contact_form() { die(); } - $message = sanitize_textarea_field( $_POST['message'] ); - $name = sanitize_text_field( $_POST['name'] ); - $mail = sanitize_email( $_POST['mail'] ); - $title = sanitize_text_field( $_POST['title'] ); + $name = sanitize_text_field( $_POST['name'] ); + if ( $name ) { + $message[] = sprintf( __( 'Name', 'sunflower-contact-form' ) . ': %s', $name ); + } + + $mail = sanitize_email( $_POST['mail'] ); + if ( $mail ) { + $message[] = sprintf( __( 'E-Mail', 'sunflower-contact-form' ) . ': %s', $mail ); + } + + $phone = sanitize_text_field( $_POST['phone'] ); + if ( $phone ) { + $message[] = sprintf( __( 'Phone', 'sunflower-contact-form' ) . ': %s', $phone ); + } + + $message[] = "\n" . __( 'Message', 'sunflower-contact-form' ) . ': ' . sanitize_textarea_field( $_POST['message'] ); + + $title = sanitize_text_field( $_POST['title'] ); $response = __( 'Thank you. The form has been sent.', 'sunflower-contact-form' ); $to = sunflower_get_setting( 'sunflower_contact_form_to' ) ? sunflower_get_setting( 'sunflower_contact_form_to' ) : get_option( 'admin_email' ); - $subject = __( 'New Message from', 'sunflower-contact-form' ) . ' ' . ( $title ? $title : __( 'Contact Form', 'sunflower-contact-form' ) ); - $message = sprintf( "Name: %s\nE-Mail: %s\n\n%s", $name, $mail, $message ); + $subject = __( 'New Message from', 'sunflower-contact-form' ) . ' ' . ( $title ? $title : __( 'Contact Form', 'sunflower-contact-form' ) ); + $message_str = sprintf( '%s', implode( "\n", $message ) ); if ( ! empty( $mail ) ) { $headers = 'Reply-To: ' . $mail; } if ( '' === $headers || '0' === $headers ) { - wp_mail( $to, $subject, $message ); + wp_mail( $to, $subject, $message_str ); } else { - wp_mail( $to, $subject, $message, $headers ); + wp_mail( $to, $subject, $message_str, $headers ); } echo wp_json_encode( diff --git a/languages/sunflower-contact-form-de_DE.mo b/languages/sunflower-contact-form-de_DE.mo index 8da3747421460a70da1fc8b9c26a73bb6e46ab34..232b6e57d53b9e5f4160ba735cc7117b24d7316d 100644 GIT binary patch delta 694 zcmZ9|O-ma=7{Kw_O-!uy-L_JUGH45h5@{~dluA9A^iUHd2!bHE=)^2;63tplbICVo z4~yTR6z{RO3ieX)=0%S^6;C2aFFEw!|Jke;A9m)q^YF~;_0a#3)}PV%fg;9eDcTWj zlD1^g5hr+wzpx(U8rb+Bz z3%}q94zkK~)c6eZC>!qJR}Ry_YsNOoA-uuIXmJXu8%N1c;RBpSrl{BW2QgE*F}w@yzc$r_G);6PEL0h za&rl}0WTLmxh&2Z!qdx*9@69qC1OF&>WnSA{;ubI*2|T8&FH*qyshA^oth~a-*>i+ zDmqm<^GQbuU2fE?Dy$Bw_WM-H?0s|_M(5H6$Mw|RFf3@d?E|ZCE}hBhOyK^Uv+%#`ujSgU((*O{br@%ZdUe#jl@JUni@0{h1u?e Wuz0!bNlBRnRaA06-~OF=Vci0FKyd5; delta 445 zcmY+=y-UMD7{~D^eKEGa)cP`r4u>cXQfTpID2R)tYDvJUIyl6V+EA;|R2&@o4+tHi zi?g#!yQ!0d`Ui-cn~vRt4jufSxcI;?pB$IF=W_jIH_`kUk6a5iN@mF=nIL_lYs(P% z!fhPJbVy_X*HM4Bi4okxF+9K=p5PpIu!--O#9~-v0X>}8Q!QTfh8=9t3sI2- zW|`FUJ3RDw7j;7iC$WqLyucJb<1K!pKH!ZhGL3hrfA9qd@e>Wni=fa;VuUq9|KHmf zLJs|}^ujn9A^J9S>BC6yX!L^D(9D$W)LgOMb7i@{?;N?RTtBS^W;oxjhOdnHN-DFa zGRxWYYC9I~8R=Zga=c?HI==G!hRUcVvLS!FoVm(&N|m}-sx;Ko!=YOb_D!q(W-b~( DRWCl~ diff --git a/languages/sunflower-contact-form-de_DE.po b/languages/sunflower-contact-form-de_DE.po index 1e6767ca..faa396a2 100644 --- a/languages/sunflower-contact-form-de_DE.po +++ b/languages/sunflower-contact-form-de_DE.po @@ -5,8 +5,8 @@ msgstr "" "Project-Id-Version: sunflower 2.0.9\n" "Report-Msgid-Bugs-To: https://wordpress.org/support/theme/sunflower-contact-" "form\n" -"POT-Creation-Date: 2024-04-16T11:04:23+00:00\n" -"PO-Revision-Date: 2024-04-16 13:05+0200\n" +"POT-Creation-Date: 2024-06-19T09:08:48+00:00\n" +"PO-Revision-Date: 2024-06-19 11:09+0200\n" "Last-Translator: \n" "Language-Team: \n" "Language: de_DE\n" @@ -18,36 +18,45 @@ msgstr "" "X-Domain: sunflower-contact-form\n" #. Theme Name of the theme +#: style.css msgid "sunflower" msgstr "" #. Theme URI of the theme +#: style.css msgid "https://sunflower-theme.de" msgstr "" #. Description of the theme +#: style.css msgid "Theme for the German Green Party" msgstr "" #. Author of the theme +#: style.css msgid "verdigado eG" msgstr "" #. Author URI of the theme +#: style.css msgid "https://verdigado.com" msgstr "" -#: build/contact-form/render.php:5 functions/contact-form.php:28 -#: build/contact-form/index.js:93 build/contact-form/index.js:80 +#: build/contact-form/render.php:11 functions/contact-form.php:55 +#: build/contact-form/index.js:104 build/contact-form/index.js:92 msgid "Contact Form" msgstr "Kontaktformular" -#: build/contact-form/render.php:19 +#: build/contact-form/render.php:27 functions/contact-form.php:48 +msgid "Message" +msgstr "Nachricht" + +#: build/contact-form/render.php:30 msgid "Please fill in all required (*) fields." msgstr "" "Bitte füllen Sie alle Pflichtfelder (*) aus." -#: build/contact-form/render.php:20 +#: build/contact-form/render.php:34 msgid "" "By using this form, you consent to the storage and processing of your data " "through our website.\n" @@ -59,31 +68,35 @@ msgstr "" "\t\tWeiteres entnehmen Sie bitte unserer Datenschutzerklärung" -#: build/contact-form/render.php:25 +#: build/contact-form/render.php:45 functions/contact-form.php:35 msgid "Name" msgstr "Name" -#: build/contact-form/render.php:30 +#: build/contact-form/render.php:52 functions/contact-form.php:40 msgid "E-Mail" msgstr "E-Mail" -#: build/contact-form/render.php:34 +#: build/contact-form/render.php:64 functions/contact-form.php:45 +msgid "Phone" +msgstr "Telefon" + +#: build/contact-form/render.php:74 msgid "How much is 1 + 1 ?" msgstr "Was ist 1 + 1 ?" -#: build/contact-form/render.php:40 +#: build/contact-form/render.php:80 msgid "submit" msgstr "absenden" -#: functions/contact-form.php:25 +#: functions/contact-form.php:52 msgid "Thank you. The form has been sent." msgstr "Vielen Dank. Ihre Nachricht wurde verschickt." -#: functions/contact-form.php:28 +#: functions/contact-form.php:55 msgid "New Message from" msgstr "Neue Nachricht über" -#: build/contact-form/index.js:89 build/contact-form/index.js:67 +#: build/contact-form/index.js:100 build/contact-form/index.js:79 msgid "" "The receiver address may be altered within the Sunflower theme settings. By " "default, emails are sent to the site administrator." @@ -92,10 +105,22 @@ msgstr "" "werden. Standardmäßig wird das Formular an den*die Webseiten-" "Administrator*in gesendet." -#: build/contact-form/index.js:91 build/contact-form/index.js:75 +#: build/contact-form/index.js:102 build/contact-form/index.js:87 msgid "Title of the form" msgstr "Titel des Formulars" +#: build/contact-form/index.js:107 build/contact-form/index.js:99 +msgid "Require E-Mail" +msgstr "E-Mail ist Pflichtfeld" + +#: build/contact-form/index.js:111 build/contact-form/index.js:104 +msgid "Display Phone Field" +msgstr "Telefon-Feld anzeigen" + +#: build/contact-form/index.js:115 build/contact-form/index.js:109 +msgid "Require Phone" +msgstr "Telefon ist Pflichtfeld" + #: build/contact-form/block.json msgctxt "block title" msgid "Contact Form (Sunflower)" @@ -105,3 +130,63 @@ msgstr "Kontaktformular ( Sunflower)" msgctxt "block description" msgid "Simple Contact Form" msgstr "Einfaches Kontaktformular" + +#: theme.json +msgctxt "Color name" +msgid "Himmel" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Tanne" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Klee" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Klee-700" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Grashalm" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "White" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Sonne" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Sand" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Gray" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Black" +msgstr "" + +#: theme.json +msgctxt "Font family name" +msgid "PT Sans" +msgstr "" + +#: theme.json +msgctxt "Font family name" +msgid "GrueneType" +msgstr "" diff --git a/languages/sunflower-contact-form.pot b/languages/sunflower-contact-form.pot index 925ae103..484e65be 100644 --- a/languages/sunflower-contact-form.pot +++ b/languages/sunflower-contact-form.pot @@ -2,89 +2,121 @@ # This file is distributed under the GNU General Public License v2 or later. msgid "" msgstr "" -"Project-Id-Version: sunflower 2.0.9\n" +"Project-Id-Version: sunflower 2.1.4\n" "Report-Msgid-Bugs-To: https://wordpress.org/support/theme/sunflower-contact-form\n" "Last-Translator: FULL NAME \n" "Language-Team: LANGUAGE \n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: 8bit\n" -"POT-Creation-Date: 2024-04-16T11:04:23+00:00\n" +"POT-Creation-Date: 2024-06-19T09:08:48+00:00\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" -"X-Generator: WP-CLI 2.9.0\n" +"X-Generator: WP-CLI 2.10.0\n" "X-Domain: sunflower-contact-form\n" #. Theme Name of the theme +#: style.css msgid "sunflower" msgstr "" #. Theme URI of the theme +#: style.css msgid "https://sunflower-theme.de" msgstr "" #. Description of the theme +#: style.css msgid "Theme for the German Green Party" msgstr "" #. Author of the theme +#: style.css msgid "verdigado eG" msgstr "" #. Author URI of the theme +#: style.css msgid "https://verdigado.com" msgstr "" -#: build/contact-form/render.php:5 -#: functions/contact-form.php:28 -#: build/contact-form/index.js:93 -#: build/contact-form/index.js:80 +#: build/contact-form/render.php:11 +#: functions/contact-form.php:55 +#: build/contact-form/index.js:104 +#: build/contact-form/index.js:92 msgid "Contact Form" msgstr "" -#: build/contact-form/render.php:19 +#: build/contact-form/render.php:27 +#: functions/contact-form.php:48 +msgid "Message" +msgstr "" + +#: build/contact-form/render.php:30 msgid "Please fill in all required (*) fields." msgstr "" -#: build/contact-form/render.php:20 +#: build/contact-form/render.php:34 msgid "" "By using this form, you consent to the storage and processing of your data through our website.\n" " Additional information can be found in our privacy policy on Datenschutzerklärung" msgstr "" -#: build/contact-form/render.php:25 +#: build/contact-form/render.php:45 +#: functions/contact-form.php:35 msgid "Name" msgstr "" -#: build/contact-form/render.php:30 +#: build/contact-form/render.php:52 +#: functions/contact-form.php:40 msgid "E-Mail" msgstr "" -#: build/contact-form/render.php:34 +#: build/contact-form/render.php:64 +#: functions/contact-form.php:45 +msgid "Phone" +msgstr "" + +#: build/contact-form/render.php:74 msgid "How much is 1 + 1 ?" msgstr "" -#: build/contact-form/render.php:40 +#: build/contact-form/render.php:80 msgid "submit" msgstr "" -#: functions/contact-form.php:25 +#: functions/contact-form.php:52 msgid "Thank you. The form has been sent." msgstr "" -#: functions/contact-form.php:28 +#: functions/contact-form.php:55 msgid "New Message from" msgstr "" -#: build/contact-form/index.js:89 -#: build/contact-form/index.js:67 +#: build/contact-form/index.js:100 +#: build/contact-form/index.js:79 msgid "The receiver address may be altered within the Sunflower theme settings. By default, emails are sent to the site administrator." msgstr "" -#: build/contact-form/index.js:91 -#: build/contact-form/index.js:75 +#: build/contact-form/index.js:102 +#: build/contact-form/index.js:87 msgid "Title of the form" msgstr "" +#: build/contact-form/index.js:107 +#: build/contact-form/index.js:99 +msgid "Require E-Mail" +msgstr "" + +#: build/contact-form/index.js:111 +#: build/contact-form/index.js:104 +msgid "Display Phone Field" +msgstr "" + +#: build/contact-form/index.js:115 +#: build/contact-form/index.js:109 +msgid "Require Phone" +msgstr "" + #: build/contact-form/block.json msgctxt "block title" msgid "Contact Form (Sunflower)" @@ -94,3 +126,63 @@ msgstr "" msgctxt "block description" msgid "Simple Contact Form" msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Himmel" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Tanne" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Klee" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Klee-700" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Grashalm" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "White" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Sonne" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Sand" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Gray" +msgstr "" + +#: theme.json +msgctxt "Color name" +msgid "Black" +msgstr "" + +#: theme.json +msgctxt "Font family name" +msgid "PT Sans" +msgstr "" + +#: theme.json +msgctxt "Font family name" +msgid "GrueneType" +msgstr "" diff --git a/sass/_comments.scss b/sass/_comments.scss index c93b8e82..60493217 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -107,6 +107,7 @@ input[type="url"], input[type="text"], + input[type="tel"], input[type="email"] { width: 100%; } diff --git a/src/contact-form/block.json b/src/contact-form/block.json index 60a034a0..7d0a66cb 100644 --- a/src/contact-form/block.json +++ b/src/contact-form/block.json @@ -12,6 +12,18 @@ "title": { "type": "string", "default": "" + }, + "requireMail": { + "type": "boolean", + "default": false + }, + "displayPhone": { + "type": "boolean", + "default": false + }, + "requirePhone": { + "type": "boolean", + "default": false } }, "supports": { diff --git a/src/contact-form/edit.js b/src/contact-form/edit.js index c26de200..62242f1c 100644 --- a/src/contact-form/edit.js +++ b/src/contact-form/edit.js @@ -13,7 +13,12 @@ import { __ } from '@wordpress/i18n'; */ import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; -import { PanelBody, Disabled, TextControl } from '@wordpress/components'; +import { + PanelBody, + Disabled, + TextControl, + ToggleControl, +} from '@wordpress/components'; import ServerSideRender from '@wordpress/server-side-render'; /** @@ -40,12 +45,20 @@ export default function Edit( { attributes, setAttributes } ) { className: 'row', } ); - const { title } = attributes; + const { title, requireMail, requirePhone, displayPhone } = attributes; const onChangeTitle = ( input ) => { setAttributes( { title: input === undefined ? '' : input } ); }; + function toggleAttribute( propName ) { + return () => { + const value = attributes[ propName ]; + + setAttributes( { [ propName ]: ! value } ); + }; + } + return (
{ @@ -55,6 +68,9 @@ export default function Edit( { attributes, setAttributes } ) { block={ 'sunflower/contact-form' } attributes={ { title, + requireMail, + requirePhone, + displayPhone, } } /> @@ -83,6 +99,30 @@ export default function Edit( { attributes, setAttributes } ) { ) } onChange={ onChangeTitle } /> + + + } diff --git a/src/contact-form/editor.scss b/src/contact-form/editor.scss index 03b07b98..77e7b640 100644 --- a/src/contact-form/editor.scss +++ b/src/contact-form/editor.scss @@ -6,6 +6,12 @@ @import "../../sass/variables"; +*, +*::before, +*::after { + box-sizing: border-box; +} + .wp-block-sunflower-contact-form { .comment { @@ -37,6 +43,29 @@ font-style: normal; } + .mb-5 { + margin-bottom: 3rem !important; + } + + .row { + --bs-gutter-x: 1.5rem; + --bs-gutter-y: 0; + display: flex; + flex-wrap: wrap; + margin-top: calc(-1 * var(--bs-gutter-y)); + margin-right: calc(-0.5 * var(--bs-gutter-x)); + margin-left: calc(-0.5 * var(--bs-gutter-x)); + + > * { + flex-shrink: 0; + width: 100%; + max-width: 100%; + padding-right: calc(var(--bs-gutter-x) * 0.5); + padding-left: calc(var(--bs-gutter-x) * 0.5); + margin-top: var(--bs-gutter-y); + } + } + @media (min-width: 768px) { .col-md-6 { @@ -45,34 +74,9 @@ } } -} - - -.mb-5 { - margin-bottom: 3rem !important; -} - -.row { - --bs-gutter-x: 1.5rem; - --bs-gutter-y: 0; - display: flex; - flex-wrap: wrap; - margin-top: calc(-1 * var(--bs-gutter-y)); - margin-right: calc(-0.5 * var(--bs-gutter-x)); - margin-left: calc(-0.5 * var(--bs-gutter-x)); - - > * { - flex-shrink: 0; - width: 100%; - max-width: 100%; - padding-right: calc(var(--bs-gutter-x) * 0.5); - padding-left: calc(var(--bs-gutter-x) * 0.5); - margin-top: var(--bs-gutter-y); + small, + .small { + font-size: 0.9375rem; } -} - -small, -.small { - font-size: 0.9375rem; } diff --git a/src/contact-form/render.php b/src/contact-form/render.php index 748b27ce..991ab103 100644 --- a/src/contact-form/render.php +++ b/src/contact-form/render.php @@ -10,6 +10,11 @@ } else { $sunflower_title = __( 'Contact Form', 'sunflower-contact-form' ); } + +$sunflower_display_phone = $attributes['displayPhone'] ?? false; +$sunflower_require_phone = $attributes['requirePhone'] ?? false; +$sunflower_require_mail = $attributes['requireMail'] ?? false; + ?>
@@ -19,7 +24,7 @@

- +

*) fields.', 'sunflower-contact-form' ) ); ?>

@@ -42,9 +47,29 @@

+ + +