Skip to content

Instantly share code, notes, and snippets.

View jetsloth's full-sized avatar

JetSloth jetsloth

5 followers · 0 following
View GitHub Profile
@jetsloth
jetsloth / gf-custom-form-design-demo4.css
Created August 29, 2022 02:02
/*Variables - Change Colors here*/
:root {
--aqua-color: #9fe0dc;
--dark-aqua-color: #83c4c0;
--yellow-color: #f6c834;
}
/* Basic input styles */
.gform_wrapper.gravity-theme .demo4-box-layout input[type="text"],
.gform_wrapper.gravity-theme .demo4-box-layout input[type="email"],
.gform_wrapper.gravity-theme .demo4-box-layout input[type="tel"],
@jetsloth
jetsloth / gf-custom-form-design-demo3.css
Created August 29, 2022 02:01
/*Variables - Change Colors here*/
:root {
--red-color: #d12d5d;
--dark-blue-color: #0c1c34;
--blue-color: #1451c7;
}
/*Hide legand*/
.gform_required_legend {
display:none;
}
@jetsloth
jetsloth / gf-custom-form-design-demo2.css
Created August 29, 2022 02:00
/*Variables - Change Colors here*/
:root {
--red-color: #d12d5d;
--dark-blue-color: #0c1c34;
--blue-color: #1451c7;
}
/*Hide legand*/
.gform_required_legend {
display:none;
}
@jetsloth
jetsloth / gf-custom-form-design-demo1.css
Created August 29, 2022 01:56
/*Variables - Change Colors here*/
:root {
--aqua-color: #9fe0dc;
--dark-aqua-color: #83c4c0;
--orange-color: #f68b2e;
}
/* Basic input styles */
.gform_wrapper.gravity-theme .demo1-box-layout input[type="text"],
.gform_wrapper.gravity-theme .demo1-box-layout input[type="email"],
.gform_wrapper.gravity-theme .demo1-box-layout input[type="tel"],
@jetsloth
jetsloth / gf-radio-checkbox-buttons.css
Created July 26, 2022 01:14
CSS Styled Radio & Checkbox Buttons - Gravity Forms 2.5+
/*Gravity Forms 2.5+ CSS Styled Radio & Checkbox fields*/
.gchoice {
z-index:1;
position:relative;
margin:0 0 10px 0;
padding:0;
height:70px;
}
input.gfield-choice-input {
z-index:2;
@jetsloth
jetsloth / gf-legacy-radio-checkbox-buttons.css
Created July 26, 2022 01:13
CSS Styled Radio & Checkbox Buttons - Legacy Gravity Forms
/* //////////// Legacy CSS version //////////// */
.gform_legacy_markup_wrapper.gform_wrapper li.gfield ul li.gchoice {
z-index:1;
position:relative;
margin:0 0 10px 0;
padding:0;
height:70px;
}
.gform_legacy_markup_wrapper.gform_wrapper li.gfield ul li.gchoice input {
z-index:2;
@jetsloth
jetsloth / image-choices-page-transitions.css
Created July 25, 2022 03:52
Image Choices + Page Transitions CSS
/* Style form wrapper max width 900px */
.gppt-has-page-transitions_wrapper {
background: #FFFFFF;
border: 1px solid #EBEBEB;
box-shadow: 2px 3px 4px 0 rgba(33,39,47,0.05);
border-radius: 8px;
max-width:900px;
min-height: 560px;
margin:0 auto;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
@jetsloth
jetsloth / wc-toggle-gfpa-collapsible.html
Created July 29, 2021 09:38
Toggle the WooCommerce elements (subtotal, total, quantity and add to cart) based on whether the last Collapsible Section is open or not. For use with WooCommerce Gravity Forms Product Addons and Collapsible Sections. The code below can be added to a HTML field in your form.
<script type="text/javascript">
(function($){
function toggleAddToCart( $form, show ) {
if ( typeof $form === 'undefined' || !$form.length ) {
return;
}
if ( show !== true ) {
show = false;
@jetsloth
jetsloth / image_choices_basic_product_configurator.html
Last active January 23, 2023 06:31
See https://jetsloth.com/gravity-forms/how-to-build-a-product-configurator-with-gravity-forms-and-image-choices/
<script type="text/javascript">
(function($){
$(document).bind('gform_post_render', function(e, formId, currentFormPage) {
var formSelector = '#gform_' + formId;
var $form = $(formSelector);
if ( $form.data('configurator-init') !== true ) {
// Add the preview layers
$(formSelector + ' .gform_body .gfield.image-choices-field.config-layer').each(function(i, el){
@jetsloth
jetsloth / image_choices_horizontal_scroll.html
Last active May 28, 2022 00:39
Create a horizontal scrolling container (with a scrolling bar) to display all image choices on a single line. You can add a HTML field to your form and put this script as its content
<script type="text/javascript">
(function($){
function scrollableImageChoices( formId ) {
var $fields = ( typeof formId !== 'undefined') ? $('#gform_' + formId + ' .image-choices-field') : $('form[id^="gform_"] .image-choices-field');
if (!$fields.length) {
return;
}
$fields.each(function(){
var $field = $(this);