Skip to content

Instantly share code, notes, and snippets.

@wpmonks
wpmonks / style-ninja-forms-placeholder.css
Created December 11, 2021 08:05
Style Ninja Forms Placeholder
.nf-field-element input::placeholder,
.nf-field-element input::-webkit-input-placeholder,
.nf-field-element input::-moz-placeholder,
.nf-field-element input:-ms-input-placeholder {
color: red;
font-size: 1.2em;
font-style: italic;
}
@wpmonks
wpmonks / ninjaforms-title.css
Last active December 8, 2021 09:37
Change font color, weight and text alignment of ninja forms title
.nf-form-cont .nf-form-title h3{
color: #ff0000;
font-weight: bold;
text-align: left;
}
@wpmonks
wpmonks / wpforms-numbers-field-range-limit.php
Created December 31, 2019 04:28
Set Limit for Number's field in WPForms with Minimum and Maximum values
/**
* Set minimum and maximum range for number field
* Apply the class "bfwpf-number-range-limit" to the field to enable.
*
* https://wpmonks.com/blog/how-to-min-max-range-for-number-fields-in-wpforms/
*/
function bfwpf_number_field_range_limit() {
?>
<script type="text/javascript">
@wpmonks
wpmonks / wpforms_readonly.php
Created June 7, 2019 11:10
Disable a form field to stop users input data.
/**
* Disable form fields to make read-only
* To apply, add CSS class 'wpmonks-readonly' (no quotes) to field in form builder
*
*/
function wpmonks_disable_field() {
?>
<script type="text/javascript">
jQuery(function($) {
@wpmonks
wpmonks / wpforms_radio.css
Last active May 18, 2019 09:21
WPForms Radio Inputs with CSS
/* For labels */
#wpforms-formID .wpforms-form .wpforms-field.wpforms-field-radio ul li label{
font-size: 18px;
font-weight: 700;
line-height: 1.5;
}
/* For container */
#wpforms-formID .wpforms-form .wpforms-field.wpforms-field-radio ul{
background: #00ff00 !important;
border: 1px solid #bbefbb !important;
@wpmonks
wpmonks / custom-checkbox.css
Last active May 8, 2019 03:14
how to design checkbox in CSS
body #gform_wrapper_FORMID .gfield_checkbox li input[type=checkbox] {
opacity: 0;
position: absolute;
}
body #gform_wrapper_FORMID .gfield_checkbox li input[type=checkbox] + label{
position: relative;
overflow: hidden;
padding-left: 35px;
cursor: pointer;
display: inline-block;
@wpmonks
wpmonks / checkbox-size.css
Created May 3, 2019 10:19
How to Increase Size of Gravity Forms Checkboxes?
body #gform_wrapper_FORMID .gfield_checkbox li input[type=checkbox]{
width: 20px !important;
height: 20px;
}
@wpmonks
wpmonks / Ninja-forms-wrapper.css
Last active May 8, 2019 10:57
Style Form Wrapper of Ninja Forms with Custom CSS
body #nf-form-FORMID-cont.nf-form-cont{
font-family:roboto;
background-color:#d0d0d0;
border:5px solid black;
border-radius:15px;
padding:20px;
margin:10px 20px;
}
@wpmonks
wpmonks / placeholders.css
Last active June 16, 2020 14:18
Style Your Gravity Forms Placeholder
#gform_wrapper_1 .gform_fields .gfield input::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: pink;
}
#gform_wrapper_1 .gform_fields .gfield input::-moz-placeholder {
/* Firefox 19+ */
color: pink;
}
#gform_wrapper_1 .gform_fields .gfield input:-ms-input-placeholder {
/* IE 10+ */
@wpmonks
wpmonks / review-page-for-one-form.php
Last active January 31, 2019 10:08
Gravity forms before submission review page for particular form
add_filter( 'gform_review_page_FORMID', 'wpmonks_add_review_page', 10, 3 );
function wpmonks_add_review_page( $review_page, $form, $entry ) {
// Enable the review page
$review_page['is_enabled'] = true;
if ( $entry ) {
// Populate the review page
$review_page['content'] = GFCommon::replace_variables( '{all_fields}', $form, $entry );
}