Images in Forms

Hi everybody,

is it possibile to set images in forms like in breezingforms? I have a form with ca. 30 images, is this possible to realize with ChronoForms?

Thanks for your answers.

greetings
pod

Hi pod2010,

I've no idea what breezing forms does so can't answer that bit.

ChronoForms forms are plain html so anything that you can add in html - including images - you can add in a form.

Bob

Hi,

thanks for your fast answer, but how can I include html in my form? I only use this drag and drop-editor, which is very useful (esspecially if clients want to change something later).

greetz

Hi pod2010,

You could possibly add a custom element to add an image - don't know if it would work though, I've never tried.

Or you can edit the From HTML in the Form Editor | Form Code tab which gives you full control.

Bob

Hi,

yeah it's possible to edit the form with html. But after changing something in the wizard your html changes will be lost. Not very practical...

Concerning a Custom Element: I tried to add an "Image-Element", but I don't know what code I have to add? Ideas??

greetz

Hi pod2010,

It depends what you want the element to do but

<img src='images/stories/{image}' />

works OK with me. Define image as a parameter in the box at the bottom of the dialogue.
You may want more HTML than this though . . .

If you need to be able to use the Wizard to update a form and want to hand-code it then take a copy of the form to use with the Wizard, make your changes by hand. In the future make changes in the backup copy with the Wizard then use a file compare tool to merge them into the 'live' version. Sounds long-winded but it works OK.

Bob

hi bob,

thx for your help. i solved it by editing the html code (after talking to my client😉 ).

but now i have another problem:
for the contact details at the bottom of my form i built an easy contact form with the wizard and afterwards i copied the html code to my form. it works fine, but the required fields got lost and i don't know how to solve ist.

you can see the form here:
http://wd-gmbh.de/index.php?option=com_chronocontact&chronoformname=Angebotsanfrage

have you any idea?

Hi pod2010,

Yes, something in your tempalte breaks it. See here without the template.

Bob

Oh yeah i see it. But what could it be?

Here's the html code of the whole form:

  <div class="form_element cf_heading">
    <h3 class="cf_text">Angebotsanfrage</h3>
  </div>
  <div class="cfclear"> </div>
</div>

  <div class="form_element cf_text"> <span class="cf_text"><b>In 5 Schritten zu Ihrem individuellen Angebot.</b> </span> </div>
  <div class="cfclear"> </div>


  <div class="form_element cf_text"> <span class="cf_text">Wir erstellen Ihnen ein individuelles und unverbindliches Angebot mit Prospektmaterial. Tragen Sie einfach nur Ihre Daten ein und klicken Sie anschliessend auf "Anfrage senden". Die Unterlagen gehen Ihnen umgehend zu.  Bitte haben Sie Verständnis dafür, das nur Anfragen aus Deutschland, Österreich und der Schweiz bearbeitet werden.</span> </div>
  <div class="cfclear"> </div>

  <div class="form_element cf_heading">
    <h4 class="cf_text">Analogfunkgeräte</h4>
  </div>
  <div class="cfclear">
</div>

  <div class="form_element cf_heading">
    <h5 class="cf_text">Commercial Series</h5>
  </div>
  <div class="cfclear">
</div>

<div class="form_element cf_heading">
    <h6 class="cf_text">Fahrzeuggeräte</h6>
  </div>
  <div class="cfclear">
</div>

<div class="img-com1">
<div class="img">
<img src="images/bilder_funk/cm340-web.png" width="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/cm360-web.png" width="150px" alt="test" float="left"></div>
</div>

<div class="labels">
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="CM340" title="CM340" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">CM340</label>
 </div>
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="CM360" title="CM360" class="radio" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">CM360</label>  
    </div>  
</div>


  <div class="form_element cf_heading">
    <h6 class="cf_text">Handgeräte</h6>
  </div>
  <div class="cfclear">
</div>

<div class="img-com2">
<div class="img">
<img src="images/bilder_funk/CP040-4Kanal.png" height="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/CP040-16Kanal.png" height="150px" alt="test" float="left"></div>
</div>

<div class="labels">
  <div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="CP040-4Kanal" title="CP040-4Kanal" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">CP040 4 Kanal</label>
 </div>
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="CP040-16Kanal" title="CP040-16Kanal" class="radio" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">CP040 16 Kanal</label>  
    </div>  
</div>

  <div class="form_element cf_heading">
    <h5 class="cf_text">Feuerwehr (FUG)</h5>
  </div>

<div class="img-com3">
<div class="img">
<img src="images/bilder_funk/gp360fug.png" height="150px" alt="test" float="left"></div>
</div>

<div class="labels">
  <div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="gp360fug" title="gp360fug" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">GP360 GUF</label>
 </div>
