Jump to content
ttownsend

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

Recommended Posts

ttownsend    6
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

  • Like 1

Share this post


Link to post
Share on other sites
James B    436
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.

  • Like 2

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
ttownsend    6
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

  • Like 1

Share this post


Link to post
Share on other sites
ttownsend    6
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

  • Like 1

Share this post


Link to post
Share on other sites
catrina    103
catrina

You can use custom CSS to adjust the styling: http://www.pagelines.com/wiki/Custom_CSS

 

James was referring to this contact form plugin: http://wordpress.org/extend/plugins/contact-form-7/

  • Like 1

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
ttownsend    6
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!!

  • Like 1

Share this post


Link to post
Share on other sites
Rob    547
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 www.w3schools.org/css to learn the options you have for CSS. Everything is there, including samples and sandboxes where you can test code.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
ttownsend    6
ttownsend
Job done! I went with James' suggestion and am using Contact Form 7.
  • Like 1

Share this post


Link to post
Share on other sites
seedcode    2
seedcode

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: /wp-admin/edit.php?post_type=boxes

 

Has anyone seen this / know of a fix?

 

John

  • Like 1

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

  • Similar Content

    • jeomiland
      By jeomiland+
      Hi guys
      Is there a simple way to customize the default subject line (or any other attributes of the form) of the Contact Form module in Page Editor? I see where I can set who gets emails and how to add/change fields, but this seems essential and there must be an easy way than having to override code? Thanks for your help.
      http://affinitystudiofauxpainting.com/portfolio_of_work/contact-bac-hoang/
      form just sends a boring email with default Subjectline: "New message from [username]" and comes from sender Wordpress of wordpress@mydomainname.com. How can I customize these 2 things?
    • statusspb
      By statusspb+
      Good day to all!
      In the course of using found some design problems:
      1) Font size, and alignment Navpro plugin only affects the social buttons. (Not on the menu font size). Screenshot 1.png
      2) Submit button does not change its size after increasing the font size of the block. Screenshot 2.png
      Also, I think that the defaul align of the button must be in the center (because of the header alignment)
      3) Pins plugin bugs: (YOUTUBE VIDEO)
       
      3.1) The first press load has an undesirable display temporarily data that looks very ugly and not professionally.
      3.2) A second press load is still going rearrangement posts. (Initially they are sorted incorrectly) see 14th post.
      3.3) A Load more button is active even the posts are at ending.


    • Queue-it
      By Queue-it+
      Hi,
      I've created a box widget with 4 items, and a part of the html in each of the item is a button, that shows and hides text. 
       Aside the text I want to have a form (Fast secure form) to appear once the field is shown, but it displays the form code only as plain text. Do you know how to fix that? (display a form there)
      Page: https://www1.test.queue-it.com/product
      Adding the code here gave an error, so I attached the code in an image. 



      code pricing.docx
    • Ttownhero
      By Ttownhero+
      I've recently added a contact form to my platform 5 site and cannot for the life of me get a response from it. I know with contact form 7, sometimes the information that was being sent through the host email server caused it to stop because it looked like spam, and thus we'd have to change some stuff. Is there any option to do this with the PF5 contact form? Or is it an issue I'm overlooking?
      site under construction is - www.gccismychurch.org
    • fabienfons
      By fabienfons+
      Hi,
      I tried the Contact Section, but i don't receive any email...
      Any idea ?
      Thanks
×