8 replies to this topic

[ttownsend]

Hi all,

 

I'm trying to create a Contact Me form whose styling is exactly the same as the default "Leave a Reply" form in the Pagelines framework.

I can really tell where to start.  I experimented with cforms, but I couldn't get the styles to match.

 

Is there a reasonably simply way of doing this?

 

Thanks,

Trevor

[James B]

Hi Trevor

 

Pagelines now has inbuilt styling for forms, the 'leave a reply' form is simply a title and a text area. What are you looking to put on your form? When you say want the styling exactly the same, are we talking the same font, size, etc.

 

I always use contact form 7 for forms, you can override form styles using css. Let us know exactly what you're looking for and we'll try to advise further.

[ttownsend]

Hi James and thanks for the reply.

 

I would like to create a simple Contact Me page with fields for name, email, and message (and a captcha) with the styling of that form looking precisely like the Leave a Reply form on any given post.  Is that possible?

 

Cheers,

Trevor

[Danny]

Hi,

 

If you want to have a simple contact page with a form that has similar styling to the comments form, then I recommend this plugin.

 

Please Login or Register to see this Hidden Content

[ttownsend]

Hi Danny,

 

Grunion looks pretty good, and just needs two tweaks that I can see (header styling, and text entry box background colour).  Where can I find these elements in Pagelines so that I can copy them to Grunion?

 

Also, back to James for a sec - how can I use Pagelines in-built forms generator to make a simple form on a Contact Me page?

 

Many thanks,

Trevor

[catrina]

You can use custom CSS to adjust the styling:

Please Login or Register to see this Hidden Content

 

James was referring to this contact form plugin:

Please Login or Register to see this Hidden Content

[ttownsend]

Thanks everyone - I'm trying to avoid going under the hood with CSS (I'm on a content schedule), so I'm using the defaults in Contact Form 7 for the moment.

 

If someone can give n00b-simple instructions on changing the form's font styling and text box background I'd be grateful!!

[Rob]

The fastest way to deal with the CSS is to use Firebug.  On the left side of Firebug there's a small rectangle with a cursor arrow in the icon.  Point your real cursor to that icon, then to the place you want to inspect and the CSS elements will show up on the right column of Firebug.  You can use it as a sandbox to test changes which you'll see live in your browser.

 

I'd recommend spending a bit of time at

Please Login or Register to see this Hidden Content

to learn the options you have for CSS. Everything is there, including samples and sandboxes where you can test code.

[ttownsend]

Job done! I went with James' suggestion and am using Contact Form 7.