Use Images in Gravity Forms
ฝัง
- เผยแพร่เมื่อ 21 มี.ค. 2017
- Kori Ashton teaches you how to use images inside of Gravity Forms with ease! Check out this step-by-step video on adding in cool images for options in your #WordPress website.
Kori's Gravity Form Playlist - • Gravity Forms Tutorials
Gravity Forms CSS Styling www.gravityhelp.com/documenta...
Royalty-Free Stock Images unsplash.com/search/dogs
Buy Gravity Forms (affiliate link)
rocketgenius.pxf.io/c/1223565...
Find more from Kori - askkori.com
FINALLY! I've been looking for conditional logic forms, based on images, integrated to WordPress and drip campaigns managers, but without spending a fortune for hours. This really helps, thank you.
Nice! Glad we could help!
Perfect video, very good speed, no bullshit, nice teacher, very straight to the point! Thanks
Hey Thanks, Anthony, for the kind feedback :)
I watched your tuto 2 or 3 years ago.... I remembered it was interesting and I am pleased I could find you again ! Thanks ! :)
Awesome! Thanks for leaving a kind comment
Very clear -- and it opens my eyes to a whole new side of gravity forms
Awesome feedback. Thank you!
Wow! Kori, What a great tutorial on Gravity Forms. Your knowledge and passion are contagious. You made my day!
You just made my day!
You're a star Kori, your vids are so easy to follow. This was a lifesaver. Ta!
Glad I could be of help!
@@KoriAshton 2 years later can confirm!
Your video is the most easiest to understand.. good job
Thank you!
Outstanding! In the future they will be giving out Oscars for Best TH-cam Presenter. You will get my vote and I will personally greet you on the red carpet; assuming I don't get kicked out of the Academy for being a Republican. What you demonstrated is (I believe) a plugin by Jetsloth. They include a 5 plugin bundle with additional toys that will really jazz up any form, and I hope you have the time to produce more tutorials on how it works. We all appreciate your free education - thank you!
WOW! Thanks for the wonderful encouragement 😃
This is amazing! I needed to add pictures of designs to poll and now I can. Loved this video! Thank you!!
Heck yes!! Glad to help!
LOVE - LOVE - LOVE Your Videos!
Love Love Love this comment :)
LOVE this video. I've been watching your Gravity Form videos ALL DAY!! Using WP & GF developer plugin as the order form for a temp wholesale website until we can integrate her current retail site with wholesale. She has at least 16 products with multiple variables (designs & sizes) & needed a creative way to display the products using GF!!! I think I found the way to do it. When it comes time to buying GF I'll use your affiliate link :) Thanks for putting together your WP videos & others; they've been invaluable to me!!
Kori...you are awesome! I love your enthusiasm and great tips. Thank you for making my site look beautiful.
I'm just over here making videos.... You're the one KICKIN TUSH to create a beautiful site. Keep going!
This was awesome! Can't wait to try it out.
This will make my boring survey questions come to life!! Thanks!
Thanks :)
Absolutely loved your video Kori! Great job!!!
Super kind :)
Saved my bacon!!! I was looking for costly add ons to help me do this! So much easier than I ever thought! Thank you!
You are so welcome!
This series is fantastic. One of the clearest and most informative tutorial series' I've watched a very long time. GF is clearly extremely powerful. I am wondering if the images can be shown in a light box when clicked. Thanks so much for this series. It has generated more ideas for projects than a week's worth of random brain storming!
This was great. Thank you for this! Worked like a charm.
Thank you so much for this ULTRA-helpful tutorial! I have scrolled and scrolled looking for a way to do this until I landed on your channel. Exactly what I needed!
You're very welcome!
Loved this video! You're energy and teaching style are amazing :)
+Lisa Higgins Ah Thanks!! ❤️
Thank you so much Kori. This was exactly what I was looking for today. Great video!
Sweet!! Thanks for taking a moment to leave feedback.
@@KoriAshton Of course. I'll be watching more of your videos. PH
Thank you, awesome tutorial...saved me from paying for and adding jetsloth plugin -- totally serves the purpose! Thanks again
Glad it helped!
I've been trying to find some instructionals on this type of thing for ages. This was EXTREMELY helpful and your explanations were very easy to understand. Thank you!
Awesome! Glad to help. I appreciate the positive feedback! High five from Texas!
You're welcome. I'd love to see you expand upon this. CLG offers CD/DVD/Vinyl manufacturing and I'm trying to create a visual "price calculator" to generate dollar totals for highly variable products. There are a couple different types of media (CD, DVD, Vinyl), many different types of packaging (jewel box, wallet, sleeve, digipak, etc.) and various other special variables (shrink wrap, apply stickers, etc.). On top of all that, the quantity defines the cost per unit. So the price for a digipak based on 500 units (along with every other options that is used to create the finished goods) would be different from the same configuration based on a quantity of 1,000 units. Discmakers and Copycats both have this type of "quote generator" (although Copycats' doesn't actually produce a dollar total). Would love to learn how to create this in order to allow customers to walk through the process of picking their options and, at the end of the form, being able to pay for the product.
You could do this with Gravity Forms - but why not try it with WooCommerce? Their products have attributes that effect pricing.
I've tried that. It just seems clunky and awkward to me. Plus, it's not as flexible. There could literally be 6-10 variables excluding quantity variables (which I'd like for the customer to enter virtually any number). Every part of the pricing has price breaks and they're not always consistent. Some parts have breaks at 500, 1,000, 2,000, etc. For others, the price breaks are at different values. The composite parts then need to be assembled into a whole.
I've also found that these sort of Woo products seem to slow down the site. I created some products for merchandise that took me a day per product to create.
Bottom line: the complexity can be off the chart and I need something more flexible than Woo offers.
We've seen GF be very flexible. It just takes some creativity and sometimes some custom calculation code inside of the fields. This one we created has a lot of conditional logic and calculations myedusolutions.com/sl-calculator/ This one is really involved with discounts per child and type of membership. It's all possible - just a matter of mapping it out greentreetennis.com/camps-2/summer-tennis-camp/summer-tennis-camp-registration-2017/
Thanks Kori! Spent hours looking up how to do this before finding your video
Heck yes!!! High Five!
You're awesome! The info you provide is very helpful!
That's super kind. Thank you :)
That was awesome. Thank you Kori!
You are so welcome!
Great Video!!! Thank you for posting this kind of stuff! Definitely subscribing.
This video was awesome. I was wondering if I would be able to use it to do color swatch sample images in my form and this definitely answered my question. Anxious to try it out and am wondering if the size of the image goes by what is on WP or if that is handled in Gravity Forms and if so can the size be changed. Can't wait to experiment now.
Thanks so much, this is what I've been looking for!
Great to hear!
Thank God I found you!
WOW!!!! thank you so much!
All your videos are very usefull.
Sure kind of you to say! Thank you
WOOOW thanks lady, this is really useful, i'm not even using gravity forms, instead i am using caldera, and it works perfectly, thank you
Very cool! Thanks for leaving positive feedback.
This is very useful! Thank you!
Thank you so much for this video about working with gravity form. Wooowww
Thank you so much!! You're awesome!!!
Thanks for this video and the whole bunch of videos about Gravity Forms ... you have a new follower in Germany :-)
Nice video Kori, you save me from doing tons of research. Thumb up for you my dear
Wooo hooo! That's really kind of you to take a minute to leave a comment.
Super helpful. My project manager and I love your right now.
+ARE Visual 😃awesome!!!
That was super useful! Probably I should read the Gravity form's documentation, as I miss all the goodies :)
Thanks for the video!
More grease to your elbow Kori...you have added a lot of value to my life. So much appreciation from me.
Super kind of you to say!
Very useful info - thank you!
Awesome feedback! Thank you!
That's amazing! Thank you so much!
Yay!!!!!
So easy! Thank you!
Awesome! Glad I could help
nice:) Love the expression "Nerd code"
LOVE for this
is it gonna work with Woo commerce Gravity form Add on ?
WOW!! Thanks this is a big help!
+Niko Dola Yay! So much fun!
dope video, luv your energy
You're super kind. Thank you :)
Thank you so so much, this is very helpful !!
Glad it was helpful!
Super awesome Kori Ashton :)
Thanks 💚😄
Hi Kori, lowly fan here. Quick question. On an "enfold" theme I wish to set up a membership site, which is the right, best plugin I should use!
Excellent help - many thanks
Sure thing :)
Great tutorial and good energy
Thank you!
So very helpful, thank you so so so much!!
Sure thing! Thanks for leaving a kind comment.
GREAT INFO! Thanks!
Is there a way to add images without making them a selection? In other words add images just to spice up the form?
BRILLIANT! Thank you!!!
Coolest person on TH-cam! Thanks for that tip! I am now falling in love with Gravity Forms.
Ditto!!!
Heck yes!! Thanks for the kind feedback. I had all of my comments erased when I changed my channel URL. Coming back around now to let y'all know I'm very thankful for the encouragement!
OMG!, Great Video , Again , Trank you dir sharing
Awesome, thanks!
Are you willing to make some gravity forms video's on pricing? Having some issues on my forms.
Hey Kori! I really enjoy your videos! Is there a way to add images in drop down menu?
Yes - It would probably take using something like a Mega Menu plugin.
THANK YOU!!! So helpful
+Dave Anton Glad it all works for you!
Thank you! So helpful
You're so welcome!
This a great video. Quick question, it is possible to hide the radio circle so that only the image shows up?
WebTegrity Thank you so much. Would I be able to put that CSS code in the gravity form field CSS Tags?
Hello Kori, how´s going? Could you please show us which is the best process to transfer a WP website from a host to another host? Is there a plugin that do this automacally ou demand hard work? Thanks in advance!
Great Video! I was wondering though, is it possible to have images in dropdowns or something other than radio buttons or checkboxes?
I did try but no luck. It just displays the "Nerd Code" lol. I ended up going with radio buttons. I was able to add images to the dropdown with css but it still did not display correctly.
Great video, thanks. Is it possible to get a single image to change as a customer builds their product? I.e If it was a bike and the colour, style and parts changed as they built the product?
Yes - you would add conditional logic for show and hide boxes. Check out this video for more - th-cam.com/video/qPualrefymk/w-d-xo.html
Thank you so much. You are a godsend. The only question I have now is when I drag to add a Product Pricing Field, how do I get rid of the default generic lotion product bottles. I have added my product image with your awesome instructions, but it puts it right next to these white plastic squeeze tubes that lotion would come in. They are there for an example product image I guess, but I can't find any html image source code for them anywhere when I edit the field. Thank you, Kori.
Thank you for leaving such a kind comment. Looks like we missed responded in this thread. Please reach out if we can help in the future.
Great Video THANK YOU
Sure thing! Thanks for leaving a kind comment!
You are always doing GF in amazing way... keep it up... Appreciate.
That's very kind! Thank you!
Hi. Terrific tutorial. I wonder if you can tell me if instead of an image, can you insert a Shortcode or Php Code? If so, what would the "nerdcode" be?
You'd prob need to use an HTML field for this type of code.
Really good work Kori and helped me understand images much better. Would you happen to know how to use image options, and when selecting an image, being directed to the next question?
This is a click on action that Gravity Forms can't do out of the box. It would be a considerable amount of custom work, or some robust conditional logic. The plugin WSForm can do this automatically.
Thanks very helpful!
Thanks for leaving kind feedback.
Thank you so much.
Sure thing!
Thanks for the great video! Is it possible to add a price to the product (dogs in this case)?
Sure - You would want to use the "product" field in GF. It allows for pricing.
Great and concise video to watch.
Is it possible to make Gravity Form work in Joomla Web Hosting?
Dear Kori, This is cool. How can you do away with the radio button? is there a way?
It's a display none code in your CSS file. Do you know how to write CSS? I have a whole playlist here on YT if you're interested.
Brilliant! Thanks. X
Great Video! Exactly what I was looking for! One question only..... Is there an option to make the photo's in a small size when using this form? The images I've uploaded are quite large. Is there a code to tell gravity form what image size I would like to use? Thanks in advance for your answer.
Can you use your WordPress media library to get the thumbnail size? The other option is to wrap CSS around the form to size down the images.
@@KoriAshton Thanks Kori. I can use the media library to resize photos. But they are also used on different places on my website. So this option does not work I'm affraid. Worst case I have to upload the images again. (in smaller size) Thanks for your fast responds.
Awesome! Do you have a video on how to upload a profile pic to your gravity registration form?
Would this be used for the user's gravatar?
Great Tutorial! Thanks! Question: can I hide the radio buttons and, using a multistep form, send the user to the next page by clicking on the image? Thanks a lot!
You can hide the radio buttons with CSS. You might find some answers here docs.gravityforms.com/radio-buttons/
Yes - there is multistep forms out of the box with GF. You could have them go to the next page by clicking an image if you are using an HTML box and writing the code for that inside.
Thanks a lot! Do you happen to have that code snipped at hand?
Thank you for showing us how to do this, love your videos. One little suggestion though: it might be better to use relative paths to those images and save yourself some headaches down the road.
Excellent input!
Super Helpful
Thank you for leaving a kind comment.
Hey, in the example they only have pictures, they completely remove the actual radio button, but in your video the radio buttons are there alongside the pictures- also adding a hoover affect when clicked- I’ve tried to find a video that shows the complete process but haven’t had any luck.
You would be able to address both of these things via CSS. Any luck working in that area? Are you familiar with CSS?
Wow! Great lesson Kori! I had no idea you could do that with GF. Definitely subscribing to this channel! Thanks again!
Wooo hooo! Thanks for joining the weekly fun :)
@@KoriAshton No problem, thanks for all the info! Your videos are fun and informative! I actually have a question. Is it possible to redirect someone to a webpage once they click on the image? example: I am making a form asking people what are they looking for on the website. I have 4 pictures of different products. When they click on what they are there for I want the for to redirect them to that part of the website. Is this possible?
Hmmm - I've never tried that. Did you try to wrap the image html in a link tag?
@@KoriAshton No I haven't, but that is a great idea! I will give it a shot and let you know how it goes. Thanks! You are awesome!
You're very kind :)
Hi Kori, thanks this was amazingly helpful! Can I ask, how do you place images in columns rather than one long line?
Great question! Columns are tricky in GF. Check out this tutorial to see if that helps docs.gravityforms.com/working-with-columns/
@@KoriAshton Thanks so much!!!
This is also something I've used before www.gravityforms.com/blog/css-ready-classes/
Dear Kori, thank you so much. How to insert an image in the question? I agree that gravity forms options are node code ready but how can we insert the same in questions?
I am preparing a math question papers with equations in questions as well as in options.
Options with formulas and equations are working but I couldnt do the same with questions. Please help
What field are you trying to use in GF to insert an image?
AskKori.com quiz question field
Thanks Kori
Sure thing :)
hi, can you help me? so I want to make a form for the teacher to fill in the new student registration interview, so I as admin have student data (example full name, date of birth, age, etc.) how if the teacher presses the form on full name column and choose one of the students so that the name of the student will come out, the date of birth that has been filled, the age that has been filled in? can you give me a way? thank you very much for me.
I emailed you back from the website. Gravity Views could be the fix here. Other than that - I'm not too sure what other solution would work, unless it was custom.
Is there a way to add image with flexible size i.e. keeping the size and proportion same for mobile, laptop, ipad and desktop?
You might be able to accomplish this by using a percentage for the size.
hi thanks for your useful videos .i do that the same as you.images add to form in gravity plugin.but images dont show in my websites.icant solve this problem.
Are you using the full path of the image like - askkori.com/wp-content/uploads/2018/07/Ask_Kori_Logo_Web.png
Do you know if images can be used for Chained Select Fields?
Thank you for leaving a comment. Looks like we missed it in the threads. If we can ever help in the future - please reach out.
One question on using pictures. I tried doing this with a form that builds a fairly complex product but the "nerd code" seems to screw up the conditional logic used to provide more options to the customer thereafter. Does this happen to you and, if so, is there a way to resolve the issue so that images can be used throughout the form without affecting later options? Basically, the future options no longer appear using the conditional logic once the nerd code is added to the radio buttons as per the video.
That's a tricky, complex scenario. Seems like it would get a little twisted up with conditional logic. You may have to build a more custom solution for this type of UX.
@@KoriAshton What makes me think it's possible is that I see a similar tool to what I'm seeking to create and it seems to work fine. I just don't know enough to figure out how to deal with the conditional logic issue vis-a-vis adding images. www.copycatsmedia.com/quote-request/
How do you remove the actual radio button when using an image? Also, is there a way to use a regular button instead of a radio button? Love your videos!!
Thanks for the kind comment :) You would need to use a "hide" option in your CSS file to hide the radio button. If you want folks to only select one option - then you need to keep using a radio button. If you need them to select more than one option - you may want to use a different Gravity Forms field.
Hi Kori....great video. Do I understand you correctly? If you want to use NO DUPLICATES....you have to show the radio button? I was hoping that I could hide the radio button and have the swatch image as the selector.
Have you tested it by hiding the radio buttons inside of CSS? I think it would work that way.
I'm trying to add a new Conditional Gravity Form question based on how the User answered the question with the images (i.e. Only display this question if the User selects the Dog "Sammy"). The Conditional question is not appearing in the Live view. It think the issue is that Gravity is not reading the text "Sammy"...it's only seeing a picture in the answer. I'm writing the code exactly like you did in this video. Any ideas on what I am doing wrong? Thank you so much, Kori!
Thank you for leaving a comment. Looks like we missed it in the threads. If we can ever help in the future - please reach out.
Hi Kori, How would you split the radio buttoms up into two columns.....now bare with me what I am trying to do is have the list of choices down the left with text and the images down the right. If you can even have each image appear only when the button for that choice is clicked you would be a genius!
See if this video helps - th-cam.com/video/7oqHbmFpf7o/w-d-xo.html
can we call video in checkbox or radio button gravity form ????????????
Have you tried embedding the entire code in that field? It might just work.
OMG - You're AMAZING sharing this instruction! #muchrespect
Very kind, Doug!
Is it possible to remove the "dots" left from the image, so the image is the only thing they can click? :)
did u do it?
You can hide it, but you certainly don't want to confuse the user. Just go into your CSS and use Display: none;
Excelent Hi From Stgo Chile!
Thank you for leaving a kind comment.
oh sorry Enfold theme wordpress site. Just love your work!!!
Is this possible now after latest Gravity forms update? Version 2.4.10 I can't get it to work.
Yes. Those fields are still HTML capable. Did you test it again?
@@KoriAshton Nope. I'm having an issue with GF and latest version of Elementor. For the time being, I'm using the field to show images just above the product field. Using CSS to maneuver the display positions is working ok. I'm working with GF support team now to pinpoint the issue.