Contact Form Submit and Redirect

Wappler General How To
#1

Hi All,

I need help with a workflow or where this is going wrong. In a previous post I made about how to even get the form submitted. That is now all fixed. I can now submit my form and get the email.

Now the last two things. Screen shots below to help with workflow. I have a server connect form with very basic input email, name, and comments area. That form is a server connect form. The action calls the API. The API is set to execute a redirect and send the mail on a dynamic event of success. The form should clear, the page should redirect to a thank you.

Thoughts on what I am missing here. I know it has to be an over site.

BTW the form does send me an email correctly. Just does not clear the fields and redirect. In debug I see the 302 status and then I see the 200 status.

formaction
formaction1239×811 121 KB
api
api887×610 45.9 KB

#2

Your server side workflow is wrongly set up. You should not use the redirect step in the server action, please remove it from there. In your send mail server action you only need the send mail step - nothing else.
The redirect should happen on the page, where your form is.

In App Structure add the Browser component, then on form success dynamic event, call the Browser > Go To action.

#3

Almost there Now it clears and resets the form. Sends the email. However; still no redirect yet. Removed the redirect server action api.

serveraction
serveraction1248×809 142 KB

Strange thing is now I never see the 302 just a 200.

Here is the dynamic events.

#4

Not sure what do you mean here? Why would you see a 302, when the server action runs successfully? A success status is 200 and that is what is expected.

As for the redirect on form submit, please check browser console for error when submitting the form.

#5

When it was set to the server action redirect and I was watching in debug mode within the browser I would see the 302 post. Now that I took that out I don’t see that. Did not know if there is even any value with that. Just an observation on my part is all.

I checked the debug and this is all I get right now.

200
2001353×418 149 KB

#6

Also, the response nothing is there.

#7

Well this is exactly what is it expected to see when the server action runs successfully - a status 200.

In your dev tools open the tab called CONSOLE and see if there are errors when you submit the form.

#8

Can you post a screenshot of your on success dynamic event?

#9

I see a 404 error on dmxBrowser.js and other components.

Make sure you have all files uploaded to the server with image

#10

Here is dump of the console. Several errors:
Error in parsing value for ‘-webkit-text-size-adjust’. Declaration dropped. bootstrap.min.css:6:1713
14:47:18.092 Unknown pseudo-class or pseudo-element ‘-moz-focus-outer’. Ruleset ignored due to bad selector. bootstrap.min.css:6:30789
14:47:18.092 Ruleset ignored due to bad selector. bootstrap.min.css:6:31230
14:47:18.104
GET
https://fonts.googleapis.com/css?family=Tahoma:400

14:47:18.112
GET
https://fonts.googleapis.com/css?family=Verdana:400

14:47:18.154 The resource from “https://fonts.googleapis.com/css?family=Tahoma:400” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
debug.php
14:47:18.155 The resource from “https://fonts.googleapis.com/css?family=Verdana:400” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
debug.php
14:47:18.403 Source map error: Error: request failed with status 404
Resource URL: http://customerwebsite.com/dmxAppConnect/dmxAppConnect.js
Source Map URL: maps/dmxAppConnect.js.map

14:47:18.493 Source map error: Error: request failed with status 404
Resource URL: http://customerwebsite.com/dmxAppConnect/dmxNotifications/dmxNotifications.js
Source Map URL: …/maps/dmxNotifications.js.map

14:47:18.516 Source map error: Error: request failed with status 404
Resource URL: http://customerwebsite.com/dmxAppConnect/dmxValidator/dmxValidator.js
Source Map URL: …/maps/dmxValidator.js.map

14:47:18.516 Source map error: Error: request failed with status 404
Resource URL: http://customerwebsite.com/bootstrap/5/js/bootstrap.bundle.min.js
Source Map URL: bootstrap.bundle.min.js.map

14:47:18.517 Source map error: Error: request failed with status 404
Resource URL: http://customerwebsite.com/dmxAppConnect/dmxBrowser/dmxBrowser.js
Source Map URL: …/maps/dmxBrowser.js.map

#11

Could you just post a screenshot of the console, just after you submit your form? Most probably there are required js files missing from your server/target, as the browser component is not triggering the redirect.

#12

Okay I just got it to redirect. Now I am in the final parts of removing all errors if I can. Below is the list from the console after submit and redirect. The fonts one is present in every page. Thoughts on where to look for these? I have uploaded everything BTW to the site.

console
console1354×287 128 KB

#13

Map files:

CSS error:
Try adding type="text/css" on the link

Like:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?familiy.........
#14

When looking at the debug it allows me to learn more and takes me to this link:

Now I am just trying to determine if that is the root of the error and where the solution needs to be placed at…