Workflow Trigger Code 202211
DEMO
Workflow App example
Trigger Code
<form id="recaptcha_token_trigger" style="background:#f4f5f7;border-radius:10px;padding:10px 40px;margin:0px 10px 20px;">
<label for="qEmail"><strong>Email Address / メールアドレス</strong>:</label><br>
<input id="qEmail" type="email" name="q_Email"
placeholder="you@example.com" required size="32" maxlength="64"><br>
<br>
<label for="qInquiryText"><strong>Inquiry / 問合</strong>:</label><br>
<textarea id="qInquiryText" name="q_InquiryText" rows="5" cols="33"></textarea><br>
<br>
<input type="checkbox" class="qPolicyCheck">
I Agree to <a href="https://questetra.com/privacy/" target="_blank">Privacy Policy</a> /
<a href="https://questetra.com/ja/privacy/" target="_blank">プライバシーポリシー</a>に同意<br><!-- ★★ -->
<button type="button" id="qSubmit" class="qCorsSubmit">Submit / 送信</button><br>
<span id="recaptcha_token_log"></span><br>
<span style="color:#8899cc;margin:10px;font-size:80%;">This site is protected by <strong>reCAPTCHA</strong>
and the Google <a href="https://policies.google.com/privacy" target="_blank">Privacy Policy</a>
and <a href="https://policies.google.com/terms" target="_blank">Terms of Service</a> apply.</span><br>
</form>
<script src="https://www.google.com/recaptcha/api.js?render=6LfUw-oiAAAAAKCeFNc4OeABMQnOY_6N1mTf0ot5"></script>
<style>
.grecaptcha-badge { visibility: hidden; }
.qCorsSubmit { pointer-events:none; background:#888888;} /* imperfect control */
.qPolicyCheck:checked ~ .qCorsSubmit { pointer-events:auto; background:#1565c0;}
</style>
<script>
const strRecSitekey = "6LfUw-oiAAAAAKCeFNc4OeABMQnOY_6N1mTf0ot5"; // ★★★ See recaptcha/admin ★★★
// https://www.google.com/recaptcha/admin/
const strStartUrl = "https://example.questetra.net/System/Event/MessageStart/99/0/start"; // ★★
const strKey = "vJbtcnFVF5TY72WIHOMddZLcIUkuFxEj"; // ★★ See your workflow app ★★
const strIdLog = "#recaptcha_token_log"; // ★must be same as Log dom id★
const strIdTrigForm = "#recaptcha_token_trigger"; // ★
const strIdEmail = "#qEmail"; // ★
const strIdInquiry = "#qInquiryText"; // ★
const strIdSubmit = "#qSubmit"; // ★
const elTriggerForm = document.querySelector ( strIdTrigForm );
const elOutput = document.querySelector ( strIdLog );
const elEmail = document.querySelector ( strIdEmail );
const elInquiry = document.querySelector ( strIdInquiry );
document.querySelector ( strIdSubmit ).addEventListener( 'click', ()=>{
grecaptcha.ready( ()=>{ // https://developers.google.com/recaptcha/docs/v3
grecaptcha.execute( strRecSitekey, { action: 'DemoInquiry' } ).then( async ( strToken )=>{
// For your top ten actions in the admin console ,..
// https://developers.google.com/recaptcha/docs/v3#actions
let objFormData = new FormData();
objFormData.append ( 'key', strKey );
objFormData.append ( 'q_RecToken', strToken );
objFormData.append ( 'q_Email' , elEmail.value ); // ★
objFormData.append ( 'q_Inquiry' , elInquiry.value ); // ★
elOutput.innerHTML = "Uploading ...";
fetch( strStartUrl, { method: 'POST', mode: 'cors', body: objFormData } ).then( response => {
console.log( 'response: ' + response.ok + " " + response.status + " " + response.statusText );
// https://developer.mozilla.org/docs/Web/API/Response
if ( !response.ok ) { throw new Error( "response was not ok" ); } // goto "catch"
return response.text(); // QBPMS responces the string PID.
})
.then( (text) => {
elOutput.innerHTML = "Accepted (ID: " + text + ").";
elTriggerForm.reset();
// https://developer.mozilla.org/docs/Web/API/HTMLFormElement/reset
})
.catch( (error) => {
elOutput.innerHTML = error;
});
});
});
});
//// The gReCaptcha badge is hidden.
//// 右下表示される reCAPTCHA v3 のバッジは非表示に。
// https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed
// CAPTCHA: "Completely Automated Public Turing test to tell Computers and Humans Apart"
</script>
Like this:
Like Loading...