jbrashear72
asked on
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?
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?
Do you have a starting point or base form already made or are you wanting someone to write the whole thing for you?
ASKER
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
that is awesome! I added it to my CMS and it sorta broke:
http://alpha.eyelasikaustin.com/contact/
What do you think?
http://alpha.eyelasikaustin.com/contact/
What do you think?
ASKER
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
http://alpha.eyelasikaustin.com/contact/
Look at the last line of text compaired to:
http://alpha.eyelasikaustin.com
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:
image has to be 60x60 pixels with transparency for better effect
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;
}
image has to be 60x60 pixels with transparency for better effect
ASKER
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.
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
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
ASKER
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!
I am amazed!