Closed nantille closed 1 year ago
Can you please provide a copy of your page that contains the email form?
This is the contact form:
---
title: 'Contact Form'
refresh_prevention: true
form:
name: contact-form
template: form-messages
refresh_prevention: true
action: /contact-form
fields:
-
name: name
label: Name
placeholder: ''
autocomplete: 'on'
type: text
validate:
required: true
-
name: email
label: Email
placeholder: ''
type: email
validate:
required: true
-
name: message
label: Message
placeholder: ''
type: textarea
validate:
required: true
-
name: g-recaptcha-response
label: Captcha
type: captcha
recaptcha_site_key: my_site_key
recaptcha_not_validated: 'Captcha not valid!'
validate:
required: true
buttons:
-
type: submit
value: Submit
process:
-
captcha:
recaptcha_secret: my_secret
-
email:
subject: '{{ form.value.name|e }}'
body: '{% include ''forms/data.html.twig'' %}'
-
save:
fileprefix: contact-
dateformat: Ymd-His-u
extension: txt
body: '{% include ''forms/data.txt.twig'' %}'
-
message: 'Thank you for your message. I will get back to you soon.'
-
reset: true
---
<hr>
<div id="form-result"></div>
<script>
$(document).ready(function(){
var form = $('#contact-form');
form.submit(function(e) {
// prevent form submission
e.preventDefault();
// submit the form via Ajax
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
dataType: 'html',
data: form.serialize(),
success: function(result) {
// Inject the result in the HTML
$('#form-result').html(result);
}
});
});
});
</script>
<style>
.button {
line-height: 0.5em;
border-radius: 0.25rem;
margin: 1rem 0 0.5rem 0;
padding: 1rem 3.125rem;
}
</style>
And this is how I use it on another page (I also couldn't find a way to display the result on the same page as the embed contact form, it opens a new blank page with the result ("thank you..." or "oops..."):
<div id="contact" class="g-block size-33 block-padding">
<hr/>
<h4 class="no-margin-top">Get in touch</h4>
The below form only seems to work on Firefox and Chrome.
{% include "forms/form.html.twig" with {form: forms( {route: '/contact-form'} ) } %}
<div id="form-result"></div>
</div>
Note that I also tried to use the form without ajax embedding but that didn't change the result.
I use SMTP for sending e-mails. I tried first on a shared hosting + TLS auth and then with gmail + SSL. Both yielded the same issue on the browsers mentioned above.
Hello,
I use this email plugin to make a simple (email, title, description) contact form. It works for Firefox and Chrome users but fails for people using other browsers like Opera and Safari. I can easily reproduce the problem with Opera and Safari. With these, I constantly get "Oops there was a problem, please check your input and submit the form again." Enabling debug does nothing as no log is produced.
Any clue?