Forums

Hi guys,

I have been asked to add a contact form to a Joomla site, and am trying to use ChronoForms but am experiencing issues.

The URL is: http://www.earls.com.au/joomla/index.php?option=com_chronocontact&Itemid=49

Every time I publish a form and view it in the front end, I get the big blank space between the first and second item as you can see.

Would anyone have any suggestions on how to remove this?

If I can get rid of it I'll be paying that $25 to keep using Chrono without the link at the bottom. 🙂

Hi sbor,

there is something in the template interferes with the CSS of the form, can you please copy and paste here the form code at the HTML code box of your final form ? I will show you how to fix this!

Regards

Max

Hi sbor,

The gap is caused because the height of the first item is matching the height of the menu to the left. You probably need to over-ride the height:auto setting for that form element.

Bob

Hi guys, thanks very much for your prompt response.

Firstly, below is the code for the form as requested.

<div  class="form_item"><div class="form_element cf_text"><span class="cf_text">Earl's can be contacted via our Enquiry form, or via the more traditional phone or email methods.</span></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Name</label><input class="cf_inputbox required" maxlength="150" size="30" id="text_11" name="text_11" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Email Address</label><input class="cf_inputbox required validate-email" maxlength="150" size="30" id="text_13" name="text_13" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textarea"><label class="cf_label">Address</label><textarea class="cf_inputbox" rows="2" id="text_12" cols="30" name="text_12"></textarea></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Suburb</label><input class="cf_inputbox" maxlength="150" size="30" id="text_18" name="text_18" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">State</label><input class="cf_inputbox" maxlength="150" size="30" id="text_17" name="text_17" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Postcode</label><input class="cf_inputbox" maxlength="150" size="30" id="text_15" name="text_15" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Country</label><input class="cf_inputbox required" maxlength="150" size="30" id="text_14" name="text_14" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Vehicle Make</label><input class="cf_inputbox" maxlength="150" size="30" id="text_20" name="text_20" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Vehicle Model</label><input class="cf_inputbox" maxlength="150" size="30" id="text_22" name="text_22" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textarea"><label class="cf_label">Enquiry</label><textarea class="cf_inputbox required" rows="8" id="text_16" cols="30" name="text_16"></textarea></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_button"><input value="Submit" name="undefined" type="submit"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_heading"><h1 id="" class="cf_text">Alternate Contact Methods</h1></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_text"><span class="cf_text">Click me to Edit</span></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_text"><span class="cf_text">Click me to Edit</span></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_text"><span class="cf_text">Click me to Edit</span></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_text"><span class="cf_text">Click me to Edit</span></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_text"><span class="cf_text">Click me to Edit</span></div><div class="clear"> </div></div>

Sorry GreyHead, I'm quite the novice with Joomla, and am not sure how to change that setting. Would you please be able to explain the solution a little further?

Thanks very much.

Hi sbor,

lets try Bob's idea first, open this file : components/com_chronocontact/css/style1.css

find .form_item at about line 132 and you will see that one of the css styles assigned to it is height :auto; try to make it height :20px; then save the file and see if works.

other than this you may try to backup the current code you have here, and add this code instead and see if it will work :

    <div  class="form_item"><div class="form_element cf_text"><span class="cf_text">Earl's can be contacted via our Enquiry form, or via the more traditional phone or email methods.</span></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Name</label><input class="cf_inputbox required" maxlength="150" size="30" id="text_11" name="text_11" type="text" />
</div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Email Address</label><input class="cf_inputbox required validate-email" maxlength="150" size="30" id="text_13" name="text_13" type="text" />
</div></div><div  class="form_item"><div class="form_element cf_textarea"><label class="cf_label">Address</label><textarea class="cf_inputbox" rows="2" id="text_12" cols="30" name="text_12"></textarea></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Suburb</label><input class="cf_inputbox" maxlength="150" size="30" id="text_18" name="text_18" type="text" />
</div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">State</label><input class="cf_inputbox" maxlength="150" size="30" id="text_17" name="text_17" type="text" />
</div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Postcode</label><input class="cf_inputbox" maxlength="150" size="30" id="text_15" name="text_15" type="text" />
</div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Country</label><input class="cf_inputbox required" maxlength="150" size="30" id="text_14" name="text_14" type="text" />
</div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Vehicle Make</label><input class="cf_inputbox" maxlength="150" size="30" id="text_20" name="text_20" type="text" />
</div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Vehicle Model</label><input class="cf_inputbox" maxlength="150" size="30" id="text_22" name="text_22" type="text" />
</div></div><div  class="form_item"><div class="form_element cf_textarea"><label class="cf_label">Enquiry</label><textarea class="cf_inputbox required" rows="8" id="text_16" cols="30" name="text_16"></textarea></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_button"><input value="Submit" name="undefined" type="submit" />
</div></div><div  class="form_item"><div class="form_element cf_heading"><h1 id="" class="cf_text">Alternate Contact Methods</h1></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_text"><span class="cf_text">Click me to Edit</span></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_text"><span class="cf_text">Click me to Edit</span></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_text"><span class="cf_text">Click me to Edit</span></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_text"><span class="cf_text">Click me to Edit</span></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_text"><span class="cf_text">Click me to Edit</span></div><div class="clear"> </div></div>

let me know

Regards

Max

Hi Max,

Thanks for your suggestions. Here is a summary of what I've found.

height:auto; OLD code - Each input box has it's own line, gap between "Name" and "Address".
height: 20px; OLD code - Same as above.
height: 20px; NEW code - Inputs have been rearranged a little, some share the same line. Gap is now between intro text and Name (first input box).
height: auto; NEW code (Current setting still live on site) - Same as above.

So, it would appear that changing the height setting did not have an affect, but changing the code did.

Any ideas?

Could it be something within the template CSS of the main menu affecting the layout?

Thank you very much.

Hi sbor,

Ok, we get back to the old code and make it

20px!important;

instead of only

20px;

let me know

Regards

Max

I've come across a much more serious problem now.

It would seem that my "20px" change earlier didn't make a difference... because the file didn't upload properly!

I'm having permissions issues like this guy here: http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=2&t=10588

I've tried CHMOD'ing through FileZilla, CuteFTP, and the cPanel File Managers (both Legacy and regular).

com_chronocontact is the only folder I'm having the issue with - I assume Joomla has does something strange with the files when I used the auto-install method.

Any ideas?

Update:

Got sick of trying to fix permissions, so I uninstalled ChronoForms, repacked it with the updated CSS (20px) and reinstalled it.

Gap problem remains.😟

Hi sbor,

at my last message I mentioned that you will need to try 20px!important; instead!

regarding the upload issue, I think your Joomla installation uses a different owner than your FTP's one, so you can't overwrite its files, try to use joomlaexplorer extension to overwrite files or contact your web host and ask them about changing the joomla site files owner, I know this is an annoying problem, if you have SSH access to your files then I can tell you how to do it!

Regards

Max