I read solutions on the forum how to display text - Thanks for contacting - without redirecting to another page. But, I can't.
Turned to documentation
I put the code in my file. But the submit message opens on a new page with a white background.
This my contact.md
YAML
---
title: 'ЗАЛИШИТИ ЗАЯВКУ'
routable: false
cache_enable: false
form:
name: contact-form
template: form-messages
action: /
classes: 'row gtr-50 gtr-uniform'
refresh_prevention: true
fields:
-
name: Name
label: Iмя
validate:
required: true
message: 'is required'
autofocus: 'off'
autocomplete: 'on'
type: text
outerclasses: 'col-6 col-12-small'
classes: null
-
name: Phone
label: 'Телефон (whatsapp)'
type: tel
validate:
required: true
message: 'is required'
outerclasses: 'col-6 col-12-small'
classes: null
-
name: Email
label: Email
validate:
required: true
message: 'is required'
type: email
outerclasses: 'col-6 col-12-small'
classes: null
-
name: Message
label: false
placeholder: 'Ваше запитання...'
validate:
required: true
message: 'is required'
type: textarea
outerclasses: 'col-6 col-12-small'
classes: null
rows: 7
buttons:
-
type: submit
value: Відправити
outerclasses: form-field
classes: 'button primary'
process:
save:
fileprefix: contact-
dateformat: dmY-His-u
extension: txt
body: '{% include ''forms/data.txt.twig'' %}'
email:
subject: '[Form from Editorial Website] {{ form.value.name|e }}'
body: '{% include ''forms/data.html.twig'' %}'
message: 'Thank you from your submission !'
# display: /thankyou
reset: true
class: small
process:
markdown: true
twig: true
features:
-
header: null
text: +123-456-7890
url: null
myimg: phone_icon.svg
-
header: null
text: h[email protected]
url: null
myimg: email-icon.svg
-
header: null
text: 'some text'
url: null
myimg: location_icon.svg
-
header: null
text: www.somesite.com
url: null
myimg: web-icon.svg
media_order: 'phone_icon.svg,web-icon.svg,location_icon.svg,email-icon.svg'
menu: Контакти
---
<div id="form-result"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('#contact-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
const result = document.querySelector('#form-result');
const action = form.getAttribute('action');
const method = form.getAttribute('method');
fetch(action, {
method: method,
body: new FormData(form)
})
.then(function(response) {
if (response.ok) {
return response.text();
} else {
return response.json();
}
})
.then(function(output) {
if (result) {
result.innerHTML = output;
}
})
.catch(function(error) {
if (result) {
result.innerHTML = 'Error: ' + error;
}
throw new Error(error);
});
});
});
</script>
and folder structure:
user/ pages/
01.home
---07._contact-us
contact.en.md
contact.md
contact.ro.md
contact.ru.md
email-icon.svg
location_icon.svg
phone_icon.svg
web-icon.svg
last edited 03/15/23 by Natalia Bazilenco
