[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 556
  • Last Modified:

need to style a form just like this comp

I need a little help with coding this form.
http://eyelasikaustin.nuartisan.net/contactus.html
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?
0
jbrashear72
Asked:
jbrashear72
  • 5
  • 3
1 Solution
 
thecrewCommented:
Do you have a starting point or base form already made or are you wanting someone to write the whole thing for you?
0
 
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" />
</div>

<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="http://eyelasik.austinfx.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>

Open in new window

0
 
jmnfCommented:
Here it is as a file, only html with form and css (internal stylesheet), the rest is up to you. elegant-form.html
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
jbrashear72Author Commented:
that is awesome! I added it to my CMS and it sorta broke:
http://alpha.eyelasikaustin.com/contact/
What do you think?
0
 
jbrashear72Author Commented:
I managed to get it to fit in the page but for some reason the CSS has changed the footer styles:
http://alpha.eyelasikaustin.com/contact/
Look at the last line of text compaired to:
http://alpha.eyelasikaustin.com
0
 
jmnfCommented:
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:

.circle
{
	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
0
 
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.
0
 
jmnfCommented:
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
0
 
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!
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

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