[Plugin: Jazzy Forms] Remove > from start of each element

I had a similar issue where it was adding a bullet in front of each line. In my case it was related to the wordpress theme I was using. Under each element in jazzy forms you can uncheck “start new row” it eliminated the bullets and still kept each line on a new row. Then I was just left with one bullet on the top. For that, I changed a setting in my theme called “content bullet list” to none. I am guessing this might be different for your theme, but worth a shot to look for something similar.

Your form is looking pretty sweet though. Can you share with me how you added CSS, I am really not great with CSS so am having difficulty setting background colors and text styles, etc for my jazzy form.

Thanks

Hi guys,

on one hand interactions between your site’s CSS style definitions and the Jazzy Forms’ look can cause unwanted effects. On the other hand it’s generally desirable for the form to share the general look and feel of the site. It’s hard to find the right balance here. In many cases you have tweak the CSS a bit to gain full control over the appearance.

nawazazhar2, in your case line 88 of your theme’s style sheet style.css puts a right arrow in front of all list items. Jazzy Forms are organized as lists, too. That’s why you see these arrow all over the form. In order to get rid of them, edit your stylesheet and delete that instruction. If you only want to impact the form, add the following CSS line:

ul li.jzzf_row {background-image: none; }

You can use Jazzy Forms’ “custom CSS” field for that.

Thank you so much for your help jazzigor. I put in the line of code and it worked a treat.

wdgregg, I have copied in the CSS im using to style my form. Maybe this could help guide you towards styling your form.

/* Element overall */
div.jzzf_element{
margin:0 auto;
width:330px;
}
/* Element labels */
div.jzzf_element label{
display:block;
font-weight:bold;
text-align:right;
width:100px;
float:left;
}
/* Element inputs */
div.jzzf_element input, select, message{
float:left;
font-size:11px;
padding:4px 2px;
width:190px;
margin:2px 0 2px 5px;
}
/* Email button */
div.jzzf_element .jzzf_email_button{
clear:both;
margin-left:185px;
width:115px;
height:28px;
background:#262626;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
/* Reset button */
div.jzzf_element #jzzf_1_reset{
margin-left:105px;
width:95px;
height:28px;
background:#262626 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
/* Update button */
div.jzzf_element #jzzf_1_update{
margin-left:5px;
width:95px;
height:28px;
background:#262626 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
/* Removes > before element */
ul li.jzzf_row {background-image: none;}

Thank you Jazzigor for the awesome plugin and to Nawazazhar2 for the CSS assistance. This is what I have so far

https://landidentity.com/home/residential/calculators/

I am still trying to create rounded corners on the background, change the color of the input field border to green, and adjust the padding. Any assistance would be appreciated.

Thanks

Just moved my pages around, use this link instead. https://landidentity.com/calculators/

@wdgregg – I was wondering if you could share your CSS for the calculator you created on landidentity? I really like what you’ve done.

Here’s at least some of what he did:
form.jzzf_form {background-color: #FFF7C2; width: 61%;border:1px solid #9E5108;padding:10px;border-radius: 15px;}

div.jzzf_element input, select, message{border-color: #656D11;border-style: solid; border-width: thin;}

Hello, jazzy form is the greatest plugin in WP as calculation form.
I need some help to customize css, the last nawazazhar2’s post was very useful to me, even if the customization for the update button doesn’t work. Maybe there is a mistake in its syntax. I’ll be very pleased if someone could write a post in which are reported all the “div” for each component of the jazzy form or at least the most of them. At the moment I know just: 1) div.jzzf_element label{ … } 2)div.jzzf_element input, select, message{ … } 3) div.jzzf_element .jzzf_email_button{ … }

You have to know that i’ve read gui.css that should be the css that, in my opinion, defines the aspect of the form but I didn’t find a solution to my problem.

Thank you.

@mp_89 the best way to find what classes and IDs effect the styling, is to download firebug for Firefox.

Right click on the element you want to style (while looking at the form on the front page of your site, i.e. from your visitor’s POV) and go down to Inspect Element with Firebug. Click on that. A new window will open.

On the right-hand side of Firebug, you will see Style, and another tab Computed. The computed tab tells you what the style is, and where the rule is coming from. The style tab will show you exactly how to write the rules. You can copy and paste these into the Appearances tab in the form builder page, and edit as you please.

Once I figured this out, everything became possible. Took a little work to learn how to use it, but very useful to know.