My own form submission

Design help Custom code
1

Hi there,
I build my own php-script for my own form submission.

It works fine, but I want to use the build in success/fail-message from Webflow.

I build a script based on this post (Form submissions to third-party service with native interactions) and put it into custom-code/footer in project-settings.

The script from the post above works fine with Basin and shows the build-in Webflow success/fail-messages.

<script type="text/javascript">
//apply only to forms with the action pointing to Basin
  
$('form[action^="https://mydomain.com"]').each(function(i,el){
  form = $(el);
  form.submit(function(e){

    //stop the form from submitting
    e.preventDefault();
    form = $(e.target);
    
    //submit the form via ajax
   $.ajax({
     method: "POST",
     url: form.attr('action'),
     data: form.serialize(),
      
      success: function(data){
        if(data.success){
          //successful submission - hide the form and show the success message
          parent = $(form.parent());
          parent.children('form').css('display','none');
          parent.children('.w-form-done').css('display','block');
        } else {
          //failed submission - log the output to the console and show the failure message
          parent.find('.w-form-fail').css('display','block');
          }
      },
      error: function(){
        //failed submission - show the failure message
        parent.find('.w-form-fail').css('display','block');
      	}
    });
  });
});
</script>

I don’t know why, but for any reason my script won’t show the success or failed message. Any idea what I did wrong? The PHP script seems to work, because I’ll get an email with the form-data.

Thank you :slight_smile:

1 Like
2

You might need to customize the javascript a little bit more, depending on the output of your pho script. The JS is expecting an AJAX response, and it expects a parameter called “success” with its value set to true. You might need to modify the “if(data.success){“ line to match what your php script is returning.

3

Your code expects an output like this:

{
    success: true
}

make sure you response as JSON and allow CORS access:

$allowedOrigins = array(
  '(http(s)://)?(www\.)?my\-domain\.com'
);
 
if (isset($_SERVER['HTTP_ORIGIN']) && $_SERVER['HTTP_ORIGIN'] != '') {
  foreach ($allowedOrigins as $allowedOrigin) {
    if (preg_match('#' . $allowedOrigin . '#', $_SERVER['HTTP_ORIGIN'])) {
      header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
      header('Access-Control-Allow-Methods: POST');
      header('Access-Control-Max-Age: 1000');
      header('Access-Control-Allow-Headers: Content-Type, Accept, X-Requested-With');
      break;
    }
  }
}
4

Ok, so that means my php script has to send a special-return?

I build this php script based on something I found on the web. Is it wrong?

<?php

$mailTo = 'mail@domain.com';
$mailFrom = '"FormMailer"';
$mailSubject    = 'Feedback';
$returnPage = 'https://domain.com/success.html';
$returnErrorPage = 'https://domain.com/failed.html';
$mailText = "";

if(isset($_POST)) {
   foreach($_POST as $name => $value) {
      if(is_array($value)) {
          $mailText .= $name . ":\n";
          foreach($valueArray as $entry) {
             $mailText .= "   " . $value . "\n";
          }
      }
      else {
          $mailText .= $name . ": " . $value . "\n";
      }
   }
} 
if(get_magic_quotes_gpc()) {
     $mailtext = stripslashes($mailtext);
 }

$mailSent = @mail($mailTo, $mailSubject, $mailText, "From: ".$mailFrom);

if($mailSent == TRUE) {
   header("Location: " . $returnPage);
}
else {
   header("Location: " . $returnErrorPage);
}
exit();
?>
6

How can I get an output like this?

{
    success: true
}

And what does this code do? I added it to my php-script and changed to domain, but nothing happens.

$allowedOrigins = array(
  '(http(s)://)?(www\.)?my\-domain\.com'
);
 
if (isset($_SERVER['HTTP_ORIGIN']) && $_SERVER['HTTP_ORIGIN'] != '') {
  foreach ($allowedOrigins as $allowedOrigin) {
    if (preg_match('#' . $allowedOrigin . '#', $_SERVER['HTTP_ORIGIN'])) {
      header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
      header('Access-Control-Allow-Methods: POST');
      header('Access-Control-Max-Age: 1000');
      header('Access-Control-Allow-Headers: Content-Type, Accept, X-Requested-With');
      break;
    }
  }
}
7

Try this:

if($mailSent == TRUE) {
   echo json_encode(array('success' => true));
}
else {
  echo json_encode(array('error' => true));
}

more detailed info about CORS, by using this code you can use this script for other domains.

8

No this doesn’t work.

Any other ideas?

9

Ok, I think I understand the problem, but how can I resolve it?

Maybe you can help me? Please take a look at my php and JS. What did I wrong?

10

For troubleshooting, you might want to look in the JS console to see what your PHP script is returning. If you add a console.log(data) line to the JS code right before that “if(data.success)” line, the script output will be sent to the console.

You could also simplify things a bit. Have your PHP script just return the word “success” instead of a JSON response…

echo “success”;

…and change the if statement in JS code to

if(data==‘success’){

11

Ok, perfekt! That works great :slight_smile:

There are two questions for me right now:

  1. How can I handle it, that not everybody could use my php-script/server to sent mails? I mean how can I restrict it?

  2. How can I allow special websites to use the php-script to prevent errors like this:

    56
    561830×176 38.3 KB

12

No one can help? :stuck_out_tongue:

13

I can help. Where are you at? I’m also doing custom forms. Just started using webflow but I’m a web developer.

14

This is what I have and it works well. After reviewing this post and others I found nothing very helpful. You solution would work in theory but do you have no knowledge of what is going on on your PHP server?

const id = 'elem'
const req = new XMLHttpRequest()
req.onload = event => {
	console.log(event.statusText)
}

window.addEventListener('DOMContentLoaded', event => {
  const form = document.getElementById(id)
  console.log(id, form)
  form.addEventListener('submit', event => {
    console.log(id, 'onsubmit')
    req.open('POST', 'https://somplace-else.com/api/forms', false)
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
    req.send(new URLSearchParams(new FormData(event.target)))
    console.log(id, event.target)
  })
})