Modx css issue not pulling in styles on the form

Question

Hi I'm editing a site using Modx cms. I'm trying to add a contact form to the contact page. I already have one in the sidebar specified in a template. The code on the contact page form points to the same div tags, but it isn't picking up any of the css.

any ideas why this is happening. Do I need some kind of plugin?

Thanks for all your help Regards Judi

<div class="enquiry-form-top">

                <h2>Enquiry Form</h2>

            </div>

           <div class="enquiry-form">

                <form class="enquiry" id="enquiry" action="mailer.php" method="post">

   <fieldset>

       <legend>Enquiry Form</legend>

       <div class="form-field">
    <label for="Name">Name:</label>
    <input type="text" id="Name" name="Name" value="">
       </div>

                        <input type="hidden" name="thankspage" value="thank-you.html">
                        <input type="hidden" name="subject" value="Enquiry Form">

       <div class="form-field">
    <label for="Address"> Address:</label>
    <input type="text" id="Address" name="Address" value="">
                            <input type="text" id="Address2" name="Address2" value="">
                            <input type="text" id="Address3" name="Address3" value="">
       </div>
    <div class="form-field">
    <label for="DOB">DOB:</label>
                            <input id="DOB" type="text" name="DOB" value="" />
       </div>

       <div class="form-field">
    <label for="Total-Fund-Size">Total Fund Size:</label>
    <input id="Total-Fund-Size" type="text" name="Total-Fund-Size" value="" />
       </div>

                        <div class="form-field">
    <label for="Number-Of-Funds">Number Of Funds:</label>
    <input id="Number-Of-Funds" type="text" name="Number-Of-Funds" value="" />
       </div>

                        <div class="form-field">
    <label for="Lump-Sum-Benefit">Has Lump Sum <br/>Benefit Been Taken:</label>
    <ul>
                                <li>Yes <input type="checkbox" name="Lump-Sum-Benefit" id="Lump-Sum-Benefit" value="Yes" /></li>
                                <li>No <input type="checkbox" name="Lump-Sum-Benefit" id="Lump-Sum-Benefit2" value="No" /></li>
                            </ul>
       </div>
                        <div class="form-field">
    <label for="Telephone-Number">Telephone Number:</label>
    <input type="text" id="Telephone-Number" name="Telephone-Number" value="">
       </div>

                        <div class="form-field">
    <label for="Best-Time-To-Contact">Best Time To Contact:</label>
    <input type="text" id="Best-Time-To-Contact" name="Best-Time-To-Contact" value="">
       </div>

                        <div class="form-field">
    <label for="Email">Email:</label>
    <input type="text" id="Email" name="Email" value="">
       </div>

                        <div class="form-field">
                           <img src="CaptchaSecurityImages.php" alt="">
                           <label for="security_code"> Security Code: </label>
                           <input type="text" id="security_code" name="security_code">
                        </div>

       <div class="form-buttons">
    <input type="image" name="Submit" value="Submit" src="images/annuity/submit_button.gif">
       </div>

   </fieldset>

      </form>

Answer 1

There is no reason I can think of for this to happen, and you don't need any plug-ins.

Once the page is rendered it is of course just HTML and it doesn't matter if it was made in modx or any other system.

Can you investigate the page using Firebug and make sure the Stylesheet is loading?

Maybe the form that is working is enclosed in a div with a class and all the styles are set in the style sheet as follows (ie. Children of the containing div) .enclosingdiv .form-field That would explain why your form isn't picking up the styles.

Also you should check out eform (Package, wiki) it's great for simple contact forms.