leeson1776

@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.

I think you want to use a TEXT AREA instead of INPUT element, maybe.

Style your text area with this in the Appearance tab:

textarea {
height: 190px;
width: 88%; (change to whatever you want)
}

If you want to style and INPUT element, style it with this:

.jzzf_form input[type=”text”], .jzzf_form select {
width: 100%;
}

My theme over-rides this styling, so it depends on your theme I guess.
This is what my theme does, so I would have to change the styling in my theme’s custom CSS files, or just put this in the appearances tab and style it:

#content-container input[type=”text”] {
width: 300px;
}

What do you mean feedback input form? What kind of element is it? Link to your site, and I’ll see if I can help.

I tried doing what you describe, and it didn’t work for me either. I don’t think the dropdowns support formulas.

I think a big problem with this form is that the dropdown options don’t have IDs, which would make a lot more things possible.

Thanks for your response. I’ve been figuring some of this stuff out today. Yes, I started Firebug, it’s very helpful.

Can’t quite figure this out yet though. I have a text element, and put “text” (no quotes) in for the custom CSS class. Then when I go to the other CSS field where you put in the rules, what goes there? I want to make the width:550px

Some of the things I tried, but don’t work:

.text {width:550px;}
#text {width:550px;}
text {width:550px;} (just in case I misunderstood your note above)
and every other thing I could think of.

This is the div I want to customize:
<div id=”jzzf_2_element_3″ class=”jzzf_element jzzf_element_t jzzf_ahead_n jzzf_break jzzf_full text”>

Thank you so much for your help!

Also wandering why the HTML elements aren’t lining up with the “heading” elements. They’re like 8px offset. Anyone?

Here’s the form:
https://www.arbor-x.net/services/lawn-treatments/instant-lawn-quote/

Edit: Just figured out the answer to my first question (change width of elements):

div.jzzf_half{width:__px;}

Discovered that if you have more than one form on a page, you have to change the CSS for all forms to the same settings or it doesn’t work.

Yea, I’ve been working on this for weeks. So frustrating to not have any support. Almost there but still not quite right. I’ve encountered multiple bugs with this program as well, so that doesn’t make things any easier for us. I walked into this not knowing the first thing about code. It’s been quite the learning experience!

You can check out my form here, maybe looking at the page source can give you some ideas, for what it’s worth.

Yes you would put it there. Don’t un-tick the default box. Sorry, I can’t help you really, I’m just trying to figure this out myself.

div.jzzf_element label{
text-align:right;
}

Try that. Not sure.

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;}

Should be easy enough. Click on the “Appearances” tab and paste this in the custom CSS field:

form, fieldset {
width:800px;
}

You can try changing 800px to different values and see what it does. I have mine set to 450px because I wanted it narrower. I’m not sure what the max width is.

You can also change “800px” to “100%” and see what that does. I’m new to CSS, but there’s lots of help out there in Google-land if you need it.

Here is my form. Will be moved soon, so look under lawn care if page isn’t found. Click here.

We hacked it to give values that I specify, because I don’t think you can do exactly what I did with the form the way it was built. It’s a very good form, but somewhat limited. I wanted a drop-down menu where the selected option would then affect the values of all the checkboxes/ radio buttons on the rest of the forms. You can get limited functionality by giving the drop-down options a multiplier value (.75,.85,.95,1.05,1.15) and the checkboxes another value ($45, $55) and then multiply them in your formula (propertysize3*checkbox1) == (.95*$45). But if you want checkbox1 and checkbox2 to be multiplied by different multipliers within the same drop-down menu selection, you don’t have that option built in.

Sorry, I don’t know how to explain that better. Hopefully it makes sense to someone.