Forums

How do I put a heading in a form in Version 4. When I use Formatted Text it gives me a label for "Header" but the configuration option does not allow me to change it.

Hi julie.steffers,

You can just add any HTML that you need into the Code box e.g.:

<h3>My Header</h3>

There are some limitations, in particular, avoid using double quotes in the Formatted Text Code box; use the Custom Element element instead in this case.

Bob

Thanks Bob

I used the Custom Element element and it worked but it wrapped. How can I merge it across the form and also make it bigger?

Hi julie.steffers,

Check the Pure Code box to remove any ChronoForms HTML, then use CSS to style the result.

Bob

I am trying to import a form into Chronoforms V4 extension in a Joomla 3.0 site.
The form is originally based on a Wufoo form but I have added some of my own CSS and jQuery functions.
In the Chronoforms cookbook you give some statements which are to be added at the beginning of the custom html (with form tags omitted).
This is the code (slightly modified for my site) which you suggested adding:

<?php if ( !$mainframe->isSite()) { return; }
// define a url for the 'clubaero' folder
$clubaero_url = JURI::base() .'components/com_chronoforms/clubaero/';

// define a path for the 'clubaero' folder
$clubaero_path = JPATH_SITE.DS .DS.'components'.DS.'com_chronoforms'.DS.'clubaero'.DS;
$styles = $scripts = array();

// access the Joomla! Document object
$doc =& JFactory::getDocument();

// Add the CSS files
$doc->addStyleSheet($clubaero_url.'css/structure.css');
$doc->addStyleSheet($clubaero_url.'css/form.css');

// Add the JavaScript file
$doc->addScript($clubaero_url.'scripts/clubaero.js');
$doc->addScript($clubaero_url.'scripts/wufoo.js');
$doc->addScript('https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
?>

It seems that the code line:

$styles = $scripts = array();

does nothing! I suspect it is used to generate links to

bootstrap.min.css
bootstrap-responsive.css

from github, but these links are still generated even if I leave out the code line.

My problem is
1) that my CSS styling for the form <input> tags is overruled by the bootstrap.min.css
2) The links to my jQuery functions via DIV identifiers do not work anymore after the form has been implemented in Chronoforms custom html.
In the attachment I include the zipfile for my correctly working form, which I am trying to implement in the Chronoforms extension.
Does anyone know what I am doing wrong?

Hi christian.gibson,

The code should still work OK in Joomla! 3.0 . . .

Tidying up, this line is not needed (it was a fix for a problem in one release of CFv3):

if ( !$mainframe->isSite()) { return; } 

The <?php at the start is still needed.

As you say, this line also isn't needed (the variables it sets up aren't then used).

$styles = $scripts = array();

You probably don't need this line as JQuery is loaded by Joomla! instead:

$doc->addScript('https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');

Nor is the $clubaero path used here so that can go too.

So the cleaned up code is:

<?php
// define a url for the 'clubaero' folder
$clubaero_url = JURI::base() .'components/com_chronoforms/clubaero/';

// access the Joomla! Document object
$doc =& JFactory::getDocument();

// Add the CSS files
$doc->addStyleSheet($clubaero_url.'css/structure.css');
$doc->addStyleSheet($clubaero_url.'css/form.css');

// Add the JavaScript file
$doc->addScript($clubaero_url.'scripts/clubaero.js');
$doc->addScript($clubaero_url.'scripts/wufoo.js');
?>

Handling bootstrap is more difficult :-(

This is the neat styling library that Joomla! has added in version 3.0 The problem is that unless your form specifically sets the CSS to over-ride bootstrap then the bootstrap CSS will be applied. And the form CSS has to be loaded after the bootstrap file - but Joomla! provides no way of managing this :-(

I am working on a little script to get Bootstrap to work with ChronoForms, it may be that I will learn enough to work out how to stop BootStrap over-riding ChronoForms as well . . .

Bob

The only answer I know of so far is to mak

Thanks for this answer - sorry for the double posting. I have also found a solution. My link to the the jquery.min.js via googleapis was placed after the links to my own jquery functions:

$doc->addScript($clubaero_url.'scripts/clubaero.js');
$doc->addScript($clubaero_url.'scripts/wufoo.js');
$doc->addScript('https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');

By moving the link up so that it is executed first, my jquery functions in the form are now working properly:

$doc->addScript('https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
$doc->addScript($clubaero_url.'scripts/clubaero.js');
$doc->addScript($clubaero_url.'scripts/wufoo.js');

but as you say, maybe I don't need the link at all!

The other problem you mention has not yet been solved. You point out that the bootstrap.min.css stylesheet overrides my own form style settings. I have indeed noticed that in my form the field <input id="Field10" name="Field10" type="text" class="field text" value="" size="5" maxlength="5" ></input>
gets a width van 210px in the bootstrap css:
input, textarea (
width: 210px;
}
I want to set the field to a width of 50px, but I still haven't found out how to do this 😟

Hi christian.gibson,

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

Bob

Concerning the order in which the links to the javascript files are placed, I do seem to need the link to jquery (before the links to my own js files).

Hi christian.gibson,

Yes, jQuery has to be loaded first so that the jQuery functions are defined before they are called.

Bob

For anyone who is concerned with the second problem - in joomla 3.0, bootstrap.min.css overrides my own css form settings. My solution is to define my element style properties inline:
<html element style="attribute: your_setting"></html element>.
It would however be nice if my own css file link could be generated in the form page after the bootstrap.min.css file link (which is probably generated by the page template?)

Hi christian.gibson,

This may help . . . it's part of the code I've written. This version is set up to load the BootStrap CSS file after the template but can be modified to work the other way round.

window.addEvent('domready', function(){
  var frontforms_css, template_css;
  frontforms_css = $$('link[href$="frontforms.css"]')[0];
  frontforms_css.setProperty('href', '');
  template_css = $$('link[href$="template.css"]')[0];
  bootstrap_css = new Element('link',
  {
    type: 'text/css',
    href: 'media/jui/css/bootstrap.min.css',
    rel: 'stylesheet'
  });
  bootstrap_css.inject(template_css, 'after');
});

Bob

Many thanks for this code - I'm learning as I go along. In the protostar template (standard in Joomla 3.0) it looks initially as if bootstrap.min.css is not loaded at all!
The code line:
JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction);
calls the loadCss function from bootstrap.php (see github) with the $includeMaincss argument set to false.
In the meantime however I have noticed that the bootstrap.min.css is actually built into the protostar template.css file 😟

Hi christian.gobson,

You are right. I'd forgotten that the bootstrap.css wasn't loaded - but the JavaScript that I've added will load it into the page right after the template.css.

Bob

Hi christian.gibson,

I've put my development BootStrap form on-line here so you can see what is working so far.

Note: this has a later version of the code than the one in the FAQs.

Bob

Hi Bob,
Sorry i haven't worked out how to find the right topic (or make a new topic) to post a question, but your help on the heading problem and overruling bootstrap in Joomla 3.0 was really great. Finally I solved all the problems on my wampserver configuration, but when I uploaded the joomla3.1 website to my web host, the form no longer shows in the website.
You can see the problem online in http://clubaero.gibson.nl. If you click the link to the membership form (either at the bottom of the first article or via the menu link, then the form fails to show. In the attached file I have included the first lines of the the form page html generated on my laptop version and in the web hosted version.

My web hosting company told me this:
In the log I see the following message (presumable a PHP log?)
[16-Apr-2013 11:20:48 UTC] PHP Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING in /home/gibson/domains/gibson.nl/public_html/clubaero/administrator/components/com_chronoforms/form_actions/show_html/cfaction_show_html.php(142) : eval()'d code on line 3

Have you any idea what the problem could be?
Regards
Christian

In the meantime I found this question which Bob has already answered.
http://www.chronoengine.com/faqs/2662-how-can-i-make-my-php-portable-to-another-site.html
It may offer a solution for some of the URL problems, but it doesn't seem to have solved this one yet

I forgot that you probably need the user name and password for the back-end of the website. Do you have an email address where I can mail the user name and password?

Hi christian.gibson,

Line 142 of that file is where the main form HTML is evaluated. What are the first few lines in the HTML Code box on the for Code tab? (Click the form name link in the Forms Manager to get to it.)

Bob