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.

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

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…

:slight_smile: It’s more of an XHTML / CSS question. First, XHTML…

You currently have this for your elements

<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.


<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.


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.