Skip to content

Instantly share code, notes, and snippets.

View jetsloth's full-sized avatar

JetSloth jetsloth

View GitHub Profile
@jetsloth
jetsloth / gform_pre_render_custom_image_choices_options.php
Last active August 1, 2020 21:45
Example of dynamic population for image choices options
<?php
add_filter( 'gform_pre_render', 'custom_image_choices_options' );
add_filter( 'gform_pre_validation', 'custom_image_choices_options' );
add_filter( 'gform_pre_submission_filter', 'custom_image_choices_options' );
add_filter( 'gform_admin_pre_render', 'custom_image_choices_options' );
function custom_image_choices_options( $form ) {
if ( $form['id'] != 9999 ) {// set to the form id you want to run this on
@jetsloth
jetsloth / image-choices-demo-styles-by-class.css
Last active December 27, 2019 02:46
Image Choices Demo Styles via Dedicated CSS Classes
/* POLAROID STYLE */
.image-choices-field.ic-polaroid {
max-width: 100%;
margin-right: -3%;
}
.image-choices-field.ic-polaroid .image-choices-choice,
.gform_wrapper .gfield.image-choices-field.ic-polaroid li.image-choices-choice {
display: inline-block;
position: relative;
@jetsloth
jetsloth / image-choices-cs2-demo-style.css
Created November 26, 2019 06:17
Image Choices style used in the Collapsible Sections - Custom Styles 2 demo
.image-choices-field {
max-width: 100%;
width: 90%;
display: block;
margin: 0 auto;
}
.image-choices-field .gfield_label {
font-size: 1.6em;
margin-bottom: 1.6em;
display: block;
jQuery('body').on('gf-color-picker:picked', function(e, hex, ref){
// do whatever you want here.
// hex will be... hex
// ref will be the formID_fieldID string
});
<div class="update-preview gfcp_bg">
<h2>My heaidng inside my banner</h2>
</div>
//////////////////////////////////////////////////////////////////
// Latest Posts in Gravity Forms email notifications - https://jetsloth.com/labs/how-to-add-post-articles-to-your-gravity-forms-email-notifications/
//////////////////////////////////////////////////////////////////
function custom_email_latest_posts_shortcode( $atts, $content = null ) {
$content = do_shortcode( shortcode_unautop( $content ) );
if ( '</p>' == substr( $content, 0, 4 )
&& '<p>' == substr( $content, strlen( $content ) - 3 ) )
$content = substr( $content, 4, strlen( $content ) - 7 );
$output = '';
/*/////////////////////////////////Slide-out-gravity-forms.css/////////////////////////////////*/
/* Full article here https://jetsloth.com/gravity-forms/create-a-slide-out-gravity-forms-widget/ */
.gfq-oc-wrap {
z-index: 9999999;
position: fixed;
bottom: 0px;
right: 0px;
height: 100%;
}
.gfq-oc-wrap .gfq-badge {
@jetsloth
jetsloth / widget.html
Created February 2, 2019 00:32
Widget Contact Form - HTML
<div class="gfq-wrap">
<div class="gfq-panel">
<!--Change to the form ID of your form below-->
<!--[gravityform id="66" title="false" description="false" ajax="true"]-->
</div>
<div class="gfq-badge">
<img src="https://jetsloth.com/wp-content/uploads/2019/02/mail-1.svg" alt="Icon"/>
</div>
</div>
@jetsloth
jetsloth / widget.css
Created February 2, 2019 00:29
Widget Contact Form - CSS
.gfq-wrap {
z-index: 9999999;
position: fixed;
bottom: 40px;
right: 40px;
}
.gfq-badge {
background: #71C28E; /*Change this colour to change the circle*/
width: 60px;
height: 60px;
@jetsloth
jetsloth / widget.js
Created February 2, 2019 00:23
Widget Contact Form - Javascript
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$('.gfq-badge').click(function() {
$('.gfq-panel').toggleClass('panel-active');
});
});
</script>