How to create a simple Gravity Form feedback popup?

Contents

Build your own WordPress Support Plan

Expert, yet affordable WordPress support & maintenance plans.
View our pricing

This is a quick WordPress guide that shows you how to create a feedback popup on your website using Gravity forms or any other form builder. This guide is meant for users that have basic experience with PHP, CSS and HTML. We will use a basic Gravity form and a minimal basic modal popup, no additional plugins are needed, this is a very lightweight but effective popup.

How to create a simple Gravity Form feedback popup?

We will essentially create a simple feedback popup that you may see on many sites such as the Craft Can Directory, this method is very similar to how we built the Craft Can Directory feedback popup. You will need to access your theme functions.php and create a short feedback or contact form in Gravity forms or even Contact form 7.

How to create a simple Gravity Form feedback popup?

The Basic HTML
You can use the HTML below and modify to your exact needs, this is very basic and includes a title, close icon (dependant on FontAwesome, you can replace with a pure CSS close icon). You can change the title and any other text from our default and the shortcode for your Gravity form or for another form if you aren’t using Gravity Forms.

	<a id="popup" class="feedback-toggle feedback-button">Feedback</a>

	
	<div class="modal">
		<div class="modal-overlay feedback-toggle"></div>
		<div class="modal-wrapper modal-transition">
		  <div class="modal-header">
		    <span class="modal-close feedback-toggle"><i class="fa fa-times" aria-hidden="true"></i></span>
		    <h6 class="modal-heading">Let us know what you think</h6>
		  </div>
		  
		  <div class="modal-body">
		    <div class="modal-content">
				<?php echo do_shortcode( 'PUT FORM SHORTCODE HERE' ); ?>
		      <span class="feedback-toggle modal-text-close">Close</span>
		    </div>
		  </div>
		</div>
	</div>

The Javascript
Keeping things very lightweight we need just this simple javascript function to make the popup show when we click the feedback button. This is dependant on the jQuery library, so ensure that you have enqueued a jQuery library first.

	<script>
	jQuery(document).ready(function() {
		jQuery('.feedback-toggle').on('click', function(e) {
			e.preventDefault();
			jQuery('.modal').toggleClass('is-visible');
		});
	});
	</script>

The CSS
This CSS is created to enable a basic popup and also style the feedback button to remain fixed to the righthand side of the viewport. Please adjust this as needed.

