Add a CSS class to a form?

ca

camerata 10 Jun, 2014

I would like to add a new class atribute to a form (in addition to the class="Chronoform"). Is it possible?

ca

calculus00 10 Jun, 2014

Hello camerata,
I'm not a Chrono professional, but after checking your new post, I think that the following links may help:
How can I add CSS to my form?
P.S: I'm just an automated service😉

ca

camerata 10 Jun, 2014

Thanks for the authomatic reply but I don't need to add a css style but a TAG to the <form>."class".

Could anyone help?
Thanks in advance.

Gr

GreyHead 10 Jun, 2014

Hi camerata,

In CFv4 probably only with JavaScript; or by hacking the ChronoForms core code.

Bob

ca

camerata 10 Jun, 2014

Thanks, Bob.
Please let me know what file to hack!

Is this feature possible with CF5?
Excuse my panic to update. If so, will I must change or make new code or actions? I have not much forms but they have a lot of code...

Thanks in advance.

Max_admin 11 Jun, 2014

This is not possible in v5 as well, please use the JS method as suggested by Bob, or simply use the default Chronoform class!

Regards,
Max

Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?

Gr

GreyHead 11 Jun, 2014

1 Likes

Hi camerata,

What do you need to do here? There may be another way to get the same result.

Using JavaScript this should do what you need (add it to a Load JS action in the form On Load event):

window.addEvent('domready', function() {
  $('chronoform_form_name').addClass('class_name');
});

Replace form_name and class-name with the values you need.

Bob

ca

camerata 11 Jun, 2014

Thanks, Bob.
I need to use the style features for forms of my Joomla template where a group of 'form.class' are defined. Really I would like to avoid charge the chronoforms css files; my forms are all designed with custom code..

Following your suggestion, I add the JS action and I get this code at the page header. The form name is 'subscribe' and the class to add the form is 'prueba'. Please, let me know if it is correct.

<script type="text/javascript">
		//<![CDATA[
			window.addEvent('domready', function() {
  $('subscribe').addClass('prueba');
});		//]]>
		
  </script>

Thanks in advance.

Gr

GreyHead 11 Jun, 2014

1 Likes

Hi camerata,

You don't need the script tags, the Load JS action will add those.

You do need the chronoform_ in the id

window.addEvent('domready', function() {
  $('chronoform_subscribe').addClass('prueba');
});

Bob

ca

camerata 11 Jun, 2014

Thanks, Bob.
My code just is the result in the <head> page tag.

Something is wrong in your JS sugestion since nothing change. The form has the same unique 'Chronoform' class and the '.prueba' definitions in .css file have not efect.

Gr

GreyHead 11 Jun, 2014

Hi camerata,

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

Bob

ca

camerata 11 Jun, 2014

Sorry, by the moment the site is only in local mode.

I figure out that you want to add the "prueba" class to the form via JS but this code doesn't work.

Gr

GreyHead 11 Jun, 2014

Hi camerata,

OK, I understood that it wasn't working, but the JavaScript looks OK so I guess that there is some kind of error on the page. You should be able to debug it without any great difficulty.

Bob

ca

camerata 11 Jun, 2014

Checking the page no errors are detected.

Max_admin 14 Jun, 2014

please make sure you are checking the form using FireBug, you will not see any changes if you try to view the page source.

Regards,
Max

Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?

ca

camerata 14 Jun, 2014

Off course. It was checked with firebug and no errors was detected.

Max_admin 15 Jun, 2014

I mean checking the form to make sure that the class was added to it ?

Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?

ca

camerata 15 Jun, 2014

Thanks, Admin.
The JS code seems don't work. The form code has not the added class (tested with FireFox & GoogleChrome).

Gr

GreyHead 15 Jun, 2014

1 Likes

Hi camerata,

The JavaScript is OK - you can see it working here to add the blue border round the form. As your form is offline there really is little else we can do to help you debug it.

This form has the JavaScript I posted in a Load JS action and this CSS in a Load CSS action both in the On Load event before the Show HTML action.

.prueba {
  border: 2px solid blue;
}

Bob

mi

mirphi 09 Sep, 2014

Camerata,

Try using chronoform-subscribe instead of chronoforms_subscribe (where 'subscribe' is replaced by whatever your current form name is). Works like a charm.

Thank you GreyHead. ChronoForms V5 is really impressive so far. I just started playing with it and it really is terrific.

Forums

Add a CSS class to a form?