customizing the Contact Form

kellywritesgrants · Member · Dec 16, 2010 at 10:44 pm
Copy link

Add topic to favorites
We’re a wordpress.com customer who have purchased domain forwarding plus custom CSS. We’re running the Pilcrow theme.

http://kellywritesgrants.wordpress.com

We’d like to create a custom contact form that would include the fields like Subject, Email, Name and Phone number, with some custom text prompting the user. The main text box should be much smaller than the default contact form (10 lines long and 80 chrs wide) and include the prompt “Tell me about your vision and goals.” The form should appear the same whether a user is logged into wordpress.com or not.

We consulted the doc at:
http://en.support.wordpress.com/contact-form/
Where it says: “If you have Custom CSS, you can customize the look of the form. You cannot add/remove form fields (other that subject) from the contact form, however.”

However found only one example of how to actually modify the CSS:
https://en.forums.wordpress.com/topic/custom-css-and-altering-contact-form?replies=4
and when I added this to the Pilcrow CSS, no effect.

Here is the test page we created:
http://kellywritesgrants.com/contact-form-test/

Is it possible to customize the contact-form on wordpress.com? Even a creative workaround like a script in the browser or running on another server? Thanks.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 16, 2010 at 11:36 pm
Copy link
CSS is theme specific which means ID’s and classes for each theme are for the most part different.

Editing the text is not really an option. You can use pseudoelements to add to the text, but the problems is that not all browsers support pseudoelements, so some would see the changes and some would not (mostly anyone using any version of Internet Explorer).

The stuff that shows when logged in and when logged out also is something you cannot change. When logged into wordpress, the visitor is not going to see the username, email and website fields, they will only see the text entry area.

The width of the text box can be adjusted here. I added a height declaration which you can edit as needed.
```
form.contact-form textarea {
width: 96%;
height: 150px;
}
```
I would suggest not making it any shorter than 100px otherwise the scrollbars might not show up if they type in more than one screen of stuff.

Widths for the name, email and website fields can be adjusted here. I just entered 100px as a placeholder.
```
input[type="text"] {
width:100px;
}
```
thesacredpath · Member · Dec 16, 2010 at 11:39 pm
Copy link
The only other way is to host a capture form offsite and then link to it from the blog, somewhere like aweber.com (about $100 per month as I remember). There also might be some free sites out there, but typically they have severe limitations on the number of records they will hold without you having to upgrade to a paid service.
raincoaster · Member · Dec 17, 2010 at 1:53 am
Copy link
No, Aweber is much cheaper than that. And there’s MailChimp, or you can use Google Docs, too.
thesacredpath · Member · Dec 17, 2010 at 2:40 am
Copy link
Hmm, I was thinking aweber was more expensive. I know a couple of my clients are whining about the costs, but they do email newsletters to over 5000 subscribers. Perhaps it is just the high number.

No items found.