Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
svenflock
Experienced
Topic Author
Posts: 34
Joined: 14 Oct 2019, 14:44

How to redirect to another page after pressing submit on the contact form

21 Jan 2020, 18:04

Hi!

To be able to measure conversions, i.e. if somebody has filled out the contact form, I need to redirect the user to a different URL in order to capture that event. Currently, after the submit button has been pressed, a large check icon appears.

I searched the documentation of Foundation but I did not find any topic on that. Is there a possibility to define a custom URL after the data has been send out?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12261
Joined: 30 Sep 2006, 03:37

Re: How to redirect to another page after pressing submit on the contact form

22 Jan 2020, 02:47

The contact form is a native X3 feature, which uses Ajax/Javascript to send data to x3.api.php endpoint, which then sends the email via SMTP/settings. There is no "hook" to intercept the contact form send-success, and it's not related to Foundation either (Foundtion is used for some form styling only).

It is possible to manually trigger the contact form, and then create your own success function. Settings > Custom > Custom Javascript:
Code
function x3_load_page(){
  var myform = $('.myform');
  if(myform.length) {
    myform.contactForm(function(success){
      console.log('success', success);
      window.location = 'https://www.photo.gallery/';
    });
  }
}
You would need to replace the contact form class with your new myform class in the HTML for the form:
Code
<form data-abide class="myform">
This is not meant to be a public option. It won't update the form and stop the spinner, but that doesn't matter if you are redirecting the page anyway.
 
User avatar
svenflock
Experienced
Topic Author
Posts: 34
Joined: 14 Oct 2019, 14:44

Re: How to redirect to another page after pressing submit on the contact form

31 Jan 2020, 07:26

Thank you and sorry for my late reply. I couldn't test it before today.

For some reason, the variable declaration to
Code
var myform = $('.myform');
doesn't work. The variable is not set. However, if I substitute it with the jQuery function, it works like a charm. 

Do you have any idea why the variable does not work? Is there destructor in place somewhere?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12261
Joined: 30 Sep 2006, 03:37

Re: How to redirect to another page after pressing submit on the contact form

31 Jan 2020, 21:13

svenflock wrote:doesn't work. The variable is not set. However, if I substitute it with the jQuery function, it works like a charm.
I'm not quite sure what you mean. The variable is already assigned by jQuery $(), so I'm not sure what you mean by "if I sustitute with jQuery function". What's your code? Did you add the contactform specifically with class="myform"?
 
User avatar
svenflock
Experienced
Topic Author
Posts: 34
Joined: 14 Oct 2019, 14:44

Re: How to redirect to another page after pressing submit on the contact form

03 Feb 2020, 00:51

Hi,

I had to write the following code to make it work:
Code
if(document.body.classList.contains('page-kontakt')) {
    if($('.kontaktformular').length) {
      $('.kontaktformular').contactForm(function(success){
        window.location = '/danke';
      });
    }
  }
Assigning
Code
$('.kontaktformular')
to a variable did not work as it told me that it is not defined. Thus, i put above statement everywhere instead of the variable.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12261
Joined: 30 Sep 2006, 03:37

Re: How to redirect to another page after pressing submit on the contact form

03 Feb 2020, 01:33

As long as it works  :sunglasses: