jetsloth

<?php
/*
If you use the merge tag {all_fields} this will always display the image
Or if you use individual field merge tags, eg {Options:1} you can display the image by adding a modifier, eg {Options:1:image}
You can also specify the size that the image should display at by adding a pixel size in the following format, eg {Options:1:image_50px}
By default your image will display at its natural size
*/
add_filter( 'gform_merge_tag_filter', 'image_choices_merge_tag_image', 11, 5 );
function image_choices_merge_tag_image( $value, $merge_tag, $modifier, $field, $raw_value ) {
	

jetsloth

<script type="text/javascript">
    jQuery(document).ready(function( $ ){
        $('.gfq-badge').click(function() {
            $('.gfq-panel').toggleClass('panel-active');
        });
    });
</script>

jetsloth

.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

<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

/*/////////////////////////////////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

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
});

jetsloth

<div class="update-preview gfcp_bg">
  <h2>My heaidng inside my banner</h2>
</div>

jetsloth

.image-choices-field {
    max-width: 100%;
    width: 100%;
}
.image-choices-field,
.gform_wrapper .gfield.image-choices-field {
	margin-right: -3%;
}
.image-choices-field .image-choices-choice,
.gform_wrapper .gfield.image-choices-field li.image-choices-choice {

jetsloth

.image-choices-field {
	display: block;
	max-width: 100%;
	width: 100%;
}
.image-choices-field .gfield_label {
	font-size: 2em;
	margin-bottom: 1em;
	display: block;
	text-align: center;

jetsloth

//////////////////////////////////////////////////////////////////
// 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 = '';