Member Login

You are not currently logged in.






» Register
» Lost your Password?
Login ↓
Home > Styling the contact form 7 | Thesis CSS | Forum

Styling the contact form 7 | Thesis CSS | Forum

Welcome to our Members Only Forum

You are welcome to view the content on our Forum, just scroll down to view this forum post.
If you like what you find and want to be able to post a question, please check out our subscription options.
Please feel free to search the forum using either the Google Site Search above or the forum search below.

For a Limited Time Only

Join our Community for as little as
$0.43 PER DAY!
THIS OFFER EXPIRES May 31st!


 
 You must be logged in to post


Lost Your Password?

Search Forums:


 






Minimum search word length is 4 characters – Maximum search word length is 84 characters
Wildcard Usage:
*  matches any number of characters    %  matches exactly one character

Home Forum Thesis CSS Styling the contact form 7

Styling the contact form 7

Page:   1  
UserPost

9:17 am
February 4, 2012


Juliette

Basel, Switzerland

Jedi

posts 90

1

Hello Rick

On this page http://eltern-kind-musik.ch/anmeldung/

I would like to style the contact form so that it fits into the background image.

I would like to move the fields closer together vertically.

Then I want to add a right column and move the fields 'email address' and the 'message box' to that.

How can I reposition the boxes?

Thank you!

8:05 am
February 5, 2012


Rick Anderson

Edmonds, WA

Admin

posts 3156

2

If you specify the width of the container, you can also specify that the left and right margins are "auto".

 
.format_text .anmeldeformular
{
 width:400px;
 margin-left:auto;
 margin-right:auto;
}

However, your background image is moving with the browser window.  You should probably set it's position to top center

Rick Anderson – WordPress Instructor

Learn How to Create Your Own Business Website

1:09 pm
February 5, 2012


Juliette

Basel, Switzerland

Jedi

posts 90

3

If I set it to top center, then the image is too far up and clashes with the nav.

How can I move it down again, without the image moving with the browser window?

 

I would like to have the form fit into the image nicely and was thus thinking of presenting the form in a 2-column format:

Name   _____            Email______

Subject_____             Message____

send-button

How can this be done?

Thank you, J.

3:53 pm
February 6, 2012


Rick Anderson

Edmonds, WA

Admin

posts 3156

4

You can use typical HTML and CSS in a Contact Form 7 form.  Here's one I created very recently that sits side by side:

<div style="float:left;width:40%;margin-right:10px;">
   <p>
      Your Name (required)<br />
       <br />
      Your Email (required)<br />
       <br />
      Subject<br />
       
   </p>
</div>
<div style="float:right;width:45%">
   <p>
      Your Message<br />
      [textarea your-message 30x5] <br />
      [submit "Drop Us a Line"]
   </p>
</div>

Rick Anderson – WordPress Instructor

Learn How to Create Your Own Business Website

Page:   1  


About the Build Your Own Business Website Forum

Forum Timezone: America/Los_Angeles

Most Users Ever Online: 38

Currently Online:
11 Guests

Currently Browsing this Topic:
1 Guest

Forum Stats:

Groups: 7
Forums: 40
Topics: 1646
Posts: 7185

Membership:

There are 2365 Members
There have been 3 Guests

There is 1 Admin
There are 2 Moderators

Top Posters:

Brian Tozer – 400
Reece Morrel – 285
Rachel McFadden – 143
Jackie Jacobson – 140
steve Whitehead – 134
Catherine Mulhern – 130

Recent New Members: Francisco Mogollon, amember, Tim Frisch, kay ache, Harold Goldsmith, Todd Wilson

Administrators: Rick Anderson (3156 Posts)

Moderators: Gelie Laxamana (15 Posts), Jorene Abapo (0 Posts)