WP custom contact form formating

That contact form does need a little TLC.

You don’t mention what form plugin you’re using, which you’ll probably have to do in order to get some help with this.

The form plugins I have used have had HTML settings (for things like columns and rows, text-box size, etc.) and CSS fields I could adjust for individual forms that made it easy to format them. If yours doesn’t you might take a look at a different plugin.

Thanks for the reply,

I am using what I believe is the standard plugin that comes with WP. There’s a small image of a form above the entry window to enter text for a page or post. There’s very little modification that it offers. I could add fields and choose different buttons but alignment wise there’s nothing. Can you recommend a plugin. I also have ultimate TinyMCE – I don’t know if this has a plugin for a contact form.

Hmmm… There is no button like that in a self-hosted WordPress installation, as far as I know. None of my sites have it. I know there is one on a WordPress.com installation. Is that what you’re using? Maybe it comes with Ultimate TinyMCE, I’m not sure. Or maybe you have some other plugin installed that added it?

1.

.contact-form label span { margin-left: 5px; }

2.

contact-form label { display: block; }

3.

.contact-form input[type="text"],
.contact-form textarea {
    padding: 8px 10px;
    width:300px;
}

LOL That’ll work.

WPcanyon – very consice 1.2.3. thank you but sorry I’m failing to understand what to do with the above code. Is the above code CSS and where should it be placed? I was hoping I could modify the code in the page view text editor window thingy.

The current code of the form as viewed from the text editor of the page looks as follows:

[contact-form to='[email protected]' subject='Request for Information / Nature%26#039;s Healing Website']
 [contact-field label='Name' type='name' required='1'/]
 [contact-field label='Email' type='email' required='1'/]
 [contact-field label='Website' type='url'/]
 [contact-field label='Comment' type='textarea' required='1'/]
 [/contact-form]

I would really love to learn more about how to use WP properly but at the moment I’m just trying to do the basics to get the site back to it’s original functional state after recently transfering my old from HTML site to WP.org.

Linx4me2 – you got me thinking that the form button is not part of the original wp.org setup so I’m wondering what configured it so I can read up on how to use it better? I have K-news newsletter plugin installed, but I think the button was there before I installed this plugin so I’m thinking it’s associated with TinyMCE.

I thought I’d link an image of the “contact form button” in wp which is position to the right of the “Add Media” button art the top of the visual/text window. Maybe someone can recognize what ap it comes from? I’m looking for a suggestion on a better form plugin too.

contact Form Button

It worked WPCanyon! I figured it was CSS and added to the “Edit CSS” section under appearance along the wp left NAV menu (not sure the proper terms)

Fancy! I’m really going to like working with WP.

Thanks again!

The best way to modify a theme (one being CSS changes), is with a child theme. Child Themes.

But if you find that a bit confusing then the second best way is to add your CSS modifications at the end of the original theme’s style.css. So when you go to the “Edit CSS” in the admin add you code at the very bottom.

That way when there’s an update on the theme you will have no problem finding the custom CSS you added.