<style>
		li#field_4_3, li#field_4_1 {
		    width: 50%;
		    display: inline-block;
		    vertical-align: top;
		    margin: 10px 0 0;
		}
		
		.modal .gform_wrapper label.gfield_label {
			font-size: 12.5px;
		}
		
		.modal .gform_wrapper .gform_footer {
			text-align: center;
			padding: 0;
			margin: 10px auto;
		}
		
		body .modal .gform_wrapper .top_label div.ginput_container {
			margin-top: 0;
		}
		
		@media screen and (min-width:980px) {
			.modal .gform_wrapper form {
				padding-left: 15px;
			}
		}

		.modal {
			position: fixed;
			z-index: 10000;
			top: 0;
			left: 0;
			visibility: hidden;
			width: 100%;
			width: 100vw;
			height: 100%;
			height: 100vh;
		}
		
		.modal.is-visible {
		    visibility: visible;
		}
		
		.modal-overlay {
		  position: fixed;
		  z-index: 10;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background: hsla(0, 0%, 0%, 0.5);
		  visibility: hidden;
		  opacity: 0;
		  transition: visibility 0s linear 0.3s, opacity 0.3s;
		}
		
		.modal.is-visible .modal-overlay {
		  opacity: 1;
		  visibility: visible;
		  transition-delay: 0s;
		}
		
		.modal-wrapper {
			position: absolute;
			width: 92%;
			max-width: 600px;
			padding: 10px;
			text-align: center;
			background: #fff;
			border-radius: 5px;
			z-index: 9999;
			top: 50%;
			left: 50%;
			-moz-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}
		
		.modal-transition {
		  transition: all 0.3s 0.12s;
		  opacity: 0;
		}
		
		.modal.is-visible .modal-transition {
		  opacity: 1;
		}
		
		.modal-header, .modal-content {
		    padding: 2px;
		}
		
		.modal-header {
		  position: relative;
		  border-bottom: 1px solid #e8e8e8;
		}
		
		.modal-close {
		    position: absolute;
		    top: 0;
		    right: 0;
		    padding: 6px;
		    cursor: pointer;
		}
		
		.modal-close:hover {
		  color: #edb127;
		}
		
		.modal-heading {
		  font-size: 1.125em;
		  margin: 0;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		}
		
		.modal-content > *:first-child {
		  margin-top: 0;
		}
		
		.modal-content > *:last-child {
		  margin-bottom: 0;
		}
		
		.modal-text-close {
		    text-transform: uppercase;
		    font-size: 10px;
		    font-weight: 900;
		    text-align: center;
		    cursor: pointer;
		}
		
		.modal-text-close:hover {
			color: #edb127;
		}
				
		.feedback-button {
		    height: 30px;
		    background: #edb127;
		    width: 100px;
			padding: 6px 0 5px 0;
		    -webkit-transform: rotate(-90deg);
		    color: white;
		    transform: rotate(-90deg);
		    -ms-transform: rotate(-90deg);
		    -moz-transform: rotate(-90deg);
		    text-align: center;
		    font-size: 13px;
		    font-weight: 900;
		    position: fixed;
		    right: -40px;
		    top: 45%;
		    z-index: 999;
		    text-transform: uppercase;
		    border-radius: 5px 5px 0 0;
		    box-shadow: 0 0 0 7px rgba(238, 238, 238, 0.17);
		    transition: all .3s;
		}
		
		.feedback-button:hover {
		    box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.2);
		}
		
		@media screen and (max-width: 980px) {
			.feedback-button {
			    font-size: 9px;
			    width: 65px;
			    right: -24px;
			}
		}
	</style>

The function to create a Gravity form popup

Let’s put all the above together in a function and load in the footer of your website. This will display on all pages and posts of your site, if you want to load it conditionally you can create a simple function to load on certain pages, posts, etc.

/**
 * Popup Function
 * https://lakewood.media/create-simple-gravity-form-feedback-popup/
 */
