Build Your Own Website--Chapter7--Conflict between CSS and Freedback.com form code

Hi! I’m a newbie. Just would like to say that Ian’s book is really great. Working my way through really quickly. But I’ve gotten to Chapter 7 and there seems to be a conflict of some kind between the CSS of the style sheet and the form code from the Freedback.com website. I have managed to narrow it down to a conflict of some sort between the CSS for the text input controls relating to the Contact Us page:

form.contact label {
font-weight: bold;
font-size: small;
color: blue;
}

form.contact label.fixedwidth {
display: block;
width: 240px;
float: left;
}

…and the form code from Freedback.com, specifically:

<input type=“hidden” name=“acctid” id=“acctid” value=“s9fuwx3x5wx5jltw” />
<input type=“hidden” name=“formid” id=“formid” value=“756475” />
<input type=“hidden” name=“required_vars” id=“required_vars” value="name,field-2a9138e5995af44,… />

I know this because the formatting of the Contact Us page was perfect before I inserted the form code from Freedback and then when I replaced the above Freedback form code with the original markup:

<form action=“” method=“post” class=“contact”>

…the formatting of the Contact Us page reverted back to normal and was perfect again. I just can’t figure out what the problem could be.

Any help will be greatly appreciated.

I don’t know what you mean by “normal” and “perfect”. That is, it looks similar to what the book shows? But now it doesn’t in some way? You shouldn’t be seeing any “hidden” inputs at all.

