A wonderful customer of ours reached out recently asking a question about a previous tutorial we created some time ago – Build a Product Configurator With Gravity Forms. They wanted to (what sounded like) build a basic logo or design creator for their website. This instantly sparked the concept of could we build a basic logo or company brand mark designed within Gravity Forms, using our add-ons. Presenting Create an online logo designer using Gravity Forms and JetSloth Add-ons! There are a few things under the hood here, so let’s break them down.
How does the logo creator work?
It’s build with custom CSS, using Gravity Forms 2.6.6, and the latest version of JetSloth’s Image Choices and Color Picker add-ons for Gravity Forms. That got us the layout and styling we wanted.
We then added some custom Javascript, that gets added to your theme or HTML field within the form, to do some of the magic. The form download we provide comes with all the Javascript you need already in the form, so that’s taken care of.
The last little Blackmagic we added was using html2canvas which allows us to take the logo design changes you make in the form, color, image symbol and logo text, and create an image from it. So you can just right-click and save the image of the logo you create.
Before you start
The below designs and CSS examples were tested in Gravity Forms version 2.6.6 with the default WordPress 2022 theme installed. These demos only support Gravity Forms 2.6.6+. Depending on the theme you are using, you may get different end results. Some basic further CSS tweaking will likely be required to get the result you want. Using older versions of Gravity Forms will most likely lead to unwanted end results.
Online logo designer using Gravity Forms and JetSloth Add-ons
With a bit of creativity, and JetSloth’s Image Choices and Color Picker add-ons for Gravity Forms, we’ve come up with a super stylish and modern logo creator. Below is everything you need to replicate this demo and tutorial. Be sure to read the notes on things to look out for to get the best result on your website.
Gravity Forms Demo
Form Downloads
This demo comes with a packaged form download. All you need to do is download the form JSON file, and import it into your gravity Forms. If you’re already a JetSloth customer and using Image Choices, the demo form export has the CSS already included in the image choices custom CSS settings. So take advantage of that!
Adding the CSS
The required CSS is supplied below. If you’re not already using Image Choices, you can add the custom CSS to your theme in a few ways suggested below:
- Install a custom CSS plugin such as Simple Custom CSS
- Add your CSS using your theme editor or customiser
- User the Image Choice custom CSS setting if you are adding Images to your choices
Logo Creator CSS
Add your images
The first thing you’ll need to do once you’ve imported the above form is update the images. The images in the form export will point to our development server, and most likely daily, just remove them and upload your own PNG images.
Update the HTML with your form ID
To get the color changing working, ensure you have our Color Picker add-on for Gravity Forms installed. That add-on can update colors using class names, so we’ll just need to add these classes to the correct HTML, as seen in the below screenshot.
You just need to update the FORM ID. So in this example replace gfcp_bg_72_10 with gfcp_bg_YOUR-FORM-ID_10. So if your form ID is 36 you’d replace it withgfcp_bg_36_10.The first number after gfcp_bg_ represents the form ID, and the second number represents the field ID.
More info on how this works with color picker and class names.
Changing default colors
By default, we’ve added a couple of default colors. There’s 2 steps to update this to the colors you want.
- Edit your form and edit any one of the 3 color picker text fields. Open the advanced tab and edit the Default Value to the HEX color you would like.
- Within the CSS, if you want to change the default background color to match your color picker field, just edit the below CSS line to match the HEX code of your color picker default value.
Pretty neat hey? But what doesn’t it do?
How cool is that, right? If everything’s gone smoothly, you should have a working demo, with your images and colors in your builder. One thing the demo tutorial won’t do however, is save the generated images your users create, and submit that to the form entry. So just keep that in mind. The users will have to save those created logos instead.
However if the form is submitted, the text, colors and symbol selected will be saved to the Gravity Form entry. Also be mindful that if you move a bunch of fields around or add any, you’ll likely need to revisit or tweak the provided CSS.
Summary & other CSS articles
Be sure to comment, share and send your finished examples on social media, or in the comments below! We’d love to see what you make of these examples! Thanks for reading our “Create an online logo designer using Gravity Forms and JetSloth Add-ons” tutorial.
Style your Gravity Forms checkbox & radio fields into buttons with CSS
