Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Force the focus on the name field in a CF7 form
<?php // Ignore this first line when copying to your child theme's functions.php file.
<style>
/** For testing only. Remove for production. */
:focus {
outline: 3px solid hotpink !important;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function ($) {
const popupID = 1749; // Change to your popup ID.
$(document).on('pumAfterOpen', `#pum-${popupID}`, function () {
$('.pum-content.popmake-content input.cf7-name').focus(); // Change .cf7-name to your input field selector.
}); // listener
}); // jQuery
</script>
<?php }
add_action( 'wp_footer', 'force_focus_on_name_field', 500 ); // Load the script in the footer with a "late" priority.
/**
* You can add the PHP code snippet to your child theme's functions.php file
* or with third-party plugins such as My Custom Functions and Code Snippets.
*
* Learn more:
* - https://docs.wppopupmaker.com/article/84-getting-started-with-custom-js
* - https://docs.wppopupmaker.com/article/552-getting-started-with-custom-php
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment