stopplidelsen/innhold
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add confirmation message for newsletter signup

Browse source 
Add success confirmation message to newsletter plugin
Update translation files with confirmation text
Improve form handling to show confirmation message
Add styling for confirmation message display
Ensure name field is properly included in form
This commit is contained in:
Ruben 2026-02-07 00:32:43 +01:00
parent 99ef5f93c2
commit b88baf1bef
3 changed files with 31 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

42
custom/plugins/page/newsletter-signup.php
View file

@ -43,6 +43,7 @@ function newsletterT(string $key): string {
'notice' => 'Vi sender ca. 12 e-poster i året.',
'submit_button' => 'Meld deg på',
'success_message' => 'Sjekk innboksen din!',
'success_confirm' => 'Takk! Vi har sendt en e-post til deg. Åpne lenken i e-posten og bekreft for å fullføre påmeldingen.',
'error_message' => 'Noe gikk galt!'
];
return $fallbacks[$key] ?? $key;
@ -121,6 +122,7 @@ function newsletterGetTranslations(): array {
'notice' => htmlspecialchars(newsletterT('notice'), ENT_QUOTES, 'UTF-8'),
'submitButton' => htmlspecialchars(newsletterT('submit_button'), ENT_QUOTES, 'UTF-8'),
'successMessage' => htmlspecialchars(newsletterT('success_message'), ENT_QUOTES, 'UTF-8'),
'successConfirm' => htmlspecialchars(newsletterT('success_confirm'), ENT_QUOTES, 'UTF-8'),
'errorMessage' => htmlspecialchars(newsletterT('error_message'), ENT_QUOTES, 'UTF-8'),
];
}
@ -160,14 +162,22 @@ function newsletterGetScript(): string {
.then(function(data) {
btn.classList.remove('is-loading');
if (data.success) {
btn.classList.add('is-success');
var successTextEl = btn.querySelector('.btn-success-text');
var successMsg = form.getAttribute('data-success-message');
if (successTextEl && successMsg) successTextEl.textContent = successMsg;
setTimeout(function() {
btn.classList.remove('is-success');
btn.disabled = false;
}, 5000);
var confirmMsg = form.getAttribute('data-success-confirm');
if (confirmMsg) {
var notice = document.createElement('p');
notice.className = 'newsletter-confirm';
notice.textContent = confirmMsg;
form.replaceWith(notice);
} else {
btn.classList.add('is-success');
var successTextEl = btn.querySelector('.btn-success-text');
var successMsg = form.getAttribute('data-success-message');
if (successTextEl && successMsg) successTextEl.textContent = successMsg;
setTimeout(function() {
btn.classList.remove('is-success');
btn.disabled = false;
}, 5000);
}
} else {
btn.classList.add('is-error');
var errorTextEl = btn.querySelector('.btn-error-text');
@ -252,18 +262,18 @@ function newsletterRenderSmall(string $introText, string $formId): string {
$html = <<<HTML
<aside class="newsletter-section newsletter-small" id="{$escapedFormId}">
<p class="newsletter-intro">{$escapedIntro}</p>
<form class="newsletter-form" method="post" data-newsletter-form data-success-message="{$t['successMessage']}" data-error-message="{$t['errorMessage']}">
<form class="newsletter-form" method="post" data-newsletter-form data-success-message="{$t['successMessage']}" data-success-confirm="{$t['successConfirm']}" data-error-message="{$t['errorMessage']}">
<input type="hidden" name="newsletter_csrf" value="{$csrfToken}">
<input type="hidden" name="newsletter_form_id" value="{$escapedFormId}">
<div class="newsletter-fields">
<div class="newsletter-field">
<label for="newsletter_name_{$nonce}" class="visually-hidden">{$t['nameLabel']}</label>
<input type="text" id="newsletter_name_{$nonce}" name="newsletter_name" placeholder="{$t['namePlaceholder']}" required maxlength="100">
</div>
<div class="newsletter-field">
<label for="newsletter_email_{$nonce}" class="visually-hidden">{$t['emailLabel']}</label>
<input type="email" id="newsletter_email_{$nonce}" name="newsletter_email" placeholder="{$t['emailPlaceholder']}" required maxlength="100">
</div>
<div class="newsletter-field">
<label for="newsletter_name_{$nonce}" class="visually-hidden">{$t['nameLabel']}</label>
<input type="text" id="newsletter_name_{$nonce}" name="newsletter_name" placeholder="{$t['namePlaceholder']}" required maxlength="100">
</div>
<button type="submit" name="newsletter_submit" class="button">
<span class="btn-text">{$t['submitButton']}</span>
<span class="btn-spinner" aria-hidden="true"></span>
@ -436,6 +446,12 @@ function newsletterGetStyles(): string {
font-size: 0.9rem;
margin-top:0;
}
.newsletter-small .newsletter-confirm {
margin: 0.3rem 0 0;
font-size: 0.95rem;
color: var(--color-green);
font-weight: 600;
}
.newsletter-small .button.is-success { background-color: var(--color-green); color: white; }
.newsletter-small .button.is-error { background-color: oklch(0.55 0.2 25); color: white; outline: none; }
</style>