</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h5 class="cf_text">Motorola Professional Radio</h5>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_element cf_heading">
    <h6 class="cf_text">Fahrzeuggeräte</h6>
  </div>
  <div class="cfclear">
</div>

<div class="img-com4">
<div class="img">
<img src="images/bilder_funk/gm340-web.png" width="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/gm345-taxi.png" width="150px" alt="test" 
float="left"></div>
<div class="img">
<img src="images/bilder_funk/gm360.png" width="150px" alt="test" float="left">
</div>
</div>

<div class="labels">
  <div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="gm340" title="gm340" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">GM340</label>
 </div>
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="gm345-taxi" title="gm345-taxi" class="radio" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">GM345-Taxi</label>  
    </div>  
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="gm360" title="gm360" class="radio" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">GM360</label>  
    </div>  
</div>


<div class="img-com5">
<div class="img">
<img src="images/bilder_funk/gm365.png" width="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/gm380.png" width="150px" alt="test" 
float="left"></div>
</div>

<div class="labels">
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="gm365" title="gm365" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">GM365</label>
 </div>
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="gm380" title="gm380" class="radio" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">GM380</label>  
    </div>  
</div>

<div class="form_element cf_heading">
    <h6 class="cf_text">Handgeräte</h6>
  </div>
  <div class="cfclear">
</div>

<div class="img-com2">
<div class="img">
<img src="images/bilder_funk/gp330-web.png" height="150px" alt="test" 
float="left"></div>
<div class="img">
<img src="images/bilder_funk/GP340-web.png" height="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/gp340atex.png" height="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/gp344r-web.png" height="150px" alt="test" float="left"></div>
</div>

<div class="labels">
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="gp330" title="gp330" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">GP330</label>
 </div>

<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="gp340" title="gp340" class="radio" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">GP340</label>  
    </div> 
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="gp340atex" title="gp340atex" class="radio" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">GP340 Atex</label>  
    </div>  
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="gp344r" title="gp344r" class="radio" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">GP344 R</label>  
    </div>  
</div>

<div class="img-com2">
<div class="img">
<img src="images/bilder_funk/gp344-web.png" height="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/GP360-web.png" height="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/GP380-web.png" height="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/gp380atex-web.png" height="150px" alt="test" float="left"></div>
</div>

<div class="labels">
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="gp344" title="gp344" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">GP344</label>
 </div>
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="gp360" title="gp360" class="radio" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">GP360</label>  
    </div> 
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="gp380" title="gp380" class="radio" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">GP380</label>  
    </div>  
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="gp380atex" title="gp380atex" class="radio" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">GP380 Atex</label>  
    </div>  
</div>

<div class="img-com2">
<div class="img">
<img src="images/bilder_funk/gp388-web.png" height="150px" alt="test" float="left"></div>
</div>

<div class="labels">
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="gp388" title="gp388" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">GP388</label>
 </div>
</div>


<div class="form_item">
  <div class="form_element cf_heading">
    <h4 class="cf_text">Digitalfunkgeräte</h4>
  </div>
  <div class="cfclear"> </div>
</div>
<div class="form_item">
  <div class="form_element cf_heading">
    <h5 class="cf_text">Handfunkgeräte</h5>
  </div>

<div class="img-com3">
<div class="img">
<img src="images/bilder_funk/dp3400-web.png" height="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/dp3600-web.png" height="150px" alt="test" float="left"></div>
</div>

<div class="labels">
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="dp3400" title="dp3400" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">DP3400</label>
 </div>
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="dp3600" title="dp3600" class="radio" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">dp3600</label>  
    </div>  
</div>



<div class="form_item">
  <div class="form_element cf_heading">
    <h4 class="cf_text">Repeater</h4>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="img-com1">
<div class="img">
<img src="images/bilder_funk/dr3000-web.png" width="150px" alt="test" float="left"></div>
</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h4 class="cf_text">Tetra Digitalfunkgeräte</h4>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h5 class="cf_text">BOS (FUG)</h5>
  </div>
</div>

<div class="img-com3">
<div class="img">
<img src="images/bilder_funk/mtm800e-web.png" width="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/MTP850-web.png" height="150px" alt="test" float="left"></div>
</div>

<div class="labels">
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="mtm800e" title="mtm800e" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">MTM800 E</label>
 </div>
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="mtp850" title="mtp850" class="radio" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">MTP850</label>  
    </div>  
</div>



<div class="form_item">
  <div class="form_element cf_heading">
    <h5 class="cf_text">Fahrzeuggeräte</h5>
  </div>
</div>

<div class="img-com3">
<div class="img">
<img src="images/bilder_funk/MTM800-web.png" width="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/MTM800remote-web.png" width="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/MTM800e-Fahrzeugeinbau.png" width="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/mtm800e-datenbox-web.png" width="150px" alt="test" float="left"></div>
</div>