The CSS you posted does not affect the form’s inputs, but the form’s labels. Specifically the form with a class value of “contact”, and the second selector for labels with a class value of “fixedwidth”. I have the following for the “final” chapter 7 contact form

      <form action="" method="post" class="contact">
        <fieldset>
          <legend>Tell us About a Dive Event</legend>
          <div>
            <label for="contactname" class="fixedwidth">Contact Name</label>
            <input type="text" name="contactname" id="contactname"/>
          </div>
          <div>
            <label for="telephone" class="fixedwidth">Telephone Number</label>
            <input type="text" name="telephone" id="telephone"/>
          </div>
          <div>
            <label for="email" class="fixedwidth">Email Address</label>
            <input type="text" name="email" id="email"/>
          </div>
          <div>
            <label for="eventname" class="fixedwidth">What's the event called?</label>
            <input type="text" name="eventname" id="eventname"/>
          </div>
          <div>
            <label for="eventdate" class="fixedwidth">When's the event happening?</label>
            <input type="text" name="eventdate" id="eventdate"/>
          </div>
           <div>   
              <label for="region" class="fixedwidth">What region is the event in?</label>
              <select name="region" id="region">     
                <option>South-west</option>
                <option>South-east</option>
                <option>Midlands</option>     
                <option>Central</option>     
                <option>London</option>
                <option>East</option>     
                <option>North</option>     
                <option>Scotland</option>
                <option>Northern Ireland</option>    
                <option>Wales</option> 
                <option>International (see details below)</option>
              </select> 
            </div>
            <div>
              <p>Please provide any other details you think will be useful to us
                  in the text area below (it may save us calling or emailing you,
                  and help avoid delays).</p>
              <label for="details" class="fixedwidth">More details (as much as you think
              we'll need!)</label>
              <textarea name="details" id="details" cols="30" rows="7"></textarea>
            </div>
            <div>   
              <p>If we need to call you back for any more info, what would be the
                  best time to call you on the number supplied?</p>   
              <input type="radio" name="timetocall" id="morning" value="Morning"/>
              <label for="morning">In the morning</label>
              <br/>
              <input type="radio" name="timetocall" id="afternoon" value="Afternoon"/>
              <label for="afternoon">In the afternoon</label>   
              <br/>
              <input type="radio" name="timetocall" id="evening" value="Evening"/>
              <label for="evening">In the evening</label>   
              <br/>
              <input type="radio" name="timetocall" id="never" value="Never" checked="checked"/>
              <label for="never">No calls please</label>
            </div>
            <div>   
              <p>Bubble Under may share information you give us here with other
                  like-minded people or web sites to promote the event. Please confirm if you
                  are happy for us to do this.</p>   
              <input type="checkbox" name="publicize" id="publicize" checked="checked"/>
              <label for="publicize">I am happy for this event to be publicized outside of and 
              beyond BubbleUnder.com, where possible</label>
            </div>
            <div class="buttonarea">    
              <input type="submit" value="Send Us the Info"/>
            </div>
        </fieldset>
      </form>

Does this look like what you’re working on, or are you before the “final”?

Hi Mittineague,

Thank you for your response. And please excuse my newbie ignorance - just trying to learn the lingo and understand the whole html thing as I go along… thought I did splendidly in explaining my problem, sorry!- I’ll try again on the points you brought up:

By normal and perfect I am refering to “the final product”, i.e. the completed Contact form according to Ian’s specifications and as demonstrated in Fig. 7.26 on page 288 of the book.

Yes, up to here all is well, no problem. The trouble starts when I follow Ian’s instructions for “plucking” the required form code generated from the Freedback website and pasting into my “finished” contact form. Specifically, the problem occurs when:

<form action=“” method=“post” class=“contact”>

is replaced with:

<form enctype=“multipart/form-data” method=“post” action=“http://www.freedback.com/mail.php” accept-charset=“UTF-8”>
<div>
<input type=“hidden” name=“acctid” id=“acctid” value=“s9fuwx3x5wx5jltw” />
<input type=“hidden” name=“formid” id=“formid” value=“756475” />
<input type=“hidden” name=“required_vars” id=“required_vars” value="name,field-2a9138e5995af44,… />
</div>

…and the CSS is affected as a result. The form goes awry and loses all its formatting, specifically, the CSS relating to:

form.contact label {
font-weight: bold;
font-size: small;
color: blue
}

form.contact label.fixedwidth {
display: block;
width: 240px
float: left;
}

Then, when I deleted the Freedback form code:

<form enctype=“multipart/form-data” method=“post” action=“http://www.freedback.com/mail.php” accept-charset=“UTF-8”>
<div>
<input type=“hidden” name=“acctid” id=“acctid” value=“s9fuwx3x5wx5jltw” />
<input type=“hidden” name=“formid” id=“formid” value=“756475” />
<input type=“hidden” name=“required_vars” id=“required_vars” value="name,field-2a9138e5995af44,… />
</div>

…and replaced it with Ian’s original form code:

<form action=“” method=“post” class=“contact”>

…the form regains its proper formatting again.

Hope this helps.

Ah, OK. I think you’re in the right area, just slightly off mark. Where the book says to “pluck” it says the “parts you need have been marked in bold”. Your second example of the mark-up has <div> tags in it that are not in bold and they could very well be the culprit.

EDIT: After reading along for a few more pages, I see that further examples do indeed show div tags around those hidden inputs. Yet it doesn’t make sense to me as they’re hidden anyway. For the sake of experiment, you could try it without those div tags.

Also, have you checked your code against the books errata page? http://www.sitepoint.com/books/html2/errata.php

I tried taking out the div tags but no go. I had a second look at the mark up with regard to what you mentioned about the div tags not being in bold and therefore not included in the “plucking out”. However, I noticed that in the finished markup, Ian does have div tags around the markup in the final product, like so:

<div>
<input type=“hidden” name=“acctid” id=“acctid” value=“s9fuwx3x5wx5jltw” />
<input type=“hidden” name=“formid” id=“formid” value=“756475” />
<input type=“hidden” name=“required_vars” id=“required_vars” value="name,field-2a9138e5995af44,… />
</div>

So the divs are a necessary component of the markup, I reckon.

Any more ideas?

Just a slight modification on what I mentioned previously as I’ve just made a further discovery. It is even more specifically THIS markup where the problem seems to be:

<form enctype=“multipart/form-data” method=“post” action=“http://www.freedback.com/mail.php” accept-charset=“UTF-8”>

…and not this markup as previously thought:

<form enctype=“multipart/form-data” method=“post” action=“http://www.freedback.com/mail.php” accept-charset=“UTF-8”>
<div>
<input type=“hidden” name=“acctid” id=“acctid” value=“s9fuwx3x5wx5jltw” />
<input type=“hidden” name=“formid” id=“formid” value=“756475” />
<input type=“hidden” name=“required_vars” id=“required_vars” value="name,field-2a9138e5995af44,… />
</div>

I’ve compared my markup with Ian’s “final version” and it’s exactly the same. I’m really spoofed. Maybe some problem with the form code generated by Freedback.com?

Ok boys and gals, I think I’ve cracked it! Not bad for a newbie, eh? Well, I thought I would examine more closely the two markups, namely, from Ian’s “final version”:

<form action=“” method=“post” class=“contact”>

…and the Freedback.com form code:

<form enctype=“multipart/form-data” method=“post” action=“http://www.freedback.com/mail.php” accept-charset=“UTF-8”>

Fiddled around with the two for a while. Turns out that after taking the class attribute (which I’ve selected in bold type) from Ian’s markup and sticking it into the Freedback markup, the CSS worked!:

<form enctype=“multipart/form-data” method=“post” class=“contact” action=“http://www.freedback.com/mail.php” accept-charset=“UTF-8”>

On the final version of the Contact page which includes the Freedback form code incorporated into Ian’s markup, this attribute is missing. So I am thinking:

  1. Any possible explanation for this?
  2. Could this be a browser issue? (dumb question? - I use Safari)
  3. Any history of anyone else having this problem? I had a look on the forum but couldn’t see anyone else experiencing the same problem.
  4. Is this a mistake or error in printing?
  5. If this were an error, how would I go about bringing this issue up with Sitepoint for correction for the following edition of the book?

Thanks for all your help Mittineague. Does the Sitepoint forum have a points system the same way the Apple forum does for awarding help afforded to others?

:d’oh: Now I see it. The CSS selector’s are for form.contact - form tag with a class attribute with a value of “contact”.

So if you try

<form enctype="multipart/form-data" [B]class="contact"[/B]
 method="post" action="http://www.freedback.com/mail.php"
 accept-charset="UTF-8">

you should be back in business.

If the book missed this it should be added to it’s errata page.

SitePoint used to have a “rep system” but now it has the yearly community awards for recognizing member’s contributions. As for me, when I manage to successfuly help someone is reward enough.

Thanks again for all your help. Well appreciated.

I just checked and it is mentioned in the book’s errata page

p.296-297 The code samples here do not include the class=“contact” attribute we’ve been using to style the form throughout the chapter, so the form will appear unstyled. Just add class=“contact” to the opening <form> tag to get your styles back.

I really need to start getting more sleep. It’s getting where I don’t see what’s in front of my face sometimes. :blush:

OK. I see that your are right. Sorry! I overlooked that. Thanks again.