SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2009
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    customizing contact form

    How can I customize this contact form that I got my page (contact form 7)

    http://www.adivix.com/contact/

    to look and work like this one:

    http://www.naspos.com/test/contact.html

    mainly i also want to delete the yellow border that appears with contact form 7 for some strange reason.

  2. #2
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by silver163 View Post
    How can I customize this contact form that I got my page (contact form 7)

    http://www.adivix.com/contact/

    to look and work like this one:

    http://www.naspos.com/test/contact.html

    mainly i also want to delete the yellow border that appears with contact form 7 for some strange reason.
    Appearance is handled by CSS so you can check out their stylesheet to find out exactly how they do it. I know how "I" accomplish that look. Make sure you use <label> tags to wrap the description of each form field. Include the "for" attribute and set it to the id of the form field it goes with. Then style the label tag with position: absolute and define a width (say 5em). Then set a left margin on all the form elements; use the same value plus an additional em or 2 for spacing, say 6-7em). You'll note that they've kept the text for each field very short so it fits on one line. You don't "have" to but it does look nicer.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2009
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chroniclemaster1 View Post
    Appearance is handled by CSS so you can check out their stylesheet to find out exactly how they do it. I know how "I" accomplish that look. Make sure you use <label> tags to wrap the description of each form field. Include the "for" attribute and set it to the id of the form field it goes with. Then style the label tag with position: absolute and define a width (say 5em). Then set a left margin on all the form elements; use the same value plus an additional em or 2 for spacing, say 6-7em). You'll note that they've kept the text for each field very short so it fits on one line. You don't "have" to but it does look nicer.
    mm not sure how to do that :X

  4. #4
    SitePoint Wizard frank1's Avatar
    Join Date
    Oct 2005
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i could not see any yellow border any where...
    but how come such similar site...is it template...
    and for some reason it was taking bit longer to load....

  5. #5
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow

    Quote Originally Posted by silver163 View Post
    mm not sure how to do that :X
    It's more of an XHTML / CSS question. First, XHTML...

    You currently have this for your elements

    Code:
    <p>Your Name (required)<br />
        <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-validates-as-required" size="40" /></span> </p>
    The span probably isn't a great idea, the break element isn't semantic and there's nothing whatsoever to indicate that "Your name" is tied to the text box. That's a huge accessibility issue. Especially since in the case that this falls apart, your user won't even know that this is required. More importantly for you, this tag soup is why you're having styling problems and you can't get it to look the way you want.

    Code:
    <ul>
        <li>
          <label for="your-name">Your Name (required)</label>
          <input type="text" id="your-name" name="your-name" value="" class="wpcf7-validates-as-required formTextbox" size="40" />
       </li>
    </ul>
    The list gives a more logical structure, the label and the form field are clean, understandable semantic units and the for attribute of the label ties them together (note: you need to add the id attribute to the form field)

    Then you need to include these declarations in your style sheet. You can use any other declarations to style the labels and form field you want as long as you don't override these elements. (note: I added an additional class to your textbox on the assumption you'd want all your textboxes to work this way.

    Code:
    label 
    {
    postion: absolute;
    width: 5em;
    }
    
    .formTextbox, 
    .formTextarea,
    .formButton
    {
    margin-left: 7em;
    }
    Note that to keep everything consistent, you include the classes for all other form elements you want aligned properly.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •