Create an online logo designer using Gravity Forms and JetSloth Add-ons
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.
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.
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
/*Import google font - Montserrat*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');
/*Form outside wrapper styles*/
.gform_wrapper.logo-creator_wrapper {
background: #FFFFFF;
border: 2px solid #1D1D1F;
box-shadow: 5px 5px 0 0 #000000;
border-radius: 5px;
position:relative;
}
.gform_wrapper .logo-creator input[type="text"] {
background: #FFFFFF;
border: 2px solid #1D1D1F;
box-shadow: 5px 5px 0 0 #000000;
border-radius: 5px;
position: relative;
padding: 15px;
color: black;
font-weight:500;
}
.gform_wrapper.logo-creator_wrapper input[type="text"]:focus {
outline:none;
}
/*Form heading*/
.gform_wrapper.logo-creator_wrapper .gform_heading {
position: absolute;
right: 0;
top: 0;
z-index: 2;
background: black;
color: white;
padding: 2px 20px;
}
.gform_wrapper.logo-creator_wrapper h2.gform_title {
font-family: system-ui,-apple-system,Segoe UI,Helvetica,Arial, sans-serif;
font-size: 13px;
letter-spacing: -0.25px;
text-align: right;
line-height: 13px;
font-weight: bold;
}
/*h2 Styles*/
.gform_wrapper .logo-creator .gfield_html h2 {
font-family: system-ui,-apple-system,Segoe UI,Helvetica,Arial, sans-serif;
font-size: 19px;
color: #1D1D1F;
letter-spacing: -0.38px;
line-height: 28px;
font-weight:bold;
}
/*text styles*/
.gform_wrapper .logo-creator .text {
font-family: system-ui,-apple-system,Segoe UI,Helvetica,Arial, sans-serif;
font-size: 12px;
color: #1D1D1F;
font-weight: 500;
line-height: 20px;
padding: 40px 0 10px 40px;
border-top: 2px solid #1D1D1F;
}
/*Artboard styles and is hidden*/
.gform_wrapper .logo-creator .artboard{
background: #00FFE5;
max-height: 450px;
min-height: 450px;
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
align-items: flex-start;
margin-left:-9999px;
width: 100%;
position: absolute;
}
/*Preview layer styles*/
.gform_wrapper .logo-creator .result {
position:relative;
}
.gform_wrapper .logo-creator .result canvas {
margin: 0;
display: block;
border-bottom: 2px solid black;
}
.gform_wrapper .logo-creator .result:before {
background: white;
content: "#RightClickSave";
font-size: 10px;
color: black;
font-weight: bold;
border: 2px solid #1D1D1F;
box-shadow: 5px 5px 0 0 #000000;
border-radius: 6px;
position: absolute;
right: 40px;
bottom: 50px;
padding: 3px 8px;
z-index: 9999;
}
.gform_wrapper .logo-creator .artboard .logo-name {
order: 0;
flex: 0 1 auto;
align-self: center;
font-family: 'Montserrat', sans-serif;
font-size: 25px;
color: white;
letter-spacing: 0;
line-height: 27px;
max-width: 260px;
background: #1D1D1F;
border-radius: 3px;
margin-left: 5px;
padding: 3px;
}
/*Preview image 1 */
.logo-creator .artboard .preview-area {
order: 0;
flex: 0 1 auto;
align-self: center;
}
.logo-creator .artboard .preview-layer.preview-layer-1 img {
width:95px;
height:auto;
}
/*Bubble lable badge styles*/
.logo-creator .badge-lable .gfield_label {
background: #1D1D1F;
border-radius: 14px;
font-family: system-ui,-apple-system,Segoe UI,Helvetica,Arial, sans-serif;
font-size: 9px;
color: #FFFFFF;
text-align: center;
line-height: 28px;
text-transform: uppercase;
padding: 0 15px;
}
/*Symbol picker field lable*/
.logo-creator .config-layer.badge-lable .gfield_label {
float: left;
position:absolute;
top:60px;
left:40px;
}
/*Color picker style*/
.logo-creator .color-picker-style-pantone .color-picker-swatch {
overflow: hidden;
background: #FFFFFF;
border: 2px solid #1D1D1F;
box-shadow: 2px 3px 0 1px #000000;
border-radius: 5px;
width: 100%;
}
/*Hide color picker icon*/
.logo-creator .color-picker-style-pantone .ginput_container_text .color-picker-swatch-color i {
display: none;
}
/*Image chocies for logos*/
.image-choices-field .image-choices-choice-image-wrap {
background-size: contain;
width: 50px;
height: 50px;
}
.gform_wrapper .logo-creator .config-layer {
min-height:150px;
border-bottom:2px solid black;
position: relative;
top: -16px;
}
.gform_wrapper .logo-creator .image-choices-field div.gfield_radio {
display:
inline-block;
float: right;
margin: 37px 40px;
}
/*Margins for logo selections*/
.gform_wrapper .logo-creator .image-choices-field .image-choices-choice {
margin: 0 0 10px 20px !important;
border: none!important;
}
/*Selected logo styles*/
.gform_wrapper .logo-creator .image-choices-field .image-choices-choice-selected,
.gform_wrapper .logo-creator .image-choices-field .image-choices-choice-focus,
.gform_wrapper .logo-creator .image-choices-field .image-choices-choice-selected .image-choices-choice-hover{
border: none;
transform: scale(1.4);
}
/*Hover styles*/
.gform_wrapper .logo-creator .image-choices-field .image-choices-choice-hover {
border: none;
}
/*submit button*/
.gform_wrapper .logo-creator .gform_button.button {
outline: none;
border: none;
border-radius: 5px;
width: 100%;
margin: 0 40px 60px;
font-size: 16px;
color: white;
font-family: system-ui,-apple-system,Segoe UI,Helvetica,Arial, sans-serif;
font-weight: bold;
padding: 20px;
background:url('https://gf.republiqstaging.com/wp-content/uploads/2022/08/texture-1.jpg');
}
/*gform footer*/
.gform_wrapper.gravity-theme .gform_footer {
margin: unset!important;
padding: unset!important;
}
.gform_wrapper.gravity-theme .gfield.gfield--width-quarter {
padding: 40px 0;
}
.gform_wrapper.gravity-theme .gfield.gfield--width-quarter:nth-of-type(2) {
padding: 40px 20px 40px 40px;
width:330px;
}
.gform_wrapper.gravity-theme .gfield.gfield--width-quarter:nth-of-type(4)
.gform_wrapper.gravity-theme .gfield.gfield--width-quarter:nth-of-type(3){
padding: 40px 10px 40px 0;
}
.gform_wrapper.gravity-theme .gfield.gfield--width-quarter:nth-of-type(5){
padding: 40px 40px 40px 0;
}
/*Mobile Styles*/
@media screen and (max-width: 769px){
.gform_wrapper .logo-creator .preview-area.gfield_html {
min-height:350px;
}
.gform_wrapper.gravity-theme .gfield.gfield--width-quarter,
.gform_wrapper.gravity-theme .gfield.gfield--width-quarter:nth-of-type(2),
.gform_wrapper.gravity-theme .gfield.gfield--width-quarter:nth-of-type(4),
.gform_wrapper.gravity-theme .gfield.gfield--width-quarter:nth-of-type(3),
.gform_wrapper.gravity-theme .gfield.gfield--width-quarter:nth-of-type(5) {
padding: 0 20px;
}
.gform_wrapper .logo-creator .artboard {
flex-direction: column-reverse;
}
.gform_wrapper .logo-creator .text {
padding: 20px 30px;
}
.gform_wrapper .logo-creator .gform_button.button {
margin: 0 30px 30px;
}
.gform_wrapper .logo-creator .config-layer {
position: relative;
top:unset;
}
.logo-creator .config-layer.badge-lable .gfield_label {
float: unset;
display: block;
top: unset;
position:relative;
left: unset;
margin: 0;
}
.gform_wrapper .logo-creator .image-choices-field div.gfield_radio {
display: block;
float: unset;
margin: 20px;
text-align: center;
}
.gform_wrapper .logo-creator .image-choices-field .image-choices-choice {
margin: 0!important;
width: calc(50% - 30px);
}
.gform_wrapper .logo-creator .result canvas {
margin: 0;
display: block;
width: 100%!important;
height: auto!important;
}
}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_31_10 with gfcp_bg_YOUR-FORM-ID_10. So if your form ID is 36 you’d replace it with gfcp_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.
