Forums

Form is lined up wrong, and drop downs show all options

joomlawhiz 16 Jun, 2009
Here is my link:

http://www.just250.com/index.php?option=com_chronocontact&chronoformname=ProjectRequestForm

You will see as soon as you go to the site that the text boxes are not lined up and when you click a drop down, it shows all of the options as one option, even though I did not set it up that way using the wizard. I know I am not crazy, b/c I have done forms successfully before. Thanks for your help!

Here is the code:

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Name</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="{cf_title}" id="text_4" name="text_4" 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;">Email</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="{cf_title}" id="text_5" name="text_5" 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;">Phone</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="{cf_title}" id="text_3" name="text_3" 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;">Cell</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="{cf_title}" id="text_6" name="text_6" 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;">What is the best time to reach you?</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="{cf_title}" id="text_7" name="text_7" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Do you currently have a website?</label>
    <select class="cf_inputbox validate-selection" id="select_5" size="1" title="{cf_title}"  name="select_5">
    <option value="">Choose Option</option>
      <option value="Yes,No,">Yes,No,</option>

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

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">If yes, please enter URL</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="{cf_title}" id="text_8" name="text_8" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Approx how many pages do you expect to have?</label>
    <select class="cf_inputbox" id="select_10" size="1" title="{cf_title}"  name="select_10">
    <option value="">Choose Option</option>
      <option value="5 or less,5-10,10+,">5 or less,5-10,10+,</option>

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

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Click Me to Edit</label>
    <select class="cf_inputbox" id="select_10" size="1" title="{cf_title}"  name="select_10">
    <option value="">Choose Option</option>
      <option value="option 1,option 2,option 3,">option 1,option 2,option 3,</option>

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

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Do you have a logo?</label>
    <select class="cf_inputbox" id="select_11" size="1" title="{cf_title}"  name="select_11">
    <option value="">Choose Option</option>
      <option value="Yes,No,Yes but I want a new one,">Yes,No,Yes but I want a new one,</option>

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

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="{cf_name}" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>
nml375 16 Jun, 2009
Hi,
When investigating your form with firebug, it would seem the style1.css stylesheet never got loaded. Could you verify that the "Load ChronoForms CSS/JS Files" setting is set to "Yes"?

Regarding your dropdown, it would seem you entered all options on a single line, rather than one item per line within the wizard.

/Fredrik
joomlawhiz 16 Jun, 2009
Hey Fredrik!

That totally helped. Thank you for letting me know about the CSS form load. That made a huge difference. I was putting the options on one line in the wizard, but it was still showing them all as one in the drop down. I will just edit the code manually. Thanks for all of your help!
This topic is locked and no more replies can be posted.