<div class="labels">
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="mtm800-tischstation" title="mtm800-tischstation" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">MTM800 für Tischstation</label>
 </div>
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="mtm800 remote" title="mtm800 remote" class="radio" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">MTP850</label>  
    </div>  
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="mtm800e fahrzeugeinbau" title="mtm800e fahrzeugeinbau" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">MTM800 E für Fahrzeugeinbau</label>
 </div>
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="mtm800e datenbox" title="mtm800e datenbox" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">MTM800 E Datenbox</label>
 </div>

</div>


<div class="form_item">
  <div class="form_element cf_heading">
    <h5 class="cf_text">Handfunkgeräte</h5>
  </div>
</div>

<div class="img-com2">
<div class="img">
<img src="images/bilder_funk/cep-400-web.png" height="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/MTP810-Atex-web.png" height="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/mtp850-web.png" height="150px" alt="test" float="left"></div>
<div class="img">
<img src="images/bilder_funk/MTP850EX-web.png" height="150px" alt="test" float="left"></div>
</div>

<div class="labels">
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="cep-400" title="cep-400" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">CEP400</label>
 </div>
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="mtp810-atex" title="mtp810-atex" class="radio" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">MTP810-Atex</label>  
    </div>  
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="mtp850" title="mtp850" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">MTP850</label>
 </div>
<div class="img-label">
    <label class="cf_label" style="width: 150px;"></label>
      <input value="mtp850ex" title="mtp850ex" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">MTP850 EX</label>
 </div>
</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h4 class="cf_text">Detailangaben</h4>
  </div>
  <div class="cfclear"> </div>
</div>
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 200px;">Anzahl der gewünschten Geräte</label>
    <input class="cf_inputbox required validate-number" maxlength="5" size="4" title="" id="text_0" name="anzahl" type="text" />
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 200px;">Funkfrequenz vorhanden?</label>
    <div class="float_left">
      <input value="VHF (146-176 MgHz) 2M" title="" class="radio validate-one-required" id="radio00" name="radio0" type="radio" />
      <label for="radio00" class="radio_label">VHF (146-176 MgHz) 2M</label>
      <br />
      
<input value="UHF (445-470 MgHz) 70CM" title="" class="radio validate-one-required" id="radio01" name="radio0" type="radio" />
      <label for="radio01" class="radio_label">UHF (445-470 MgHz) 70CM</label>
      <br />
      
<input value="Midband 4M" title="" class="radio validate-one-required" id="radio02" name="radio0" type="radio" />
      <label for="radio02" class="radio_label">Midband 4M</label>
      <br />
    </div>
      </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 200px;">Bedarfsbeschreibung</label>
    <textarea class="cf_inputbox" rows="3" id="text_3" title="" cols="30" name="bedarfsbeschreibung"></textarea>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h4 class="cf_text">Kontaktdaten</h4>
  </div>
  <div class="cfclear"> </div>
</div>
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Name/Firma</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_0" name="name-firma" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Straße u. Hausnr.</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_1" name="strasse" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">PLZ</label>
    <input class="cf_inputbox required validate-number" maxlength="5" size="5" title="" id="text_2" name="plz" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Ort</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_3" name="ort" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Telefon</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="" id="text_4" name="telefon" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Fax</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="" id="text_5" name="fax" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">E-Mail</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="" id="text_6" name="email" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Website</label>
    <input class="cf_inputbox validate-url" maxlength="150" size="30" title="" id="text_7" name="url" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="button-senden">
    <input value="Anfrage absenden" name="button_8" type="submit" />
 <div class="button-reset">
<input type="reset" name="Reset" value="Alle Eingaben löschen"/>
  </div>
  <div class="cfclear"> </div>
</div>

Hi pod2010,

It will be something in the JavaScript, you are in for some debugging :-(

Bob

Hi,

ok, but not concerning the debug-mode. I turned it off, but nothing changed. How can I solve it?

Hi pod2010,

Change the template or debug the conflict - or switch to serverside validation.

Bob

Hi Bob & pod,
I did some tracking on the form, and it would appear that $ES('input', 'ChronoContact_Angebotsanfrage') returns an empty set with your current template. This would generally be caused by an empty form, and looking abit further using FireBug, it is indeed revealed that the form is closed prematurely - most likely caused by some mis-matched <div></div> tags.

The reason your form works with the component-view of your template, is because it does not display the component-area within a set of div-tags, but directly inside the <body> element. Thus, any extra </div> tags would simply be ignored, whereas in the normal view, the component-area is displayed within a div-element, and the extra </div> tag is thought to close that whole area -> leading to an implicite close of the form element.

/Fredrik

Hey Fredrik,

I found it! It was one </div> too much at the beginning of my code. Thanks a lot your post and thanks of course to Bob, too.😉

greetz