Skip to content

Instantly share code, notes, and snippets.

@Qubadi
Qubadi / gist:472f3bc974c82b9d5c3879a4c7b8439b
Created May 7, 2024 07:59
JetFormBuilder choose files: Dynamic plus icon & total file tracking
1. New custom code for JetFormBuilder improves how files are uploaded and displayed.
The feature shows a set number of uploaded files directly (four on desktops, fewer on smaller devices),
with additional files represented by a dynamic plus icon that indicates the count of remaining uploads.
This enhancement ensures users can easily track and manage their uploads across different devices.
2. Copy this code, create a new HTML snippet, and paste it into your snippet plugin. Save it as a header or footer.
________________________________________________________
<style>
@Qubadi
Qubadi / gist:799bc3964e98025ffeb26e123be4ff12
Last active December 30, 2024 11:41
Jetformbuilder and Jetengine form: Dynamic Word Limit Control for TinyMCE Editors ( Wysiwyg Field )
Enhance Jetformbuilder and Jetengine form ' TinyMCE editors (WYSIWYG Field) with a dynamic word limit control feature.
This script adds an interactive word count display that not only tracks the number of words typed but also dynamically
adjusts the text content to adhere to a predefined limit. The functionality is designed to provide visual feedback and
prevent over-typing by automatically trimming text to the set limit.
1. Firstly, copy the custom PHP code and paste it into your snippet plugins. Create a new PHP snippet and save it as "Everywhere".
2. In Jetengine form, add a WYSIWYG Field, and the form field name is: text_count_limit_jetengine, and for Jetformbuilder
WYSIWYG Field and the form field name is: text_count_limit_jetformbuilder
3. You can adjust the variable 'limit' to control the word limit for this specific editor. Currently, it's set to 100,
but you can change it to suit your needs. Find this line and change it: var limit = 100; // Word limit for this specific editor.
@Qubadi
Qubadi / gist:aedf82f9cb08070612f7e4d88ac0d70a
Created May 4, 2024 23:26
Jetformbuilder: Auto-fill and format date inputs from MM/DD/YYYY to DD/MM/YYYY
This jQuery script automatically populates the JetFormBuilder form date inputs with today's date in MM/DD/YYYY format and
updates corresponding hidden fields to the DD/MM/YYYY format upon form submission. The script ensures that the dates are
visible and considered 'selected' by the user, improving data accuracy and user experience without manual entry. It supports
multiple date fields and can easily be configured to handle various date and hidden field IDs, making it ideal for ensuring
consistent date formatting and handling across front-end displays and back-end processing.
1. Firstly, copy the custom HTML code and paste it into your snippet plugins. Create a new HTML snippet and save it as "footer".
2. Create a date field and a hidden field. Name both fields and change the IDs to your preferred IDs:
{ visible: 'YOUR DATE FIELD NAME/ID', hidden: 'YOUR HIDDEN FIELD NAME/ID' },
3. Add the hidden field name to Jetformbuilder's post-submit action (content) to display the date format as DD/MM/YY.
@Qubadi
Qubadi / gist:1889fbc3dc6961632974683a0ef5d8ef
Created May 4, 2024 20:13
JetFormBuilder: Enhanced floating placeholders and conversion of placeholder text to label text
This code snippet enhances traditional form input fields with a dynamic floating placeholder effect.
When a user focuses on an input field or begins to type, the placeholder text transitions upwards,
mimicking a label. This transition provides a clear indication that the field is active and maintains
the label-like placeholder visible above the input, even after the user starts typing. The effect reverts
only when the input is cleared and loses focus, ensuring a clean and user-friendly interface that enhances
the usability and aesthetic of web forms.
1. First of all, copy the HTML snippet code and create a new snippet ( HTML ).
2. Add your form field names, and do not type in any label name, and instead add placeholder name.
3. The placeholder text become automatic to label text.
@Qubadi
Qubadi / gist:ac7a99a26331afc8b38c69a9ea3c570d
Created May 2, 2024 10:11
Jetformbuilder form, A custom code for auto detect country and land code phone ( New style and new version ).
1. Start by creating a new PHP snippet. Paste your custom code into it and set it to run "everywhere".
2. Create a text field, set the type to "tel", and name the form field "phone".
3. Create a select field, set it to "manual input" (do not add any options), and name the form field "country".
4. Create a hidden field named "full_phone_number" for storing the full phone number.
5. Create another hidden field named "full_country_name" for storing the full country name.
6. Add both hidden fields to the "Post Submit Action" section under "Content".
7. Update the page slug name to the specific page where you have added the form. For instance, if
the current page slug name is "contact", change it to match the URL of the page where the form is placed.
8. Finally, register for an account at https://ipinfo.io/signup ,to obtain a token key. Then,
integrate the token into your fetch request as follows: fetch('https://ipinfo.io?token=YOUR_TOKEN_KEY_HERE').
@Qubadi
Qubadi / gist:cf142de56e4a46ce640367d3ff710637
Created March 3, 2024 16:25
Implementing dynamic message relocation for JetEngine forms: A guide to enhancing user feedback display
Introducing Enhanced Message Display for JetEngine Forms: Our new code dynamically relocates success and error messages
to the top area, providing clearer feedback for users. You can easily style the message container using the
provided class name, 'display-message', or customize it to suit your design preferences.
Simply integrate the code into your Elementor form, add a headline or container with the same class name,
and adjust the styling directly within the code. Success messages are displayed in green, while errors appear in red,
ensuring clear visibility and easy customization.
Add this code to your site by creating a new HTML snippet in your snippet plugin.
Simply paste the code there and save it.
________________________________________________________
@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 {
@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: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: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