Improve company productivity with a Business Account.Sign Up

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 557
  • Last Modified:

need to style a form just like this comp

I need a little help with coding this form.
This is the psd of the form its short and sweet.
Can some one help me mark this up so that it looks like the form on this page?
  • 5
  • 3
1 Solution
Do you have a starting point or base form already made or are you wanting someone to write the whole thing for you?
jbrashear72Author Commented:
I have this below.
<div class="wpcf7" id="wpcf7-f1-p95-o1"><form action="/contact/#wpcf7-f1-p95-o1" method="post" class="wpcf7-form">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="1" />
<input type="hidden" name="_wpcf7_version" value="2.4.3" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1-p95-o1" />

<p>Your Name (required)<br />
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-text wpcf7-validates-as-required" size="40" /></span> </p>
<p>Your Email (required)<br />
    <span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-text wpcf7-validates-as-email wpcf7-validates-as-required" size="40" /></span> </p>
<p>Phone<br />
    <span class="wpcf7-form-control-wrap your-phone"><input type="text" name="your-phone" value="" class="wpcf7-text" size="40" /></span> </p>
<p>City<br />

    <span class="wpcf7-form-control-wrap your-city"><input type="text" name="your-city" value="" class="wpcf7-text" size="40" /></span> </p>
<p>Message<br />
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10"></textarea></span> </p>
<p><input type="submit" value="Send" class="wpcf7-submit" /><img class="ajax-loader" style="visibility: hidden;" alt="Sending ..." src="" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>

Open in new window

Here it is as a file, only html with form and css (internal stylesheet), the rest is up to you. elegant-form.html
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

jbrashear72Author Commented:
that is awesome! I added it to my CMS and it sorta broke:
What do you think?
jbrashear72Author Commented:
I managed to get it to fit in the page but for some reason the CSS has changed the footer styles:
Look at the last line of text compaired to:
Opened your site in:

firefox 3.6 - showed fine
google chrome 8 -showed fine
opera 11 - button is square, background-color is flat not degraded
ms-ie8 - button is square and shows scrollbar

to fix the scrollbar you need to add overflow: hidden inside textarea

to fix square button in opera add following line after -webkit-border-radius:

border-radius: 30px;

to fix background-color gradation in opera, or to fix square button in ms-ie8 (or any previous ms-ie version) you have to change .circle class to use image like this:

	position: absolute;
	top: 604px;
	left: 346px;
	display: block;
	width: 60px;
	height: 60px;

	border: 0px;
	background-color: transparent;
	background-image: url(roundOKimage.png);
	background-repeat: no-repeat;

	color: #ffffff;
	z-index: 100;
	cursor: pointer;

Open in new window

image has to be 60x60 pixels with transparency for better effect
jbrashear72Author Commented:
Did you see the Footer Text?
Home Pratice details About the Eye Team Our Surgeons Procedures Office Policies Contact Us FAQ © 2011 Eye LASIK Austin, all rights reserved

Look at tat on the contact page compared to the other site pages.
One of the styles we added is altering it.
right, now i get it.

make sure you change the line at the top of the styles (right after <style> with an asterisk that reads
and change <style> to <style type="text/css">


and change it to

form *

space between form and 1
jbrashear72Author Commented:
Man you are a life saver.. Thank you for all your help. I wish I could lear CSS the way you know it.
I am amazed!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now