jetsloth

<li id="field_x" class="gfield gsection collapsible-sections-field collapsible-sections-description-inside">
	<h2 class="gsection_title">Section Title</h2>
</li>
<div class="collapsible-sections-collapsible-body" id="collapsible-section_x">
	<div class="gsection_description">Section Description</div>
	<li id="field_x" class="gfield">
		<label class="gfield_label" for="input_x">Field Label</label>
		<div class="ginput_container">
			<input name="input_x" id="input_x" type="text" value="" class="medium">
		</div>

jetsloth

.image-choices-field.gf_list_1col,
.image-choices-field.gf_list_2col, 
.image-choices-field.gf_list_3col, 
.image-choices-field.gf_list_4col, 
.image-choices-field.gf_list_5col,
.gform_wrapper .gfield.image-choices-field.gf_list_2col,
.gform_wrapper .gfield.image-choices-field.gf_list_3col,
.gform_wrapper .gfield.image-choices-field.gf_list_4col,
.gform_wrapper .gfield.image-choices-field.gf_list_5col {
	margin-right: -2% !important;

jetsloth

.gform_wrapper .gfield.image-choices-field .image-choices-choice,
.image-choices-field .image-choices-choice {
	padding: 5% 15px 6%!important;
    border-radius: 9px;
    box-shadow: inset 4px 4px 10px transparent, 4px 4px 10px transparent;
    border: 3px solid rgba(0, 0, 0, 0);
    width: 30%;
    margin-left: 1% !important;
    margin-right: 1% !important;
    background-color: transparent;

jetsloth

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

jetsloth

/* Global for both forms on page */
ul.gfield_radio li:not(:last-child), ul.gfield_checkbox li:not(:last-child),
.image-choices-field .image-choices-choice,
.image-choices-field .image-choices-choice .image-choices-choice-selected {
    margin-right:0px!important;
    border:none!important;
}
.gfield:not(:last-child) {
    margin-bottom:0px!important;
}

jetsloth

<script type="text/javascript">
jQuery(document).bind('gform_post_render', function(e, formId, currentFormPage) {

	var $form = jQuery('#gform_' + formId);

	if ($form.data('configurator-init') === true) {
		return;
	}

	$form.on('click', '.config-layer.image-choices-field .ginput_container_radio input', function (e) {

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>