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
---
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: hello@some.com
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
@NataliaB, Did you clear the cache $ bin/grav cache after making changes?
I copied you code and it’s working fine.
The site is now on web hosting, I cleared the entire cache through the site admin panel, cleared the browser cache, cookies. But still I get a message like this. Tried in different browsers.
Today I downloaded the Agency theme. And I looked at how the contact form is implemented in it. In my case the problem was in user/mytheme/templates/modular/form.html.twig
For some reason it was missing some code.
and url for action in contact.md
Its my final result:
01.home
_contact-us
form.md
---
title: 'SUBMIT YOUR APPLICATION'
cache_enable: false
form:
name: contact
action: '/home#contact'
fields:
-
name: name
label: Name
classes: form-control
autofocus: 'off'
autocomplete: 'on'
type: text
position: left
validate:
required: true
-
name: phone
label: 'Phone (whatsapp)'
classes: form-control
placeholder: ''
type: tel
position: left
validate:
required: true
-
name: email
label: Email
classes: form-control
placeholder: ''
type: email
position: left
validate:
required: true
-
name: message
placeholder: 'You message...'
type: textarea
classes: form-control
position: right
validate:
required: true
buttons:
-
type: submit
classes: 'btn btn-primary btn-lg'
value: Send
process:
-
message: 'Thank you for your feedback!'
---
my “\user\themes\mytheme\templates\form.html.twig”
{% set grid_size = theme_var('grid-size') %}
<section class="section modular-text {{ page.header.class}} bg-blue" id="contact">
<div class="container {{ grid_size }} columns contact">
<div class="column col-md-12" style="order:1">
<div class="col-lg-12 text-center">
{{ content|raw }}
<div class="column col-md-12">
<p class="contact">{{ page.menu }}</p>
{% for feature in page.header.features %}
<div class="column contact">
{% if feature.url %}<a href="{{feature.url}}">{% endif %}
<div class="contact-icon">
{% if feature.myimg %}
{{ page.media.files[ feature.myimg ].html|raw }}
{% endif %}
{% if feature.header %}
<h6>{{ feature.header }}</h6>
{% endif %}
</div>
{% if feature.url %}</a>{% endif %}
<div class="contact-content">
{% if feature.text %}
<p>{{ feature.text }}</p>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="column col-md-12" style="order:0">
<p class="contact">{{ page.title }}</p>
{% if form is null %}
{% set form = grav.session.getFlashObject('form') %}
{% endif %}
{% include 'partials/form-messages.html.twig' %}
{% set scope = scope ?: 'data.' %}
{% set multipart = '' %}
{% set method = form.method|upper|default('POST') %}
{% for field in form.fields %}
{% if (method == 'POST' and field.type == 'file') %}
{% set multipart = ' enctype="multipart/form-data"' %}
{% endif %}
{% endfor %}
{% set action = form.action ? base_url ~ form.action : base_url ~ page.route ~ uri.params %}
{% if (action == base_url_relative) %}
{% set action = base_url_relative ~ '/' ~ page.slug %}
{% endif %}
<form name="{{ form.name }}"
action="{{ action }}"
method="{{ method }}"{{ multipart }}
{% if form.id %}id="{{ form.id }}"{% endif %}
{% block form_classes %}
{% if form.classes %}class="{{ form.classes }}"{% endif %}
{% endblock %}
>
{% block inner_markup_fields_start %}{% endblock %}
<div class="col-md-6">
{% for field in form.fields %}
{% if field.position == 'left' %}
{% set value = form.value(field.name) %}
<div class="form-group">
{% include "forms/fields/#{field.type}/#{field.type}.html.twig" ignore missing %}
</div>
{% endif %}
{% endfor %}
</div>
<div class="col-md-6">
{% for field in form.fields %}
{% if field.position == 'right' %}
{% set value = form.value(field.name) %}
<div class="form-group" id="message">
{% include "forms/fields/#{field.type}/#{field.type}.html.twig" ignore missing %}
</div>
{% endif %}
{% endfor %}
</div>
{% include "forms/fields/formname/formname.html.twig" %}
{% block inner_markup_fields_end %}{% endblock %}
{% block inner_markup_buttons_start %}
<div class="buttons">
{% endblock %}
<div class="col-lg-12 text-center">
<div class="form-group">
{% for button in form.buttons %}
{% if button.outerclasses is defined %}<div class="{{ button.outerclasses }}">{% endif %}
{% if button.url %}
<a href="{{ button.url starts with 'http' ? button.url : url(button.url) }}">
{% endif %}
<button
{% if button.id %}id="{{ button.id }}"{% endif %}
{% block button_classes %}
class="{{ button.classes|default('button') }}"
{% endblock %}
{% if button.disabled %}disabled="disabled"{% endif %}
type="{{ button.type|default('submit') }}"
{% if button.task %}
name="task" value="{{ button.task }}"
{% endif %}
>
{{ button.value|t|default('Submit') }}
</button>
{% if button.url %}
</a>
{% endif %}
{% if button.outerclasses is defined %}</div>{% endif %}
{% endfor %}
</div>
</div>
{% block inner_markup_buttons_end %}
</div>
{% endblock %}
{{ nonce_field('form', 'form-nonce')|raw }}
</form>
setting for testing send email on localhost (open server I use)
“\user\config\plugins\email.yaml”
enabled: true
from:
from_name:
to:
to_name:
queue:
enabled: false
flush_frequency: '* * * * *'
flush_msg_limit: 10
flush_time_limit: 100
mailer:
engine: sendmail
smtp:
server: localhost
port: 25
encryption: none
user: ''
password: ''
auth_mode: ''
sendmail:
bin: '/usr/sbin/sendmail -bs'
content_type: text/html
debug: false
Now everything works great. After sending the letter, I stay on the main page and I am shown a message right above my form - Your message has been sent. Thank you.-