function lakewood_popup() { ?>
	<style>
		li#field_4_3, li#field_4_1 {
		    width: 50%;
		    display: inline-block;
		    vertical-align: top;
		    margin: 10px 0 0;
		}
		
		.modal .gform_wrapper label.gfield_label {
			font-size: 12.5px;
		}
		
		.modal .gform_wrapper .gform_footer {
			text-align: center;
			padding: 0;
			margin: 10px auto;
		}
		
		body .modal .gform_wrapper .top_label div.ginput_container {
			margin-top: 0;
		}
		
		@media screen and (min-width:980px) {
			.modal .gform_wrapper form {
				padding-left: 15px;
			}
		}

		.modal {
			position: fixed;
			z-index: 10000;
			top: 0;
			left: 0;
			visibility: hidden;
			width: 100%;
			width: 100vw;
			height: 100%;
			height: 100vh;
		}
		
		.modal.is-visible {
		    visibility: visible;
		}
		
		.modal-overlay {
		  position: fixed;
		  z-index: 10;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background: hsla(0, 0%, 0%, 0.5);
		  visibility: hidden;
		  opacity: 0;
		  transition: visibility 0s linear 0.3s, opacity 0.3s;
		}
		
		.modal.is-visible .modal-overlay {
		  opacity: 1;
		  visibility: visible;
		  transition-delay: 0s;
		}
		
		.modal-wrapper {
			position: absolute;
			width: 92%;
			max-width: 600px;
			padding: 10px;
			text-align: center;
			background: #fff;
			border-radius: 5px;
			z-index: 9999;
			top: 50%;
			left: 50%;
			-moz-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}
		
		.modal-transition {
		  transition: all 0.3s 0.12s;
		  opacity: 0;
		}
		
		.modal.is-visible .modal-transition {
		  opacity: 1;
		}
		
		.modal-header, .modal-content {
		    padding: 2px;
		}
		
		.modal-header {
		  position: relative;
		  border-bottom: 1px solid #e8e8e8;
		}
		
		.modal-close {
		    position: absolute;
		    top: 0;
		    right: 0;
		    padding: 6px;
		    cursor: pointer;
		}
		
		.modal-close:hover {
		  color: #edb127;
		}
		
		.modal-heading {
		  font-size: 1.125em;
		  margin: 0;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		}
		
		.modal-content > *:first-child {
		  margin-top: 0;
		}
		
		.modal-content > *:last-child {
		  margin-bottom: 0;
		}
		
		.modal-text-close {
		    text-transform: uppercase;
		    font-size: 10px;
		    font-weight: 900;
		    text-align: center;
		    cursor: pointer;
		}
		
		.modal-text-close:hover {
			color: #edb127;
		}
				
		.feedback-button {
		    height: 30px;
		    background: #edb127;
		    width: 100px;
			padding: 6px 0 5px 0;
		    -webkit-transform: rotate(-90deg);
		    color: white;
		    transform: rotate(-90deg);
		    -ms-transform: rotate(-90deg);
		    -moz-transform: rotate(-90deg);
		    text-align: center;
		    font-size: 13px;
		    font-weight: 900;
		    position: fixed;
		    right: -40px;
		    top: 45%;
		    z-index: 999;
		    text-transform: uppercase;
		    border-radius: 5px 5px 0 0;
		    box-shadow: 0 0 0 7px rgba(238, 238, 238, 0.17);
		    transition: all .3s;
		}
		
		.feedback-button:hover {
		    box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.2);
		}
		
		@media screen and (max-width: 980px) {
			.feedback-button {
			    font-size: 9px;
			    width: 65px;
			    right: -24px;
			}
		}
	</style>
	<script>
	jQuery(document).ready(function() {
		jQuery('.feedback-toggle').on('click', function(e) {
			e.preventDefault();
			jQuery('.modal').toggleClass('is-visible');
		});
	});
	</script>
	<a id="popup" class="feedback-toggle feedback-button">Feedback</a>

	
	<div class="modal">
		<div class="modal-overlay feedback-toggle"></div>
		<div class="modal-wrapper modal-transition">
		  <div class="modal-header">
		    <span class="modal-close feedback-toggle"><i class="fa fa-times" aria-hidden="true"></i></span>
		    <h6 class="modal-heading">Let us know what you think</h6>
		  </div>
		  
		  <div class="modal-body">
		    <div class="modal-content">
				<?php echo do_shortcode( '[gravityform id="CHANGE FOR FORM ID" title="false" description="false" ajax="true"]' ); ?>
		      <span class="feedback-toggle modal-text-close">Close</span>
		    </div>
		  </div>
		</div>
	</div>	
	<?php
}
add_action( 'wp_footer', 'lakewood_popup' );
Written By
Adam
Founder of WP Helper.
You will also like these articles

Relax Knowing Your WordPress Site Is Secure & Running Smoothly 24/7

Let us manage your WordPress site, everything from security to updates will be taken care of. Support plans also come with dedicated support so we can do anything from adding content to customising your site for you.

Same Day Professional WordPress Support

Get WordPress Support Today

Need help with a single WordPress problem, today? We can help with anything from adding analytics tracking code to site hack recovery. Full money back guarantee on all jobs.

1. Submit a Support Request

Use our support ticket form below to send details of your problem to our developers.

2. Get a Quote

We will review your request and provide a quote within 24 hours (but usually within a few hours).

3. We fix your WordPress problem

Our team will begin fixing your WordPress problem the same day.

4. 100% Money Back Guarantee

If we can’t fix the problem for the amount quoted we will refund you 100%.

  • Do you have a screenshot of the issue or have a copy of the theme or plugin that is at fault? If you want to upload php, html or css please zip first.
    Drop files here or
    Accepted file types: jpg, jpeg, png, pdf, zip, gzip, rar, doc, txt, Max. file size: 15 MB, Max. files: 10.