Skip to content

Instantly share code, notes, and snippets.

@Qubadi
Qubadi / gist:97c7a94f98bb80a8e86fce2f1c7146e5
Last active June 22, 2024 21:09
JetFormBuilder Handling File Size Exceedance with Popup Notifications
Tutorials here: https://www.youtube.com/watch?v=qljahZMZcj4
_______________________________________________________
<style>
/* Modal Background */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
@Qubadi
Qubadi / gist:539d5682527ca4c13efd85e9ca670b7f
Last active September 5, 2024 12:06
JetFormBuilder change display message to Popup
UPDATED: 22.08.2024
Copy the following HTML code and create a HTML snippet using your snippet plugins.
Paste the code into the plugin and save it.
Update the targetPages array by replacing 'contact' and 'contact-2' with your desired page slugs. The array supports multiple pages, so you can easily add or remove slugs as needed.
_________________________________________
<style>
/* Overlay Styling */
@Qubadi
Qubadi / gist:140f3ff38e2836e473cb8dffc4e7d0b4
Last active February 19, 2024 15:21
JetSmartFilters' Date Range picker for touch devices by preventing the virtual keyboard from displaying on mobile and tablet screens
Paste this code to your snippet plugins. Create a new snippet and select js, javascript, and paste in this code and save it.
This script optimizes JetSmartFilters' Date Range picker for touch devices by preventing the virtual keyboard from displaying
on mobile and tablet screens. It sets Date Range fields to readonly, allowing users to select dates through the touch-friendly
picker without keyboard interference. Ideal for enhancing user experience in JetSmartFilters implementations,
it ensures smooth and focused date selection on touch-enabled devices.
________________________________________________________________
@Qubadi
Qubadi / gist:3e11f72f65a6507e4d89dfd15f2b1873
Created February 16, 2024 16:42
JetFormBuilder submission feedback auto-scroll
Add the code to your snippet plugins, create a new js, javascript snippet, paste the code there and save it.
This script significantly improves the interaction with JetFormBuilder forms by automatically scrolling the
browser window to show success or error messages following a form submission. It is compatible with both AJAX and
traditional page reload submission methods. Regardless of the submission type, the script ensures the feedback
messages are immediately brought into view, smoothly guiding users to see their form submission outcome.
________________________________________________________________________________________
jQuery(document).ready(function($) {
function scrollToMessage() {
@Qubadi
Qubadi / gist:8c22d1696218cf1bb212c3bd260e4c5f
Last active January 20, 2025 16:07
Jetsmartfilters radio input to switcher button
Add this snippet code to your snippet plugins. Create a HTML snippet, and paste in the code and save it.
Elevate your JetSmartFilters experience by converting traditional radio filters into modern,
intuitive switcher buttons. This comprehensive guide walks you through the process of integrating sleek toggle switches,
significantly improving the user interface and interaction on your WordPress site. Discover practical CSS and JavaScript
techniques to transform your filters, making your website not only more aesthetically pleasing but also enhancing usability.
Ideal for web developers and WordPress enthusiasts looking to modernize their site's filtering system with a stylish,
user-friendly approach.
__________________________________________________________________________________
@Qubadi
Qubadi / gist:873411c75802df8e20716ce00f6f540b
Created February 16, 2024 21:16
Jetsmartfilters checkboxes list to switcher button
Add this snippet code to your snippet plugins. Create a HTML snippet, and paste in the code and save it.
Elevate your JetSmartFilters experience by converting traditional checkboxes list filters into modern,
intuitive switcher buttons. This comprehensive guide walks you through the process of integrating sleek toggle switches,
significantly improving the user interface and interaction on your WordPress site. Discover practical CSS and JavaScript
techniques to transform your filters, making your website not only more aesthetically pleasing but also enhancing usability.
Ideal for web developers and WordPress enthusiasts looking to modernize their site's filtering system with a stylish,
user-friendly approach.
__________________________________________________________________________________
@Qubadi
Qubadi / gist:2ee9ac0403ba601f698c5a31132237bc
Last active January 21, 2025 10:25
Jetformbuilder number field custom responsive quantity control with plus and minus buttons
Add this code to your snippet plugin, and create a new HTML snippet, and paste the code there and save it.
Note: Before implementing the code, verify that the form field name in your Jetformbuilder form is my_number. Should your form field bear a different name, you'll need to replace number throughout the code with the correct name. Alternatively, setting your form's number field name to my_number simplifies the process, removing the need for any code adjustments. Once the code is ready, copy it to your snippet plugin, create a new HTML snippet, and paste the code therein. Ensure to set this snippet to load in the footer through your snippet plugin settings. Additionally, this code references the form field name my_number in the CSS. If you alter the form field name, remember to update the CSS selectors accordingly to maintain consistency and functionality.
Jetformbuilder Number Field Custom Responsive Quantity Control offers a sleek, modern solution for Jetformbuilder forms,
featuring custom plus and mi
@Qubadi
Qubadi / gist:ad72332ceb1fde9f33cca648bc91c516
Last active September 5, 2024 12:05
Jetengine listing grid change 'Not Found' notification to popup alert
Add this code to your snippet plugins, and create a HTML snippet and paste the code there, dont forget to set it to Footer.
Watch the tutorial here: https://www.youtube.com/watch?v=0kopy4pBMEY
_______________________________________________________-
<style>
#customOverlay {
position: fixed;
top: 100%; /* Initially set the top to 100% */
left: 0;
@Qubadi
Qubadi / gist:6c818559ff71351ef23908b7d446a7d4
Last active September 12, 2024 09:54
Enhancing Checkbox Field Dropdown Select with JetFormBuilder
See tutorial here: https://www.youtube.com/watch?v=TJ-2EN4tws8
_______________________________________________________________
<style>
.container {
position: relative;
max-width: 320px;
width: 100%;
margin: 80px auto 30px;
@Qubadi
Qubadi / gist:85b94323019daad4ed53d755f21bc323
Last active March 2, 2024 12:40
Seamlessly managing cart visibility in JetBlocks ( Woo Shopping Cart Widget ): hiding zero counts
Add this code to your site by creating a new PHP snippet in your snippet plugin.
Simply paste the code there and save it
____________________________________________________________________
function custom_cart_visibility_script() {
?>
<style>
/* Initially hide the cart count to prevent it from showing 0 before JS checks */
.jet-blocks-cart__count {