Jump to content


Photo
- - - - -

Contact Form With Exact Same Styling As The Native Leave A Reply Form?

Contact form contact form

Best Answer James B , 20 December 2012 - 09:41 PM

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.

Go to the full post


  • This topic is locked This topic is locked
10 replies to this topic

#1 ttownsend

ttownsend

    Advanced Member

  • Members
  • 39 posts
  • LocationOttawa, Ontario, CANADA
  • Country: Country Flag

Posted 20 December 2012 - 05:05 PM

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


  • assomibatrifs likes this

#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 20 December 2012 - 09:41 PM   Best Answer

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 and assomibatrifs like this

#3 ttownsend

ttownsend

    Advanced Member

  • Members
  • 39 posts
  • LocationOttawa, Ontario, CANADA
  • Country: Country Flag

Posted 21 December 2012 - 06:02 AM

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


  • assomibatrifs likes this

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16376 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 December 2012 - 08:17 AM

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


  • assomibatrifs likes this

#5 ttownsend

ttownsend

    Advanced Member

  • Members
  • 39 posts
  • LocationOttawa, Ontario, CANADA
  • Country: Country Flag

Posted 21 December 2012 - 03:35 PM

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


  • assomibatrifs likes this

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 21 December 2012 - 03:55 PM

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


  • assomibatrifs likes this

#7 ttownsend

ttownsend

    Advanced Member

  • Members
  • 39 posts
  • LocationOttawa, Ontario, CANADA
  • Country: Country Flag

Posted 21 December 2012 - 08:21 PM

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!!


  • assomibatrifs likes this

#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 21 December 2012 - 11:49 PM

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.


  • assomibatrifs likes this

#9 ttownsend

ttownsend

    Advanced Member

  • Members
  • 39 posts
  • LocationOttawa, Ontario, CANADA
  • Country: Country Flag

Posted 22 December 2012 - 03:30 PM

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

#10 seedcode

seedcode

    Member

  • Members
  • 12 posts
  • Framework Version:Version: 2.4.4
  • Country: Country Flag

Posted 09 July 2013 - 01:57 PM

Installed Contact Form 7 and while the forms look great and now match the style of our Pagelines site, it seems to have knocked "Boxes" out of the left hand admin menu. The boxes are still there, and links like this still get them: 

Please Login or Register to see this Hidden Content

 

Has anyone seen this / know of a fix?

 

John


  • assomibatrifs likes this

#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 09 July 2013 - 03:03 PM

John,

 

Please open a topic of your own, with greater explanation and links to non-admin pages.   Thanks.  We'll be happy to help you.


  • assomibatrifs likes this





Also tagged with one or more of these keywords: Contact form, contact, form