Forums

Hi everybody,

i know there are a few topics about it but I must confess that I got lost and I dno't know where to begin. I want to use my own submit button in chronoforms, I made an image button with rollover that fits the layout of my website.
Right now as you all know is the standard submit button, I have read that I have to change in the html and the css but...which of all :?

Please can someone be so kind to help me??
Thanks in advance and kisses from the freezing Holland,

Cristina

Hi Cristina,

Use a Custom Element element for the submit button and put your HTML inside it. Add the CSS to a Load CSS action in the On Load event.

Bob

Dear Bob,

I've being able to add in the css the style for my image and in the form wizard I put in the class the name i give it in the css. But I can see him yet, also if I check with firebug I see this:

.ccms_form_element input, textarea, input[type="file"] {
border: 1px solid #D3D3D3;
margin-bottom: 3px;
padding: 4px !important;
}
frontf...ght.css (regel 10)
.mysubmit {
background-image: url("../../../images/verzenden.png");
}

But what i'm missing???🙄

Any suggestions??
Thanks and kisses,
Cristina

Hi Cristina,

Do you see the image in FireBug when you hover over the URL?

background-image: url("../../../images/verzenden.png");

You probably need to put a full url path in here as relative URLs don't work well in Joomla! as you can't be certain what they are relative to.

Bob

Hi Bob,

yes i'm able to see the image on firebug but still i can't see him on the form.
On the submit form wizard i put this:

General

Name submit
ID
Text
Class mysubmit
Add Back Button
Back Button Text
Add Reset Button
Reset Button Text


But still I can't see the button 😶

Hi Cristina,

I thought you were going to use a Custom Element for the button?

Please post a link to the form so I can take a quick look.

Bob

http://www.driemeubelambachten.com/joomla/algemeen/contact

Here is the link to my website.
I also put this on the css:

.ccms_form_element .button {
background-color: transparent;
background-image: url("../../../images/verzenden.png");
background-repeat: no-repeat;
height: 90px;
width: 300px;
border:hidden;
}

.ccms_form_element .button:hover {
background-color: transparant;
text-decoration: none;
}

Thanks Bob

Hi Christina,

As I said you need to use a full URL and then to edit the rest of the CSS to match your button:

.mysubmit {
    background: url("/joomla/images/verzenden.png") repeat scroll 0 0 transparent !important;
    border: medium none !important;
    height: 103px;
    width: 211px;
}

Bob

oooooo Bob I could kiss you right now!!!!

muuuuuuaaaaaaaakkkkkkkkkk😀

May I ask you can the button have an hover/rollover??

Hi Christina,

Thank you.

How do you do a roll-over? What code is required?

Bob

Hi Bob

I add this to the css:
.mysubmit :hover{
background: url("/joomla/images/verzendenhover.png") repeat scroll 0 0 transparent !important;
border: medium none !important;
height: 103px;
width: 211px;
and this:
.ccms_form_element .button:hover {
background-color: transparent;
background-image: url("/joomla/images/verzendenhover.png");
background-repeat: no-repeat;
height: 90px;
width: 300px;
border:hidden;}


I know i'm missing something but where??? don't know??😑

Hi Christina,

I had a look but don't know what the problem is, sorry. From a Google search support for hover on input elements seems to be variable. You might be able to get it to work by changing the style with JavaScript.

Bob

I've just added this FAQ on adding an image based submit button with hover and disabled versions.

Bob