Below, you’ll find a detailed guide on how to add the Simple Cloudflare Turnstile Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Simple Cloudflare Turnstile Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Simple Cloudflare Turnstile Plugin and the shortcodes it provides:
"Simple Cloudflare Turnstile is a CAPTCHA alternative for WordPress sites. This plugin provides seamless user verification through Cloudflare, ensuring your site's security and integrity."
- [cf7-simple-turnstile]
- [gravity-simple-turnstile]
- [mc4wp-simple-turnstile]
- [simple-turnstile]
Simple Cloudflare Turnstile [cf7-simple-turnstile] Shortcode
The Simple-Cloudflare-Turnstile shortcode is a powerful tool for form submission handling. It generates a unique ID for each form submission, and triggers a callback function upon submission. This shortcode creates a div container with specific margins. Inside this container, it calls the cfturnstile_field_show function which is responsible for rendering the turnstile. Upon form submission, it checks if the turnstile is present. If it is, it triggers the turnstile render function after a delay of 4 seconds. This ensures smooth operation and user experience.
Shortcode: [cf7-simple-turnstile]
Examples and Usage
Basic example – Embeds a simple turnstile contact form on your page using the ‘cf7-simple-turnstile’ shortcode. The form will be displayed with a unique ID generated by wp_rand() function.
[cf7-simple-turnstile /]PHP Function Code
In case you have difficulties debugging what causing issues with [cf7-simple-turnstile] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('cf7-simple-turnstile', 'cfturnstile_cf7_shortcode');Shortcode PHP function:
function cfturnstile_cf7_shortcode() {
ob_start();
$id = wp_rand();
echo '<div class="cf7-cf-turnstile" style="margin-top: -10px; margin-bottom: -15px;">';
echo cfturnstile_field_show('.wpcf7-submit', 'turnstileCF7Callback', 'contact-form-7', '-cf7-' . $id);
?>
<script>document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll('.wpcf7-form').forEach(function(e){e.addEventListener('submit',function(){if(document.getElementById('cf-turnstile-cf7-<?php echo $id; ?>')){setTimeout(function(){turnstile.render('#cf-turnstile-cf7-<?php echo $id; ?>');},4000)}})})});</script>
<?php
echo '</div>';
$thecontent = ob_get_contents();
ob_end_clean();
wp_reset_postdata();
$thecontent = trim(preg_replace('/\s+/', ' ', $thecontent));
return $thecontent;
}
Code file location:
simple-cloudflare-turnstile/simple-cloudflare-turnstile/inc/integrations/forms/contact-form-7.phpSimple Cloudflare Turnstile [gravity-simple-turnstile] Shortcode
The ‘gravity-simple-turnstile’ shortcode from the Simple Cloudflare Turnstile plugin creates a unique Gravity Form container. It sanitizes the form ID, displays the form, and triggers a turnstile render upon form submission.
Shortcode: [gravity-simple-turnstile]
Parameters
Here is a list of all possible gravity-simple-turnstile shortcode parameters and attributes:
id– Unique identifier for the specific Gravity Form.
Examples and Usage
Basic example – This shortcode displays a gravity form with a unique ID that is protected by a turnstile. The ID of the form is passed in as a parameter.
[gravity-simple-turnstile id=1 /]Advanced examples
Displaying the gravity form with a unique ID and a custom CSS class. This allows for greater flexibility in styling the form and its turnstile.
[gravity-simple-turnstile id=1 class="my-custom-class" /]Rendering the gravity form with a unique ID and a delay in the rendering of the turnstile. The delay is set in milliseconds, so a value of 10000 would delay the rendering of the turnstile by 10 seconds.
[gravity-simple-turnstile id=1 delay=10000 /]Presenting the gravity form with a unique ID and an alternate callback function. This allows for custom functionality to be executed when the turnstile is displayed.
[gravity-simple-turnstile id=1 callback="myCustomCallback" /]PHP Function Code
In case you have difficulties debugging what causing issues with [gravity-simple-turnstile] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('gravity-simple-turnstile', 'cfturnstile_gravity_shortcode');Shortcode PHP function:
function cfturnstile_gravity_shortcode($atts) {
ob_start();
$unique_id = wp_rand();
$form_id = sanitize_text_field(esc_html($atts['id']));
echo '<div class="gf-turnstile-container">';
echo cfturnstile_field_show('.gform_button', 'turnstileGravityCallback', 'gravity-form-' . esc_html($form_id), '-gf-' . esc_html($form_id));
echo "</div>";
?>
<style>
.gf-turnstile-container { width: 100%; }
.gform_footer.top_label { display: flex; flex-wrap: wrap; }
</style>
<script>document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll('#gform_<?php echo esc_html($form_id); ?>').forEach(function(e){e.addEventListener('submit',function(){if(document.getElementById('cf-turnstile-gf-<?php echo esc_html($form_id); ?>')){setTimeout(function(){turnstile.render('#cf-turnstile-gf-<?php echo esc_html($form_id); ?>');},10000)}})})});</script>
<?php
$thecontent = ob_get_contents();
ob_end_clean();
wp_reset_postdata();
$thecontent = trim(preg_replace('/\s+/', ' ', $thecontent));
return $thecontent;
}
Code file location:
simple-cloudflare-turnstile/simple-cloudflare-turnstile/inc/integrations/forms/gravity-forms.phpSimple Cloudflare Turnstile [mc4wp-simple-turnstile] Shortcode
The ‘mc4wp-simple-turnstile’ shortcode is used to integrate a turnstile form within the MailChimp for WordPress plugin. It renders a submit button on the form. The PHP function ‘cfturnstile_mc4wp_shortcode’ captures the output, trims any extra spaces, and returns the content. This ensures a clean and efficient rendering of the form on the front-end.
Shortcode: [mc4wp-simple-turnstile]
Examples and Usage
Basic example – The following code illustrates the simplest way to use the ‘mc4wp-simple-turnstile’ shortcode. This will display the default turnstile field for the MailChimp for WordPress form.
[mc4wp-simple-turnstile]PHP Function Code
In case you have difficulties debugging what causing issues with [mc4wp-simple-turnstile] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('mc4wp-simple-turnstile', 'cfturnstile_mc4wp_shortcode');Shortcode PHP function:
function cfturnstile_mc4wp_shortcode() {
ob_start();
echo cfturnstile_field_show('.mc4wp-form-fields input[type=submit]', 'turnstileMC4WPCallback', 'mc4wp', '-mc4wp');
$thecontent = ob_get_contents();
ob_end_clean();
wp_reset_postdata();
$thecontent = trim(preg_replace('/\s+/', ' ', $thecontent));
return $thecontent;
}
Code file location:
simple-cloudflare-turnstile/simple-cloudflare-turnstile/inc/integrations/newsletters/mc4wp.phpSimple Cloudflare Turnstile [simple-turnstile] Shortcode
The Simple-Cloudflare-Turnstile shortcode is a powerful tool that displays a specific field. It starts by buffering the output, then calls the cfturnstile_field_show function. The output is then stored in a variable and the buffer is cleared. The post data is reset and any extra white space in the content is removed before it’s returned.
Shortcode: [simple-turnstile]
Examples and Usage
Basic example – Show a simple turnstile using the shortcode without any parameters.
[simple-turnstile /]PHP Function Code
In case you have difficulties debugging what causing issues with [simple-turnstile] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('simple-turnstile', 'cfturnstile_shortcode');Shortcode PHP function:
function cfturnstile_shortcode() {
ob_start();
echo cfturnstile_field_show('', '');
$thecontent = ob_get_contents();
ob_end_clean();
wp_reset_postdata();
$thecontent = trim(preg_replace('/\s+/', ' ', $thecontent));
return $thecontent;
}
Code file location:
simple-cloudflare-turnstile/simple-cloudflare-turnstile/simple-cloudflare-turnstile.phpConclusion
Now that you’ve learned how to embed the Simple Cloudflare Turnstile Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply