Forums

Greetings to all forum members...

I have used chronoforms to produce a registration from to a non-profit organization. I had some trouble getting it figured out, but finally it works well.
I do have some issues and a display question:

Issue
The "confirmation page" does not work, I can't get the form to display the entered data for verification. There aren't much options for me to screw up, so I don't know what could be at fault or what else I need to do.

Question
The font size used to create the form is just too big form my liking, it takes up much space and it is does not blend well with the other site content...
So, how can I get the form to display in regular size 12 font, as would an article content be displayed?

Thanks a lot.

P.S.: Noob alert...do not assume I know how to create html code, add or change markup language etc...if you'd like to help, please be descriptive and you'll get a big THANK YOU in return

Hi PierreB,

do not assume I know how to create html code, add or change markup language etc.

You may need to find someone two help you who is OK with these things.

The font size is set in components/com_chronocontact/themes/default/css/style1.css

Not sure about the Confirmation page plugin. What do you have in the Confirmation Page code box?

Bob

Thanks a lot Bob, locating that css file was enough for me to do the most of what I wanted...
I am a total noob, but (or and?) if I don't have to write code myself, I understand what changes I need to make to already existing settings, more or less...

What I have been unable to do, however, was to decrease the distance between the start of the mainbody of Joomla's template and the form's title...

Any idea how I could do it?

Help much appreciated

You may need to find someone two help you who is OK with these things.

sadly, I am the most willing of the bunch, so waiting for someone more appropriate to do it, means leaving things as they are for a non-fixed period of time...

EDIT
Another thing...when editing a form, in the plugins tabs, all the plugins are displayed red with little green check icon on the right...if one clicks on the check icon, the plugin becomes green and a small red "x" is displayed where that little check sign was...
Initially, I thought that in order to enable the plugins I wanted, I had to tick that check and turn the plugin in green, this meaning that it has been enabled...
But testing the form, I have seen that it doesn't work if these become green...that's strange from a user point of view...

Not sure about the Confirmation page plugin. What do you have in the Confirmation Page code box?

Well, actually I had nothing written in it...I thought anything necessary would be added, when it is enabled...I guess I was wrong...

Hi PierreB,

But testing the form, I have seen that it doesn't work if these become green...that's strange from a user point of view...

Agreed, it'a an awful piece of UI - and much reported here. I think that Max's logic was that the bar color reflects the current state and the icon shows the result of the action.

You can change the spacing a couple of ways, by changing the heading style from <h1> to <h2> or <h3>; or by overriding the 25px top padding on he H1 tab. This is set in your template CSS but you probably don't want to change that. You can override it with some custom CSS just for the form.

Bob

You can change the spacing a couple of ways, by changing the heading style from <h1> to <h2> or <h3>; or by overriding the 25px top padding on he H1 tab. This is set in your template CSS but you probably don't want to change that. You can override it with some custom CSS just for the form.

Thank you for your answer, Bob.

I believe it is a bit different, because the articles' titles appear quite higher than the title of the form, that's why I thought it might have to do with some setting within Chronoforms...

e.g. compare the positioning of the form's title, with other ones
http://www.eks-ik.eu/component/chronocontact/?chronoformname=Registration
http://www.eks-ik.eu/

Hi PierreB,

The Title on the article page isn’t an HTML heading

<td width="100%" class="contentheading">
                    Διάλεξη: "...με τα βότανα τση γης γιατρεύουνται τα πάθη...". Μια περιήγηση στον κόσμο των κρητικών βοτάνων            </td>

You could try putting the ChronoForms title into a <p class='contentheading'>Title</p>

In this case ChronoForms is doing the job properly and the article template is not :-(

Bob

PS Get FireBug in FireFox to see the HTML and CSS clearly.

Will try that thank you...

For the moment I have completely removed the title, and the fields of the form appear properly up there on a usual distance from the top of the mainbody...

I also tried another solution, of omitting the title in the form and embedding the form in an article, where the title would appear as in any other article...
And it worked fine...the added gain was that the Joomla Icons for "email", "pdf" etc where displayed, adding that functionality (these do not appear when creating a Chronoforms menu link from the menu manager)...

However, something strange happened...in one of the tooltips I have entered the Association's email address...when the form was embedded in an article an extra text was displayed saying "this email address is protected, you have to enable Javascript" etc...
The weird thing is, the email address was displayed even so...and I had enabled javascript in the page, so this text should not have been there in the first place

The form worked properly, embedded in the article, but this little thing put me off, it was something that was not supposed to appear, so I used the menu link instead.



I also noticed something else (not limited to the case where the form is embedded in an article) which seems like an issue (?):

When one omits a field, a red bold text is displayed, the validation message, which informs the user that this field has not been completed (one can customize the exact content of this attention message)
However when this text is displayed, the length of the forms increases; as a result the lower part of the form can go off bounds(see picture)

It would be nice if a way was found to prevent this...i.e. by making the text appear within the form field, or by just making the form red, by displaying that text in smaller font size to limit the effect or something else...

Another observation: Whereas this text appears on the right and underneath the forms fields lined up with the answer column width when these fields are textboxes, if a textarea field is used, then the text displays on the right and underneath the field, but not lined up vertically with the answer column, but on the left of the page, underneath the question column...

I played with settings a little bit and realized that the font-size of this attention or error message text, is the same as the one used for the rest of the form, i.e. one cannot make this text smaller by itself.


I hope my descriptions were adequete and did not confuse you.

I wanted to add the renew/reload image verification button, so following the guide in the FAQ, I searched and found the "chronocontact.php"...
The FAQ answer said that within this file, the user must find this code

if ( trim($paramsvalues->imagever) == 'Yes' ) {
  $imver = '<input name="chrono_verification" type="text"
    id="chrono_verification" value="">
  <img src="'.$mosConfig_live_site
            .'/components/com_chronocontact/chrono_verification.php">';
}

And replace it with this code:

if ( trim($paramsvalues->imagever) == 'Yes' ) {
    $imver_url = $mosConfig_live_site
        .'/components/com_chronocontact/chrono_verification.php?imtype='
        .$paramsvalues->imtype;
    $imver = '<script type="text/javascript">
        function RefreshImageVer(imgverform) {
            var randnum = Math.random();
            var newverimage = \''.$imver_url.'\'+randnum;
            imgverform.imgver.src=newverimage;
        }
        </script>
        <input name="chrono_verification" type="text" id="chrono_verification" value="">
            <img src="'.$imver_url.'" name="imgver" id="imgver">
        <input type="button" value="refresh" onclick="RefreshImageVer(this.form);" />';
}

But in my chronocontact.php the original code isn't there at all...is this part of the FAQ outdated or what could be wrong in my case?

Hi PierreB,

I think the guide in the FAQ is for changing the layout of the captha block.

To include it, turn imageveriifcation on in the Anti_Spam tab, and add {imageverification} to your Form HTML

Bob

it would be strange if it is so, I mean the title "How can I add a refresh button for ImageVerification" is quite misleading if it is not for adding the ability to refresh the image shown for verification.

I already have image verification in my form and it works ok...

Hi PierreB,

I'm sorry, I was in a hurry and misread your post :-(

Still in a hurry. The correct code in on page 125 of the ChronoForm Book - it's in the free chapter you can download here

Bob

Thanks once again Bob,
I Will take a look and report back if any problem arises

I would like to re-report something that I wrote above, but it seems that I was not understood...

In the part of the manual that you linked it says

Remember, the color of the bar shows the plugin status—red is
disabled, green is enabled. The icon to the right shows the "click
action". Click the "tick" to enable the plugin, click the "x" to disable it.

That's exactly what I thought when I say that tab...

...the strange functional problem that I reported above was that when I tick the bar of the plugin I want to use and it becomes green, it is then that it won't work
e.g. if I tick the Recaptcha verification bar and it becomes green, I cannot send/submit the form, it always displays an error message as if I had entered wrong verification code (not the case)

The paradoxical issue I reported above was just that...that it works the other way around, and not the one the user would expect.

EDIT

The above seems to happen for the Recaptcha plugin only...

Also, when one clicks the submit button but he's left something out, then even if he enters the verification code correctly, it will show an error message, that he's entered wrong code...
It seems that the image should be reloaded and it isn't, however, a code different from the one displayed is needed...

To summarize green bar = not working / red bar = it works.
And that's strange...


EDIT 2

If I want the user to confirm his input, and enable the plugin and paste the email template code in the box in the confirmation plugin page, and even if I have enabled the "show buttons" setting, these button do not appear in my form

EDIT 3

...the strange functional problem that I reported above was that when I tick the bar of the plugin I want to use and it becomes green, it is then that it won't work
e.g. if I tick the Recaptcha verification bar and it becomes green, I cannot send/submit the form, it always displays an error message as if I had entered wrong verification code (not the case)

The paradoxical issue I reported above was just that...that it works the other way around, and not the one the user would expect.

EDIT

The above seems to happen for the Recaptcha plugin only...

Also, when one clicks the submit button but he's left something out, then even if he enters the verification code correctly, it will show an error message, that he's entered wrong code...
It seems that the image should be reloaded and it isn't, however, a code different from the one displayed is needed...

To summarize green bar = not working / red bar = it works.
And that's strange...

I think I got it (maybe I'm slow)...that's for the third party recaptcha plugin, right?

EDIT 4

I followed the guide to embed a reload verification button...but it has bad effect in the form's display....namely the tooltip button almost disappears (picture)

Hi PierreB,

Is this all working now or is there still a problem with the ToolTip image?

If so, please post (or PM) a link to the form so we can take a quick look.

Bob

Hi, sorry to delay posting back...

Actually, there are two problems that still persist...
1) The first comes about when verification is checked before submitting the form...the message that appears to inform about the need to complete a given field pushes the following button downwards (that is, if it wont fit to the right of the field)...

But since the page size is automatically formed - size-wise - to include only enough space for the lines entered, without accounting for the verification messages, both the submit and reload verification buttons, that is generally the buttons and fields that are at the bottom of the form, can go out out of bounds...(there is pic above to display this)

2) When the reload verification button is enabled and one pushes is, the image that appears (besides being of different size from the original - see above pic) kind of changes the positioning of tooltip button, which is pushed downwards but only by itself (doesn't do the same for the following fields as in the first problem), making it disappear almost completely...

I have worked around these problems by removing the reload verification button and enabling the javascript in parameters and having it check if the fields are filled only once the submit button is pressed...

Hi PierreB,

Hard to be precise without seeing the form itself but I think that these are all problems that can be corrected by adjusting the CSS, or using the alternative ways of showing the validation messages (se herefor example. I think these are in the sample chapter I linked to earlier.

Bob