We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 8214
    • 28 Posts
    Hi All, I just started styling my eform, I post here instead as I think the styling issues are the same regardless of the type of form, if I am wrong pls let me know.

    I am going to provide my css below, but my question is a simple and minor one. How come ’form’ doesn’t do anything? I would like to put my whole form inside a border, just for looks, but the form element doesn’t seem to let me do that. I left a form element in there just under the assumption that it may help anyway. Any easy explanation?

    For eform, there is no field set elements defined, so its not useful.

    Anyway, here is my code, in case its useful to anyone. Yes, the colors are not very good, I will tweak mine soon ;-)


    form {
    margin:0;
    }
    
    
    label {
            text-transform: uppercase;
            color: #3F628C;
            display:block;
            text-align:left;
            margin-left: 80px;
    }
    
    input {
            background: #E5EAEF;
            border: 3px solid #83A1C7;
            margin-left: 80px;
    }
    
    textarea {
    	width: 450px;
    	height: 80px;
    	border: 3px solid #83A1C7;
    	padding: 5px;
            margin-left: 80px;
    	font-family: Tahoma, sans-serif;
            background-color: #646E95;
            text-align:left;
    }
    
    select {
            background-color: #6D6DEC;
            color: #ffffff;
            margin-left: 80px;
    }
    
      • 8609
      • 607 Posts
      When you use eform you create a chunk with the html code specifying the fields and other elements of your form. You can add any classes or layout elements you want to that form, including fieldsets, and then style those in your css. Not sure what you mean by Form{}?

      RTFM - an example of a simple contact form chunk: http://rtfm.modx.com/display/ADDON/eForm
        • 8214
        • 28 Posts
        Thanks einsteinsboi for the reply. I am a bit of a n00b and have trouble to explain my question, sorry about that.

        First of all let me make clear that the form is working, I just would like to put it all together inside a border, maybe add a background color too. But I am looking for the easiest way to do this, I just don’t have too much time to futzz around with the code. As a non-tech person, its very hard and really time consuming to get into some project like this. Hope that doesn’t come across wrong, I like working on the code but its just tough to do for me.

        Anyway, let me show you what I am trying to understand:

        Here is the first chunk of the form:

        [+validationmessage+]
        <form method="post" action="[~[*id*]~]">
            <input type="hidden" name="formid" value="feedbackForm" />
            
            <p><label accesskey="n" for="Name">Your Name</label>
            <input type="text" name="Name" maxlength="60" eform="Your Name:Name:0" /></p>
        
            <p><label accesskey="e" for="email">Your Email Address</label>
            <input type="text" name="email" size="40" maxlength="40" eform="Your Email Address:email:1" /></p>
            
            <p><label accesskey="s" for="department">Subject</label>
            <select name="department">
                <option value="1">Website feedback</option>
                <option value="2">Support request</option>
                <option value="3">Feature request</option>
            </select></p>
            
            <p><label accesskey="c" for="comments">Comments</label>
            <textarea cols="40" rows="10" name="comments" eform="Comments:html:1"></textarea></p>
        
            
            <p><input type="submit" name="submit" value="Send Feedback"></p>
        </form>


        So, I got a form there, which makes me think that I should be able to style that form using code in the css like this:

        form {
         border: 1px solid #666699;
         padding: 5px;
        }


        But it doesn’t seem to work.

        I know I can’t use fieldset because there is no fieldset defined in the chunk. I also know that I can alter the chunk of the form to define some variables that I can then style. But I am trying to avoid that if possible.

        So, my question is, when we have a defined form in the chunk, even though that form has no name in there, why can’t my styling of the form work?

        Hope that explains it better, and thanks in advance for any advice! grin


        Quote from: einsteinsboi at Feb 14, 2011, 04:12 AM

        When you use eform you create a chunk with the html code specifying the fields and other elements of your form. You can add any classes or layout elements you want to that form, including fieldsets, and then style those in your css. Not sure what you mean by Form{}?

        RTFM - an example of a simple contact form chunk: http://rtfm.modx.com/display/ADDON/eForm
          • 8214
          • 28 Posts
          Tried some different things, such as giving the eform chunk a name and then styling with an element named form#form_name but no go.

          I did get a line at the top of the form when I tried to make a new paragraph class and then put an entry into the css called .newformclass and put the form into this new class of paragraph.

          Finally, I wonder if the code of the eform has a small problem, (but I don’t think it has anything to do with my problem), notice that the code for the form in the page has a form id of ’feedbackForm’ not ’efeedbackForm’...

          [!eForm? &formid=`feedbackForm` &to=`[email protected],[email protected],[email protected]` &tpl=`eFeedBackForm` &report=`eFeedbackReport` &gotoid=`216` &mailselector=`department` &vericode=`0` &subject=`Web site feedback`!]
            • 32316
            • 387 Posts
            Have you tried looking at the html and css with the development tools of a browser (Fiefox, Safari, Chrome or Opera all have good tools - don’t know about IE).

            The code you have posted should work (by this I mean that if the code in the template is on your page and the your css is on the page or linked to the page then the form should be styled - I even stuck it into a test page (a static page, not in Modx) to reassure myself.
              • 8214
              • 28 Posts
              Hmm ok thanks for the input whistlemaker, my code is, to be honest, a total hash after countless hacking. And my bug-fixing skills are minimal at best.

              Your comment is highly useful, so really appreciate it. It might not help me get anywhere, but maybe someone else will benefit undecided

              This is just a ’wish I could do it’ type of issue so if I have to give it up then that’s ok. I don’t expect anyone to find my bugs for me.

              I will consider this new info and try to figure out where I went wrong...

              Thanks again, really helpful grin


              Quote from: whistlemaker at Feb 14, 2011, 11:02 PM

              Have you tried looking at the html and css with the development tools of a browser (Fiefox, Safari, Chrome or Opera all have good tools - don’t know about IE).

              The code you have posted should work - I even stuck it into a test page (a static page, not in Modx) to reassure myself.
                • 8609
                • 607 Posts
                I’m not entirely sure you can target the whole form for styling with form {} but I could be mistaken. What I usually do and would recommend is that you add a class to the form, so in your chunk, you would have something like


                <form class="myform" method="post" action="[~[*id*]~]">
                


                Then in your css, target the fields very specifically using the class, e.g.

                .myform label {
                        text-transform: uppercase;
                        color: #3F628C;
                        display:block;
                        text-align:left;
                        margin-left: 80px;
                }
                


                You may have some other css styles in your code that are overriding the ones you’re trying to apply to this form, so by adding a class you ensure that the correct css code is applied to this form.
                  • 8214
                  • 28 Posts
                  Thanks einsteinsboi, but I am hitting the wall at this point.

                  I am close to giving up on this, maybe I will keep trying but I have tried everything and have gotten nowhere.

                  Just to make one point clear that i didn’t quite realize before, what is happening when I tried some different methods of fixing the problem is, the border is showing up, but its above the form. So the entire border is there, but its just above the element and nothing is inside it, so its just a long box of color. I confirmed this by setting a border-bottom and so on, its all there but showing up above the form. I have gotten this result through a couple different methods.

                  I feel like there is a simple answer for this, but...
                    • 28042 ☆ A M B ☆
                    • 24,524 Posts
                    Have you validated the page in question? Sounds like some misplaced tags to me.
                      Studying MODX in the desert - http://sottwell.com
                      Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                      Join the Slack Community - http://modx.org
                      • 8214
                      • 28 Posts
                      Ugg, you are right, my table layout has gotten screwed up, debugging now...

                      I think I must have some missing <td> or something...