From 04097ab242c41b58f4030b1ec1c35e06f9e741c8 Mon Sep 17 00:00:00 2001 From: Robert Lange <robert.lange@uni-leipzig.de> Date: Fri, 22 Nov 2019 17:16:11 +0100 Subject: [PATCH] refs #16480 [fid_adlr] styling of contact form * fix link to contact form ** delete link for development from header ** add link in footer ** style link as specified in mockup, use icon moon for arrow ** use / add translation * fix text on home page - fit as mockup * refactor preselect form ** lower font-size of headline / h1 => h2 ** change translations for subject and submit button * style and refactor second feedback forms ** configure default fields in FeedbackForms.yml to hard override defaults by same name (name / email) ** order inputs in second form (after preselect) by FeedbackForms.yml ** remove unused / duplicated code / add comments ** TODO: merge preselect.phtml into form.phtml and preselectAction into formAction ** set textarea min height in feedback forms by css ** set required attribute styling like in registration forms * feedback forms: ** add config for alpha ** remove unused user in preselect action ** add necessary label for dummy elements in Feedback.yaml ** fix caching of email subject in form action ** fix privacy notice check ** change translations on main form and response text ** change recipient to adlr.link --- .../alpha/config/vufind/FeedbackForms.yaml | 39 ++++++- fid_adlr/config/vufind/FeedbackForms.yaml | 39 ++++++- .../src/Controller/FeedbackController.php | 101 +++++++++++------- themes/fid_adlr/languages/de.ini | 6 ++ themes/fid_adlr/languages/en.ini | 6 ++ themes/fid_adlr/scss/_customVariables.scss | 2 +- themes/fid_adlr/scss/compiled.scss | 27 ++++- themes/fid_adlr/templates/feedback/form.phtml | 85 ++++++++------- .../templates/feedback/preselect.phtml | 23 ++-- themes/fid_adlr/templates/footer.phtml | 6 +- themes/fid_adlr/templates/header.phtml | 5 - 11 files changed, 239 insertions(+), 100 deletions(-) diff --git a/fid_adlr/alpha/config/vufind/FeedbackForms.yaml b/fid_adlr/alpha/config/vufind/FeedbackForms.yaml index ee9bff527c9..28903ac1a15 100644 --- a/fid_adlr/alpha/config/vufind/FeedbackForms.yaml +++ b/fid_adlr/alpha/config/vufind/FeedbackForms.yaml @@ -67,7 +67,7 @@ forms: fields: - name: emailSubject type: select - label: email_subject + label: contact_form_subject_pre required: true options: - general_question @@ -76,6 +76,28 @@ forms: - resource_not_found - purchase_request + - name: name + type: text + label: Name + settings: + - [display, "none"] + + - name: email + type: email + label: E-Mail + settings: + - [display, "none"] + + - name: submit + type: submit + label: submit + settings: + - [display, "none"] + + - name: submitAdlr + type: submit + label: contact_form_next + # Main Feedback form FeedbackSite: @@ -86,17 +108,17 @@ forms: recipient: name: FID adlr.link - email: stoppe@ub.uni-leipzig.de + email: info@adlr.link onlyForLoggedUsers: false - response: Thank you for your feedback. + response: contact_form_response senderInfoRequired: true fields: - name: emailSubject type: select - label: email_subject + label: contact_form_subject_main settings: - [disabled, "disabled"] options: @@ -105,6 +127,15 @@ forms: - account_question - resource_not_found - purchase_request + - name: name + type: text + label: Name + required: true + + - name: email + type: email + label: E-Mail + required: true - name: message type: textarea diff --git a/fid_adlr/config/vufind/FeedbackForms.yaml b/fid_adlr/config/vufind/FeedbackForms.yaml index ee9bff527c9..28903ac1a15 100644 --- a/fid_adlr/config/vufind/FeedbackForms.yaml +++ b/fid_adlr/config/vufind/FeedbackForms.yaml @@ -67,7 +67,7 @@ forms: fields: - name: emailSubject type: select - label: email_subject + label: contact_form_subject_pre required: true options: - general_question @@ -76,6 +76,28 @@ forms: - resource_not_found - purchase_request + - name: name + type: text + label: Name + settings: + - [display, "none"] + + - name: email + type: email + label: E-Mail + settings: + - [display, "none"] + + - name: submit + type: submit + label: submit + settings: + - [display, "none"] + + - name: submitAdlr + type: submit + label: contact_form_next + # Main Feedback form FeedbackSite: @@ -86,17 +108,17 @@ forms: recipient: name: FID adlr.link - email: stoppe@ub.uni-leipzig.de + email: info@adlr.link onlyForLoggedUsers: false - response: Thank you for your feedback. + response: contact_form_response senderInfoRequired: true fields: - name: emailSubject type: select - label: email_subject + label: contact_form_subject_main settings: - [disabled, "disabled"] options: @@ -105,6 +127,15 @@ forms: - account_question - resource_not_found - purchase_request + - name: name + type: text + label: Name + required: true + + - name: email + type: email + label: E-Mail + required: true - name: message type: textarea diff --git a/module/fid_adlr/src/Controller/FeedbackController.php b/module/fid_adlr/src/Controller/FeedbackController.php index f66435cef26..17e347f2add 100644 --- a/module/fid_adlr/src/Controller/FeedbackController.php +++ b/module/fid_adlr/src/Controller/FeedbackController.php @@ -22,7 +22,7 @@ namespace fid_adlr\Controller; use VuFind\Controller\FeedbackController as BaseFeedbackController; -use VuFind\Form\Form; +use Zend\View\Model\ViewModel; /** @@ -31,6 +31,7 @@ use VuFind\Form\Form; * @category VuFind * @package Controller * @author Robert Lange <lange@ub.uni-leipzig.de> + * @author Alex Purr <purr@ub.uni-leipzig.de> * @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License * @link https://vufind.org Main Site */ @@ -48,20 +49,18 @@ class FeedbackController extends BaseFeedbackController /** * Handles rendering and submit of preselect form. - * Form configurations are specified in FeedbackForms.json + * Form configurations are specified in FeedbackForms.yaml * - * @return void + * @return \Zend\View\Model\ViewModel + * @throws \VuFind\Exception\Forbidden */ - public function preselectAction() + public function preselectAction() : ViewModel { - $formId = $this->params()->fromRoute('id', $this->params()->fromQuery('id')); if (!$formId) { $formId = 'PreselectSite'; } - $user = $this->getUser(); - $form = $this->serviceLocator->get('VuFind\Form\Form'); $form->setFormId($formId); @@ -69,40 +68,32 @@ class FeedbackController extends BaseFeedbackController throw new \VuFind\Exception\Forbidden("Form '$formId' is disabled"); } - $view = $this->createViewModel(compact('form', 'formId', 'user')); + $view = $this->createViewModel(compact('form', 'formId')); $view->useRecaptcha = $this->recaptcha()->active('feedback') && $form->useCaptcha(); $params = $this->params(); $form->setData($params->fromPost()); - if (!$this->formWasSubmitted('submit', $view->useRecaptcha)) { - $form = $this->prefillUserInfo($form, $user); - return $view; - } - - if (! $form->isValid()) { - return $view; - } - return $view; } - /** + /** * Handles rendering and submit of the real feedback form. - * Form configurations are specified in FeedbackForms.json + * Form configurations are specified in FeedbackForms.yaml * - * @return void + * @return \Zend\View\Model\ViewModel + * @throws \VuFind\Exception\Forbidden */ - public function formAction() + public function formAction() : ViewModel { $formId = $this->params()->fromRoute('id', $this->params()->fromQuery('id')); + $formWasSubmitted = $formId === "PreselectSite" ? false : $this->formWasSubmitted('submit'); + if (!$formId || $formId == "PreselectSite") { $formId = 'FeedbackSite'; } - $user = $this->getUser(); - $form = $this->serviceLocator->get('VuFind\Form\Form'); $form->setFormId($formId); @@ -110,44 +101,56 @@ class FeedbackController extends BaseFeedbackController throw new \VuFind\Exception\Forbidden("Form '$formId' is disabled"); } + $user = $this->getUser(); $view = $this->createViewModel(compact('form', 'formId', 'user')); - $view->useRecaptcha - = $this->recaptcha()->active('feedback') && $form->useCaptcha(); + $view->useRecaptcha = $this->recaptcha()->active('feedback') && $form->useCaptcha(); - //$params = ; $postParams = $this->params()->fromPost(); + $subjectFromSession = $this->followup()->retrieve("emailSubject"); - $result = $this->followup()->retrieve("emailSubject"); - if ( !isset($postParams["emailSubject"]) && isset($result) ) { - $postParams["emailSubject"] = $result; + if (!isset($postParams["emailSubject"])) { + $postParams["emailSubject"] = $subjectFromSession ?? ""; + } else { + $this->followup()->store(["emailSubject" => $postParams["emailSubject"]]); } - else $this->followup()->store(["emailSubject" => $postParams["emailSubject"]]); $form->setData($postParams); // force login if NOT general question or catalogue error $emailSubject = $postParams["emailSubject"]; - if ($emailSubject != "general_question" && $emailSubject != "catalogue_error" ) { - if (!$user) - return $this->forceLogin(null,["emailSubject" => $emailSubject]); + if (empty($user) && $emailSubject != "general_question" && $emailSubject != "catalogue_error") { + return $this->forceLogin(null, ["emailSubject" => $emailSubject]); } - if ($user && ! $form->isValid()) { - $form = $this->prefillUserInfo($form, $user); + if (!$formWasSubmitted) { + if (!empty($user)) { + $this->prefillUserInfo($form, $user); + } return $view; } - if (! $form->isValid()) { + if (!$form->isValid()) { return $view; } // remove followup session parameter $this->followup()->clear("emailSubject"); + list($success, $errorMsg) = $this->sendFeedback($form, $postParams); + + $this->showResponse($view, $form, $success, $errorMsg); - //prepare Mail + return $view; + } + /** + * @param $form + * @param $postParams + * @return array of success / error result + */ + protected function sendFeedback($form, $postParams): array + { list($messageParams, $template) = $form->formatEmailMessage($postParams); - $emailMessage = $this->getViewRenderer()->partial( $template, ['fields' => $messageParams]); + $emailMessage = $this->getViewRenderer()->partial($template, ['fields' => $messageParams]); list($senderName, $senderEmail) = $this->getSender(); @@ -163,9 +166,25 @@ class FeedbackController extends BaseFeedbackController $replyToName, $replyToEmail, $emailSubject, $emailMessage ); - $this->showResponse($view, $form, $success, $errorMsg); - - return $view; + return array($success, $errorMsg); } + /** + * Get form elements + * + * @param array $config Form configuration + * + * @return array + */ + protected function getFormElements($config) + { + $elements = []; + foreach ($config['fields'] as $field) { + if (!isset($field['type'])) { + continue; + } + $elements[] = $field; + } + return $elements; + } } diff --git a/themes/fid_adlr/languages/de.ini b/themes/fid_adlr/languages/de.ini index 479979dd49a..f6486e27da7 100644 --- a/themes/fid_adlr/languages/de.ini +++ b/themes/fid_adlr/languages/de.ini @@ -14,6 +14,12 @@ Branding SID103 = Margaret Herrick Bibliothek Branding Title From = Titel aus Branding Verbundkatalog Film = Verbundkatalog Film +contact_form = "Kontaktformular" +contact_form_next = "Weiter" +contact_form_subject_pre = "Wie können wir Ihnen weiterhelfen?" +contact_form_subject_main = "Betreff" +contact_form_response = "Herzlichen Dank für Ihre Anfrage. Wir kümmern uns schnellstmöglich um Ihr Anliegen und melden uns in Kürze bei Ihnen zurück." + ; DBIS / Licenses dbis_hint = "Hinweis" dbis_licenses_name = "Zugang zu fachspezifischen und lizenzierten Datenbanken" diff --git a/themes/fid_adlr/languages/en.ini b/themes/fid_adlr/languages/en.ini index 34a681b09a6..7499b9bcb26 100644 --- a/themes/fid_adlr/languages/en.ini +++ b/themes/fid_adlr/languages/en.ini @@ -14,6 +14,12 @@ Branding SID103 = Margaret Herrick Library Branding Title From = title from Branding Verbundkatalog Film = Movie Catalogue +contact_form = "contact form" +contact_form_next = "Proceed" +contact_form_subject_pre = "How can we help you?" +contact_form_subject_main = "How can we help you?" +contact_form_response = "Thank you very much for your inquiry. We will deal with your request as soon as possible and get back to you shortly." + ; DBIS / Licenses dbis_hint = "Notice" dbis_licenses_name = "Subject-Specific and Licensed Databases" diff --git a/themes/fid_adlr/scss/_customVariables.scss b/themes/fid_adlr/scss/_customVariables.scss index 2adc690f6dd..0429069caf2 100644 --- a/themes/fid_adlr/scss/_customVariables.scss +++ b/themes/fid_adlr/scss/_customVariables.scss @@ -331,7 +331,7 @@ $home-text-bottom-padding-sm: 400px; $home-text-bottom-padding-lg: 700px; $home-text-left-margin-sm: 25px; $home-text-left-margin-lg: 0; -$home-text-left-margin-xl: 50px; +$home-text-left-margin-xl: 100px; $home-services-sub-headline-offset: 50px; $screen-lg-wrapper-min: 1170px; diff --git a/themes/fid_adlr/scss/compiled.scss b/themes/fid_adlr/scss/compiled.scss index ddad4abb6b3..2034e60212d 100644 --- a/themes/fid_adlr/scss/compiled.scss +++ b/themes/fid_adlr/scss/compiled.scss @@ -1068,10 +1068,18 @@ body:not(.template-name-home) { padding-bottom: $home-text-bottom-padding-lg; padding-top: $home-text-top-padding-lg; text-align: right; + + .headline { + padding-left: 170px; + padding-right: 30px; + } } @media screen and (min-width: $screen-xl-min) { margin-left: $home-text-left-margin-xl; + .headline { + padding-left: 200px; + } } } } @@ -2725,7 +2733,15 @@ footer { } #footer-contact .form { + color: $white; + font-family: $font-family-sans-serif; font-weight: 700; + letter-spacing: 1.5px; + text-transform: none; + .icon { + font-size: em(20px); + min-width: 25px; + } } .footer-indent { @@ -2814,9 +2830,18 @@ footer { padding: 12px; } -// FIXME WORKAROUND #main-navigation { max-width: $max-designed-body-width; } +// Contact / Feedback +.feedback-content .form-group { + label[data-required="true"][for]::after { + content: ' *'; + } + textarea { + min-height: em(200px); + } +} + @import 'customForms'; \ No newline at end of file diff --git a/themes/fid_adlr/templates/feedback/form.phtml b/themes/fid_adlr/templates/feedback/form.phtml index 8ca1d6caec1..a20d501590e 100644 --- a/themes/fid_adlr/templates/feedback/form.phtml +++ b/themes/fid_adlr/templates/feedback/form.phtml @@ -19,7 +19,7 @@ <div class="feedback-content"> <?php if ($title): ?> <?php $this->headTitle($title); ?> - <h1><?=$title?></h1> + <h2><?=$title?></h2> <?php endif; ?> <?=$this->flashmessages()?> @@ -39,42 +39,40 @@ <?php endif ?> <?php $currentGroup = null; ?> - <?php $countElements = count($form->getElements()); $counter = 0 ?> - <?php foreach($form->getElements() as $el): ?> - <? $counter++; ?> - <? if($counter == $countElements) : ?> - <div class="form-group"> - <input id="confirmPrivacy" name="confirmPrivacy" type="checkbox" class="margin-r-2" required> - <label for="confirmPrivacy"> - <?= - $this->translate( - 'email_contact_policy', - ['%%policy_link%%' => '<a target="_blank" href="'. $this->url('fid/user/policy') . '">' . $this->transEsc('fid::policy') . '</a>'] - ); - ?>* - </label> - </div> - <?php endif ?> - <?php + <?php + // override default elements by defined in Feedback.yml with same name + $uniqueElements = []; + foreach($form->getElements() as $el) { + if (!array_key_exists($el['name'], $uniqueElements)) { + $uniqueElements[$el['name']] = $el; + } + } + ?> + <?php $countElements = count($uniqueElements); $counter = 0 ?> + <?php foreach(array_values($uniqueElements) as $el): ?> + <?php + if (isset($el["settings"]["display"]) && $el["settings"]["display"] === "none") { + continue; + } - $formElement = $form->get($el['name']); + $formElement = $form->get($el['name']); - // Group form elements into field sets - $handleGroup = $group = null; - if (isset($el['group']) && !empty($el['group'])) { - $group = $el['group']; - } - if ($group && $currentGroup === null) { - $handleGroup = 'open'; - $currentGroup = $group; - } elseif ($currentGroup && !$group) { - $handleGroup = 'close'; - $currentGroup = null; - } elseif ($currentGroup !== $group) { - $handleGroup = 'openAndClose'; - $currentGroup = $group; - } + // Group form elements into field sets + $handleGroup = $group = null; + if (isset($el['group']) && !empty($el['group'])) { + $group = $el['group']; + } + if ($group && $currentGroup === null) { + $handleGroup = 'open'; + $currentGroup = $group; + } elseif ($currentGroup && !$group) { + $handleGroup = 'close'; + $currentGroup = null; + } elseif ($currentGroup !== $group) { + $handleGroup = 'openAndClose'; + $currentGroup = $group; + } ?> <?php if (in_array($handleGroup, ['close', 'openAndClose'])): ?> @@ -89,7 +87,7 @@ <p class="info"><?= $this->transEsc($el['help']) ?></p> <?php endif ?> <?php if ($el['type'] !== 'submit'): ?> - <label for="<?=$this->escapeHtmlAttr($el['name'])?>" class="control-label<?=!empty($el['required']) ? ' required' : ''?>"><?=$this->transEsc($el['label'])?>:</label> + <label for="<?=$this->escapeHtmlAttr($el['name'])?>" class="control-label" data-required="<?=!empty($el['required']) ? 'true' : 'false'?>"><?=$this->transEsc($el['label'])?></label> <?php else: ?> <?php if ($helpPost): ?> <div class="form-info post"> @@ -100,7 +98,22 @@ <?php endif ?> <?= $this->formRow($formElement) ?> - </div> + </div> + + <?php /* always embed privacy policy checkbox at the end of feedback form before submit element */?> + <? if(++$counter == $countElements -1) : ?> + <div class="form-group"> + <input id="confirmPrivacy" name="confirmPrivacy" type="checkbox" class="margin-r-2" required> + <label for="confirmPrivacy"> + <?= + $this->translate( + 'email_contact_policy', + ['%%policy_link%%' => '<a target="_blank" href="'. $this->url('fid/user/policy') . '">' . $this->transEsc('fid::policy') . '</a>'] + ); + ?>* + </label> + </div> + <?php endif ?> <?php endforeach ?> <?= $this->form()->closeTag() ?> <?php endif ?> diff --git a/themes/fid_adlr/templates/feedback/preselect.phtml b/themes/fid_adlr/templates/feedback/preselect.phtml index c3167e8b3b2..9a37590734e 100644 --- a/themes/fid_adlr/templates/feedback/preselect.phtml +++ b/themes/fid_adlr/templates/feedback/preselect.phtml @@ -19,7 +19,7 @@ <div class="feedback-content"> <?php if ($title): ?> <?php $this->headTitle($title); ?> - <h1><?=$title?></h1> + <h2><?=$title?></h2> <?php endif; ?> <?=$this->flashmessages()?> @@ -39,12 +39,24 @@ </div> </div> <?php endif ?> + <?php + // override default elements by defined in Feedback.yml with same name + $uniqueElements = []; + foreach($form->getElements() as $el) { + if (!array_key_exists($el['name'], $uniqueElements)) { + $uniqueElements[$el['name']] = $el; + } + } + ?> <?php $currentGroup = null; ?> - <?php $countElements = count($form->getElements()); $counter = 0 ?> - <?php foreach($form->getElements() as $el): ?> - <?php if($el['name'] != "email" AND $el['name'] != "name"): ?> + <?php foreach(array_values($uniqueElements) as $el): ?> <?php + + if (isset($el["settings"]["display"]) && $el["settings"]["display"] === "none") { + continue; + } + $formElement = $form->get($el['name']); // Group form elements into field sets @@ -76,7 +88,7 @@ <p class="info"><?= $this->transEsc($el['help']) ?></p> <?php endif ?> <?php if ($el['type'] !== 'submit'): ?> - <label for="<?=$this->escapeHtmlAttr($el['name'])?>" class="control-label<?=!empty($el['required']) ? ' required' : ''?>"><?=$this->transEsc($el['label'])?>:</label> + <label for="<?=$this->escapeHtmlAttr($el['name'])?>" class="control-label"><?=$this->transEsc($el['label'])?></label> <?php else: ?> <?php if ($helpPost): ?> <div class="form-info post"> @@ -87,7 +99,6 @@ <?php endif ?> <?= $this->formRow($formElement) ?> </div> - <?php endif ?> <?php endforeach ?> <?= $this->form()->closeTag() ?> <?php endif ?> diff --git a/themes/fid_adlr/templates/footer.phtml b/themes/fid_adlr/templates/footer.phtml index a699816b9eb..0a66be8e915 100644 --- a/themes/fid_adlr/templates/footer.phtml +++ b/themes/fid_adlr/templates/footer.phtml @@ -8,13 +8,15 @@ <div id="footer-contact-wrapper"> <div id="footer-contact" class="row"> <div class="col-md-5"> - <p>Kontakt</p> + <p><?=$this->transEsc("Contact")?></p> </div> <div class="col-md-7"> <p>Dr. Sebastian Stoppe<br> Projektkoordinator<br> +49 341 9730626<br> - <span class="form">→ Kontaktformular</span></p> + <?php if ($this->feedback()->tabEnabled()): ?> + <h5 class="form"><i class="icon icon-arrow-right" aria-hidden="true"></i><a id="feedbackLink" data-lightbox href="<?=$this->url('feedback-home')?>"><?=$this->transEsc("contact_form")?></a></h5> + <?php endif; ?> </div> </div> </div> diff --git a/themes/fid_adlr/templates/header.phtml b/themes/fid_adlr/templates/header.phtml index cc87564c7ba..e09ee4fe030 100644 --- a/themes/fid_adlr/templates/header.phtml +++ b/themes/fid_adlr/templates/header.phtml @@ -17,11 +17,6 @@ <!-- fid_adlr: header-menu-collapse for feedback (disabled?) / registering / card (disabled) --> <?php if (!isset($this->layout()->renderingError)): ?> <div class="register collapse header-menu-collapse" id="register-menu"> - <?php if ($this->feedback()->tabEnabled()): ?> - <li> - <a id="feedbackLink" data-lightbox href="<?=$this->url('feedback-home')?>"><i class="icon icon-mail" aria-hidden="true"></i> <?=$this->transEsc("Feedback")?></a> - </li> - <?php endif; ?> <span<?php if ($account->isLoggedIn()): ?> class="hidden"<?php endif ?>> <?php if ($account->supportsCreation()): ?> <a class="navbar-header-link no-margin-l" href="<?=$this->url('myresearch-account') ?>?auth_method=<?=$account->getAuthMethod()?>" data-lightbox> -- GitLab