Start a new topic

How to enable acknowledgement popup on successful form submission

You can enable it by using custom success handlers.




Here is quick code snippet which can help you understand the same,


<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
</head>

<body>
    <h2>This shows how you can display a modal after submission</h2>
    <form id="form">
        <input type="text" placeholder="message" name="message"><input id="fx_trj_horse" name="fx_trj_horse" style="display: none;"><br><br>
        <input type="submit" value="Show me some modal">
    </form>

<script src="https://static.formx.stream/tracker/v1/bundle.js"></script>
<script>
    var formx = FormX.set()
    formx.trackProject('Testing_2ae6d1fb-098b-4c82-bcc4-86c1e231c8d7')

    formx.trackForm('PopUp_0790d2a0-a97b-40c6-a1f9-a9788741c71e', 'form', function () {
        var TIMEOUT = 3000; // 3s
        var MAIN_MESSAGE = "Thanks for your submission!"
        var SUB_MESSAGE = "We will get back to you soon."

        var popup = document.createElement('div');
        popup.style = "display:none;justify-content:center;align-items:center;position:fixed;z-index:1;top:0;left:0;right:0;width:100%;height:100%;background-color:rgba(0,0,0,0.4)";
        popup.style.display = "flex";
        popup.innerHTML =
            "<div style='display:flex;flex-direction:column;justify-content:center;padding:30px;align-items:center;min-width:250px;max-width:500px;min-height:70px;max-height:150px;background-color:white;border-radius:10px;overflow-x:auto;'>" +
            "<b style='margin-bottom:20px;'>" + MAIN_MESSAGE +"</b>" +
            "<span>" + SUB_MESSAGE + "</span>" +
            "</div>"
        window.document.body.appendChild(popup)
        setTimeout(function () {
            document.body.removeChild(popup)
        }, TIMEOUT);
    })

    formx.start()
</script>

</body></html>



Note : Do remember to take this as an example, and to replace the appropriate parameter values like form ID etc. where neccessary.

Login or Signup to post a comment