Sample Custom CSS for Jazzy Forms

Mate, where can i see your new custom css on the net?
Thx

https://www.arbor-x.net/services/lawn-treatments/instant-lawn-quote/

Hi leeson.
I ve seen your form and looks really good!

I am trying to do something similar, one thing that i would really need is the tooltip next to the form field, as you did in your form.

Here you can find the 2 pages where i put the form

1_ First
2_ Second

Could you please help me with the tooltip please.

Thank you in advance!

Put this in a Free HTML element:

[ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

<a href="#"> (?) <span> <img class="callout" src="/wp-content/uploads/2013/01/callout.gif" /> <strong>Aerate for Healthier Turf</strong>Over time, soil becomes compacted which makes it hard for roots to grow.Having your lawn aerated is one of the best things we can do to promote healthier grass.</span> </a>

Obviously, change text as needed. You will need to download/ upload the little arrow image I used on my callout box, and then in your css, add this:

.callout {
    border: 0 none;
    left: -12px;
    position: absolute;
    top: 30px;
    z-index: 20;
}

I put that in my theme’s CSS, not in the Jazzyform CSS. That gets the little arrow to line up correctly with the box.

Hope that helps. I kind of just fumbled around till it worked, I’m no expert.

Oops, that html got parsed. Don’t know how to avoid that. Go to my page, and inspect the (?) element (right click in Firefox. You will see the code used there. Pretty much the same as above.

Don’t know how to avoid that.

Just use the code button or wrap the code in the backtick character. It’ll format a lot better if you do. ??

Thankyou! I try now, i let you know asap.

Ah the first part of html code got blocked, could you please post it again between the ‘ ‘

Thank you

Thanks, mods. Sorry bout that. I’m a noob.

Here it is again:

<a class="tooltip" href="#">
(?)
<span>
<img class="callout" src="/wp-content/uploads/2013/01/callout.gif">
<strong>Lawn Size Help</strong>
<br>
77% of our customer’s lawns are under 6,000 sq ft.
<br>
Just take your best guess, and we can adjust it later if necessary.
</span>

thanks for posting again.

something went worng ??

Probably i miss something, i think i followed right your instruction, was clear.

anyway, i added the code to my css (to the child theme of WP) , and then i added the free htm code up on my form elements, but it doesnt work and all turn orange…

https://www.silent-disco.it/preventivo-acquisto/#

Step 1_ upload the image: https://www.silent-disco.it/wp-content/uploads/2013/04/callout.gif

Step 2_ copy on style.css (i did in the child theme):

.callout {
    border: 0 none;
    left: -12px;
    position: absolute;
    top: 30px;
    z-index: 20;
}

Step 3_ In the elements of my form, i created a new element “free HTML”, and inside i copied:

<a class="tooltip" href="#">
(?)
<span>
<img class="callout" src="https://www.silent-disco.it/wp-content/uploads/2013/04/callout.gif">
<strong>Example</strong>
<br>
This
<br>
Works
</span>

So doing this it didnt work, for example , lets keep this tha tis pretty similar to yours:

https://www.silent-disco.it/modalita-di-noleggio/

here i used the toggle of shortcodes offered from my theme (which toggle content plugin did you use? if you used one plugin) , and inside i pasted the form shortcode.

all works, but not this tooltip.

For example, next to “Quantità” i want to put one (?) and when the mouse pass over the text: “lorem ipsum dolor” .

probably there is something im missing…

thank you for helping me…

I’m not sure I understand entirely. My (?) is in it’s own Free HTML Element that is just sitting next to some text. I recommend that you start with the tooltip just by itself.

I don’t see where you tried to put the tooltip. Put the code in a free html element, and put it in the form, and I’ll see if I can see what’s wrong.

Hi,

this is the link with the try page https://www.silent-disco.it/yt/

in the specific i want to put the (?) next to the title field “Quantità (minimo Set 50 Cuffie)”

and also next to the check box filed “Tecnico Specializzato”

And i want that, as you did on your website, with mouse over the custom text appear…

I hope i clearer now…

thank you a lot

My mistake. I have a WordPress Plugin called WordPress Tooltips.
Here: https://www.ads-software.com/extend/plugins/wordpress-tooltips/

I forgot I had used that. Makes it a little easier to customize.

But you should also be able to do this:

<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>

The “title” part makes it a tooltip, which is what you want. So either use this code to your needs, or install the plugin I mentioned above. It should work for you with either method. Good Luck.

Thank you for your patience!

I still didnt solve it, could you please post here the steps i should follow…

1_ Install The Plugin
2_edit style.css (i use i child theme) adding this:
`.callout {
border: 0 none;
left: -12px;
position: absolute;
top: 30px;
z-index: 20;
}`
3_ Upload the image tooltip arrow
4_ Edit my existing form, adding an element “free HTML” and adding inside this code:

<a class="tooltip" href="#">
(?)
<span>
<img class="callout" src="https://www.silent-disco.it/wp-content/uploads/2013/04/callout.gif">
<strong>Example</strong>
<br>
This
<br>
Works
</span>

I followed this steps as i wrote it, but it doesnt work.
My questions are, how did you set that (?) inside your form, at the right of the field?
Which toggle content did you use there (beause im using a native toggle of the theme)
Did you add some custom css in the form to make it works the (?) , did you add some custom css to some single element to let it work?

Thank you a lot!