Forums

Hello everybody,

I recently installed chronoforms (after a lot of trial and error) on my localhost. I have created a simple contactform using your tutorials (wich are great). When I look at the preview, it gives me what I created.
But when I publish the form there is a problem. I only get 2 textboxes visible out of the 7. The name of the textboxes is visible but not the place where you can fill it in. Also, I made sure that some textboxes are required, and the asterix is also not showing. How can I fix this problem?

I am using the latest joomla version and the latest Chronoforms version.
Mind you, I am a novice on the programming-stuf.

Kind regards,
Sven

Hi Sven,

Silly questions:
Are you sure that you added text boxes in the Wizard and not text?
Are the boxes there but not visible because they are styled with no borders?
Is the page on-line so we can take a look?

Bob

Hello Bob,

I know they are silly, but hey....even silly questions have to be asked.
Yes, I am sure that they are textboxes. Why? Because I made that mistake on my first form.
I know the boxes are there, because I can put information in it (after searching for the boxes), but indeed the borders aren't visible.
Unfortunatly I can't let you take a look, because the form is on my homecomputer and the site is on my localhost (at least for the moment).

Sven

Hi Sven,

You can edit the HTML in the Form HTML box on the Form Code tab to add the missing * and you can also check the styling there to see if there is some difference in the classes between the boxes that show and those that don't. (NB You will lose these changes if you use the Form Wizard to re-edit the form later.)

You can also use the Transform From icon on the Toolbar to apply a different style to your form.

Bob

Bob,

Thank you for the answer. But as said before, I am a novice when it comes to code writing and changing.
I will give it a try this weekend.

Are there some tutorials or something like it somewhere?

Sven

Hello Bob,

I have copied the code to a very old version of Dreamweaver and the boxes show there like they should. Except for the asterix.
I have included the code of the form:

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Contactformulier</h1>
  </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">Voornaam</label>
    <input class="cf_inputbox required" maxlength="100" size="35" 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">Achternaam</label>
    <input class="cf_inputbox required" maxlength="100" size="45" id="text_19" name="text_19" type="text" />
  
  </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">E-mailadres</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="35" 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">Telefoonnummer</label>
    <input class="cf_inputbox" maxlength="150" size="35" id="text_20" name="text_20" type="text" />
  
  </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label">Onderwerp</label>
    <select class="cf_inputbox validate-selection" id="select_9" size="1" {cf_multiple} name="select_9">
    <option value="">Choose Option</option>
      <option value="Informatie">Informatie</option>
<option value="Website">Website</option>
<option value="Sponsoring">Sponsoring</option>

    </select>
    
  </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label">Uw bericht</label>
    <textarea class="cf_inputbox required" rows="3" id="text_6" cols="30" name="text_6"></textarea>
    
  </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_captcha">
    <label class="cf_label">Vul de juiste code in</label>
    <span>{imageverification}</span> 
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Vul de juiste code in :: code</div>
    </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Verzenden" type="submit" />
  </div>
  <div class="clear"> </div>
</div>

Hope you can help me with this.

Hi Sven,

which one of those fields is not visible and needs the borders fixed ? this is a conflict with your template CSS by the way, I can't understand why they make some templates with white or no borders for inputs!!!

Cheers
Max

Hello Max,

Only the borders for the textarea and the dropdownlist are visible.

I am using the free Greenpeace template from Sitegrorund. I have changed the lay-out to get something more in the direction that I wanted (again with a lot of trial and error).

Sven

Hello guys,

I have just been trying out the different templates that I have installed. And with them all the textboxes show like they should. Only the asterix doesn't show.
But the template that I need doesn't show them. Or I use a different template or if somebody can help with the code so I can use my own template.

Sven

Hi Sven,

at the top of your form code add this piece:

<style media="all">
.cf_inputbox{
border: 1px solid #000;
}
</style>

let me know!

Cheers
Max

Hello Max,

That did the trick for my textboxes. However the textbox for the Captha-item still doesn't show. How can I add the border to that one?
Also how can I add the asterix to let them know the boxes are required.

Sven

Hi Sven

you need to add the astrix, either using the wizard while creating the form or through the HTML code box!

replicate my code above and replace the .cf_inputbox with #chrono_verification and it will work

Cheers
Max

Hello Max,

This worked and I now can see my boxes. Still have to figure out the asterix.

Sven