Visualizza il messaggio di ringraziamento configurato
Un messaggio di ringraziamento all'invio del modulo è un modo accorto per riconoscere ed esprimere gratitudine all'utente che ha compilato e inviato il modulo. Ciò conferma che la loro presentazione è stata ricevuta e apprezzata. Il messaggio di ringraziamento viene configurato utilizzando la scheda invio del contenitore della guida del modulo adattivo
È possibile accedere al messaggio di ringraziamento configurato nel gestore eventi onSuccess del super componente AdaptiveForm.
Di seguito sono elencati il codice per l'associazione dell'evento onSuccess e il codice per il gestore eventi onSuccess
<AdaptiveForm mappings={extendMappings} onSubmitSuccess={onSuccess} formJson={selectedForm}/>
const onSuccess=(action) =>{
let body = action.payload?.body;
debugger;
setThankYouMessage(body.thankYouMessage.replace(/<(.|\n)*?>/g, ''));
console.log("Thank you message "+body.thankYouMessage.replace(/<(.|\n)*?>/g, ''));
}
Di seguito è riportato il codice completo del componente della funzione di contatto.
import Form from './components/Form';
import PlainText from './components/plainText';
import TextField from './components/TextField';
import Button from './components/Button';
import { useState,useEffect } from "react";
import { AdaptiveForm } from "@aemforms/af-react-renderer";
export default function Contact(){
const [selectedForm, setForm] = useState("");
const [thankYouMessage, setThankYouMessage] = useState("");
const [formSubmitted, setFormSubmitted] = useState(false);
const extendMappings = {
'plain-text' : PlainText,
'text-input' : TextField,
'button' : Button,
'form': Form
};
const onSuccess=(action) =>{
let body = action.payload?.body;
debugger;
setFormSubmitted(true);
setThankYouMessage(body.thankYouMessage.replace(/<(.|\n)*?>/g, ''));
// Remove any html tags in the thank you message
console.log("Thank you message "+body.thankYouMessage.replace(/<(.|\n)*?>/g, ''));
}
const getForm = async () => {
const resp = await fetch('/adobe/forms/af/L2NvbnRlbnQvZm9ybXMvYWYvY29udGFjdHVz');
// Get the form id manually using the listform api
let formJSON = await resp.json();
setForm(formJSON.afModelDefinition)
}
useEffect( ()=>{
getForm()
},[]);
return(
<div>
{!formSubmitted ?
(
<div>
<h1>Get in touch with us!!!!</h1>
<AdaptiveForm mappings={extendMappings} onSubmitSuccess={onSuccess} formJson={selectedForm}/>
</div>
) :
(
<div>
<div>{thankYouMessage}</div>
</div>
)}
</div>
)
}
Il codice di cui sopra utilizza componenti HTML nativi mappati sui componenti utilizzati nel modulo adattivo. Ad esempio, stiamo mappando il componente del modulo adattivo per l’immissione di testo al componente TextField. I componenti nativi utilizzati nell'articolo possono essere scaricati da qui