I know that I have basically no clue whatsoever.
So I am using a react form component on our website which is used on hundreds of different urls (blogs and so on). What I want to achieve is, that the url, where the form was submitted from (e.g. test.com/blog1 or test.com/blog2) is put out by the form so I can receive it with my http request and play it out in Microsoft Teams or whereever. It is likely "window.location.href" - but how do I get it as an output correctly?
My component looks like this:
import React, {useState} from "react"
import {FaPhone} from "react-icons/fa";
import {Link} from "gatsby";
import {useForm} from "react-hook-form";
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
const EasyForm = ({
title = "Kostenfreie Erstberatung",
subtitle,
butttonText = "Jetzt absenden"
}) => {
const {register, handleSubmit, formState: {errors}} = useForm();
const [isDisabled, setDisabled] = useState(false);
const onSubmit = async (f) => {
setDisabled(true);
const url = `/.netlify/functions/newsletter-form?logAll=true&debug=true`;
try {
f.source = "Form";
const result = await fetch(url, {
method: 'POST',
cache: 'no-cache',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(f)
});
var formSection = document.getElementById("formsection");
var buttonSection = document.getElementById("buttonsection");
var thankSection = document.getElementById("thanksection");
var errorSection = document.getElementById("errorsection");
if (result.status === 200) {
formSection.style.display = "none";
buttonSection.style.display = "none";
thankSection.style.display = "block";
} else {
formSection.style.display = "none";
buttonSection.style.display = "none";
errorSection.style.display = "block";
}
} catch (e) {
console.log(e);
formSection.style.display = "none";
errorSection.style.display = "block";
}
}
return (
<div className={"m-3 my-20 relative z-20"} key={"mykey"}>
<form onSubmit={handleSubmit(onSubmit)} method="POST">
<div className="shadow-lg sm:rounded-md sm:overflow-hidden border-t border-gray-100">
<div className="px-4 py-5 bg-white space-y-2 sm:p-6">
<div className="relative">
<div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="w-full border-t border-green"/>
</div>
<div className="relative flex justify-center">
<span
id="schadenheadline"
className="px-2 bg-green-lightest text-3xl font-bold text-gray-600">
{title}
</span>
</div>
</div>
<div id={"formsection"}>
<div className="mb-4 font-semibold pt-3 text-gray-500 text-lg">
{subtitle}
</div>
<div className="grid grid-cols-2 gap-6">
<div className={"col-start-1"}>
<label htmlFor="lastname" className="block text-sm font-medium text-gray-700">
Name*
</label>
<div className="mt-1">
<input
{...register("lastname", {
required: true,
minLength: {
value: 2,
}
})}
type="text"
className={classNames(errors.lastname ?
"border-red-500 focus:ring-red-500 focus:border-red-500" :
"border-gray-300 focus:ring-green focus:border-green",
"block w-full shadow-sm sm:text-sm " +
"border-gray-300 rounded-md")}
/>
<span
className="text-sm text-red-500">{errors.lastname && "Name muss mindestens 2 Zeichen lang sein"}</span>
</div>
</div>
<div>
<label htmlFor="firstname" className="block text-sm font-medium text-gray-700">
Vorname*
</label>
<div className="mt-1">
<input
{...register("firstname", {
required: true,
minLength: {
value: 2,
}
})}
type="text"
className={classNames(errors.email ?
"border-red-500 focus:ring-red-500 focus:border-red-500" :
"border-gray-300 focus:ring-green focus:border-green",
"block w-full shadow-sm sm:text-sm " +
"border-gray-300 rounded-md")}
/>
<span
className="text-sm text-red-500">{errors.firstname && "Vorname muss mindestens 2 Zeichen lang sein"}</span>
</div>
</div>
<div className={"col-start-1"}>
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
E-Mail*
</label>
<div className="mt-1">
<input
{...register("email", {
required: true,
pattern: {
value: /\S+@\S+\.\S+/,
}
})}
type="email"
autoComplete="email"
className={classNames(errors.email ?
"border-red-500 focus:ring-red-500 focus:border-red-500" :
"border-gray-300 focus:ring-green focus:border-green",
"block w-full shadow-sm sm:text-sm " +
"border-gray-300 rounded-md")}
/>
<span
className="text-sm text-red-500">{errors.email && "Bitte gültige E-Mail eingeben"}</span>
</div>
</div>
<div>
<label htmlFor="phone" className="block text-sm font-medium text-gray-700">
Telefon
</label>
<div className="mt-1 relative rounded-md shadow-sm">
<div
className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<FaPhone className={"h-8 w-8 text-gray-400 pr-4"}/>
</div>
<input
{...register("phone", {
required: false,
minLength: {
value: 8,
}
})}
type="text"
autoComplete="tel"
className={classNames(errors.phone ?
"border-red-500 focus:ring-red-500 focus:border-red-500" :
"border-gray-300 focus:ring-green focus:border-green",
"pl-9 block w-full shadow-sm sm:text-sm " +
"border-gray-300 rounded-md")}
/>
</div>
<span
className="text-sm text-red-500">{errors.phone && "Telefonnr. muss mindestens 8 Zeichen lang sein"}</span>
</div>
<div className={"col-start-1"}>
<div>
<label htmlFor="fin" className="block text-sm font-medium text-gray-700">
FIN
</label>
<div className="mt-1">
<input
{...register("fin", {
required: false,
})}
type="text"
placeholder={"Feld E im Kfz-Schein"}
className={classNames(errors.fin ?
"border-red-500 focus:ring-red-500 focus:border-red-500" :
"border-gray-300 focus:ring-green focus:border-green",
"block w-full shadow-sm sm:text-sm " +
"border-gray-300 rounded-md")}
aria-describedby="email-description"
/>
</div>
</div>
</div>
</div>
<fieldset className="space-y-3 mt-4">
<div className="relative flex items-start">
<div className="flex items-center h-5">
<input
aria-describedby="datenschutz-description"
{...register("datenschutz", {
required: true,
})}
type="checkbox"
/*className="focus:ring-green h-4 w-4 text-green border-gray-300 rounded"*/
className={classNames(errors.datenschutz ?
"border-red-500 focus:ring-red-500 focus:border-red-500" :
"focus:ring-green text-green border-gray-300",
"h-4 w-4 rounded")}
/>
</div>
<div className="ml-3 text-sm">
<p id="comments-description" className="text-gray-500">
Ich habe die <Link to={"/datenschutz/"}
className={"text-green underline"}>Datenschutzerklärung</Link> zur Kenntnis genommen.
</p>
</div>
</div>
<div
className="text-sm text-red-500">{errors.datenschutz && "Bitte der Datenschutzerklärung zustimmen"}
</div>
</fieldset>
</div>
<div id={"thanksection"} className={"hidden"}>
<div className="font-semibold pt-5 text-gray-500 text-lg text-green-light">
Vielen Dank!
</div>
<div className="mb-4 text-gray-500 text-lg">
Ihre Anfrage wurde an uns übermittelt.
</div>
</div>
<div id={"errorsection"} className={"hidden"}>
<div className="font-semibold pt-5 text-gray-500 text-lg">
Oh, Entschuldigung.
</div>
<div className="mb-4 text-gray-500 text-lg">
Es scheint ein Fehler bei der Verarbeitung passiert zu sein.
</div>
</div>
{/*{errors && <div
className={"text-red-500 pl-2 text-sm mt-2"}>Fehler: {errors}</div>
}*/}
</div>
<div className="px-4 py-3 bg-gray-50 text-right sm:px-6" id={"buttonsection"}>
<div className="flex justify-center">
<button
type="submit"
id={`easyform_btn_submit`}
disabled={isDisabled}
className="w-40 py-2 px-4 border border-transparent shadow-sm
text-sm font-medium rounded-md text-gray-800 bg-green-lighter hover:bg-green-light
focus:outline-none"
>
{butttonText}
</button>
</div>
</div>
</div>
</form>
</div>strong text
)
}And my form submission looks like this:
const submitFormToPowerAutomator = async (body) => {
const payload = {
"firstname": body.firstname,
"lastname": body.lastname,
"phone": body.phone,
"email": body.email,
"fin": body.fin,
}
const url = "https://prod-30.germanywestcentral.logic.azure.com:443/...........";
return fetch(url, {
method: "post",
body: JSON.stringify(payload),
headers: {"Content-Type": "application/json"}
})
}And the JSON request looks like this
{
"type": "object",
"properties": {
"firstname": {
"type": "string"
},
"lastname": {
"type": "string"
},
"phone": {
"type": "string"
},
"email": {
"type": "string"
},
"fin": {
"type": "string"
}
}
}Would appreciate
