jetsloth

<?php
add_filter( 'gform_pre_render', 'populate_enhanced_choices_from_posts' );
add_filter( 'gform_pre_validation', 'populate_enhanced_choices_from_posts' );
add_filter( 'gform_pre_submission_filter', 'populate_enhanced_choices_from_posts' );
add_filter( 'gform_admin_pre_render', 'populate_enhanced_choices_from_posts' );

function populate_enhanced_choices_from_posts( $form ) {

	// update form and field ID to suit
	$FORM_ID  = 1;

jetsloth

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

<?php

add_filter( 'gform_pre_render', 'populate_gf_color_choices' );
add_filter( 'gform_pre_validation', 'populate_gf_color_choices' );
add_filter( 'gform_pre_submission_filter', 'populate_gf_color_choices' );
add_filter( 'gform_admin_pre_render', 'populate_gf_color_choices' );

function populate_gf_color_choices( $form ) {

	if ( $form['id'] != 9999 ) {// set to the form id you want to run this on

jetsloth

.image-choices-field {
    max-width: 100%;
    margin-right: -3%;
}
.image-choices-field .image-choices-choice,
.gform_wrapper .gfield.image-choices-field li.image-choices-choice {
    	display: inline-block;
	position: relative;
	padding: 13px !important;
	overflow: visible;

jetsloth

<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

<?php
add_filter( 'gform_pre_render', 'custom_image_choices_size' );
add_filter( 'gform_pre_validation', 'custom_image_choices_size' );
add_filter( 'gform_pre_submission_filter', 'custom_image_choices_size' );
add_filter( 'gform_admin_pre_render', 'custom_image_choices_size' );

function custom_image_choices_size( $form ) {

	foreach ( $form["fields"] as &$field ) {
		if ( property_exists($field, "imageChoices_enableImages") && !empty($field->imageChoices_enableImages) ) {

jetsloth

/*Import font*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap');
.newsletter-signup_wrapper {
    border: 1px solid #ebebe5;
    border-radius: 20px;
    background-color: #fafbf8;
    background:url('https://images.unsplash.com/photo-1509624776920-0fac24a9dfda?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2369&q=80');
    padding: 80px;
    background-size:cover;
}

jetsloth

/*////////////////////////// Color Variables //////////////////////////*/
:root {
    /*Purple*/
    --theme1: #7245F1;
    --theme1-light: #F0ECFD;
    /*Orange*/
    --theme2: #FFA630;
    --theme2-light: #FFF7EC;
    /*Blue*/
    --theme3: #0076FF;

jetsloth

/*Below will apply the chose wiggle effect to the submit button.*/
/*Just change the animation type to the wiiggle effect you want, wiggle1,wiggle2,wiggle3,wiggle4.*/
.gform_button.button {
    animation: wiggle1 1.5s ease-in infinite;
}

/*CSS Wiggle 1*/
@keyframes wiggle1 {
  0%, 7% {transform: rotateZ(0);}
  15% {transform: rotateZ(-13deg);}

jetsloth

/*Add animated CSS gradient to your form background*/
.gradient_wrapper {
      background: linear-gradient(45deg, #2455EB, #24DDEB, #59EB24);
      background-size: 600% 600%;
      animation: GradientBackground 9s ease-in infinite;
      border:none!important;
}

@keyframes GradientBackground {
      0% {