This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const textarea = document.getElementById('TextArea_ID'); // Replace the id | |
textarea.addEventListener('input', function() { | |
const minTextLength = 10; // Set Minimum required text length | |
if (textarea.value.length < minTextLength) { | |
textarea.setCustomValidity('Please enter at least ' + minTextLength + ' characters.'); | |
} else { | |
textarea.setCustomValidity(''); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* To target individual forms replace .fluentform .frm-fluent-form with form.fluent_form_# */ | |
/* label style */ | |
.fluentform .frm-fluent-form .ff-el-input--label { | |
font-size: 1rem; | |
color: var(--contrast); | |
font-weight: 700; | |
} | |
/* field style */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var passField = $form.find('input[data-name=password]'); | |
passField.wrap("<div class='ff_input-group'></div>"); | |
passField.after('<div class="ff_input-group-append"><span class="ff_input-group-text"><i style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password"> </i></span></div>'); | |
$form.find(".toggle-password").click(function() { | |
$(this).toggleClass("dashicons-visibility dashicons-hidden"); | |
if (passField.attr("type") == "password") { | |
passField.attr("type", "text"); | |
} else { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Age calculator | |
// 1. First take a Date picker & a text input field | |
// 2. In the text input element add the class 'age' | |
// 3. Add a custom class 'date' in the date picker ,then add the following js in your fluent form custom js | |
jQuery( ".date" ).change(function() { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/* | |
* Code snippet to make login form with Fluent Forms WordPress Plugins | |
* Steps: | |
* 1. make a form with email and password (Make sure the name attribute is 'email' and 'password' for corresponding field) | |
* 2. Paste the shorcode in a page | |
* 3. Change the form id in the bellow code (23) with your created fluentform's form id and paste in your theme's functions.php file | |
* 4. That's it | |
* |