Free-Mail

Formatting and Styling Gravity Forms Tutorial | Video

A WordPress Gravity Forms selected video:


See more at: http://www.neilcurtis.me/ – Gravity Forms are great and can be used for many things on WordPress websites, such as contact forms, email sign up forms, and even user content publishing forms. However, styling them to fit in with your website design can be tricky.

This video tutorial takes a default Gravity Form with a few different field types and styles each field individually to create a neat and mobile responsive contact form on my website.

The tutorial recreates a form that is currently on my website and uses CSS to target the individual form fields and styles the width, border, and position of each field. The video tutorial also shows you important Gravity Form settings to change to allow you full control over the styling of the fields. Also, I cover how to place the field names within the placeholder areas and style the placeholder text with CSS.

Learn more about Gravity Forms: http://www.neilcurtis.me/go/gravity-forms/

Visit my website: http://www.neilcurtis.me/

The video was automatically curated and published with the WordPress WP Robot plugin – CLICK HERE to learn more about WP Robot for WordPress.

Visit the MyPE YouTube Channel.

Published on Category: Tag: , , , , ,

Reader Interactions

Comments

  1. Neil. Thanks for the excellent tutorial. Do you happen to have any instructions on making the form styles work in the Gravity Forms widget?

    I'm trying to add a mailing list signup form in the header of my theme and I cannot seem to figure out how to get the first name and email fields to be in a single line. They are stacking up on top of each other… despite the styling I applied (which shows up fine with the form is embedded in the page itself).

    Thanks!?

  2. Thanks for the video. Do u know how can we generate the Pdf-invoice of the data entered by the user in gravity forms??

  3. Hi Neil, great tutorial. How do i get my own Gravity Form code into it? Can i copy the code from your vid??

  4. Hi – great quality video, but I seem to be stumped at the first hurdle.

    I've gone into the editor and opened the style.css sheet, but I cannot for the life of me see anything relating to gravity forms in there.  I'm using a custom theme called 'Balance'

    I've set up a page with a new gravity form.

    I've set the CSS and HTML5 options as stated.

    I've downloaded the placeholder addon and added 'gplaceholder' into the option box.

    ANything I'm missing??

  5. +Neil Curtis do you have a video tutorial on how to make a background color for Gravity Forms? TIA?

  10. Fantastic Tut Neil! amazes me how some people complain when someone takes the OWN TIME out to help others. How anyone could be confused with what you are showing amazes me. there is a plugin that allow grav forms styling on Code Canyon, but I don't much like adding bloat if I dont need to.   Gravity Forms really ought to bake this right into the options. Been a customer for 4 years now and not really seen any revolutionary features added.  ?

  11. Thanks for this really awesome useful tutorial, I don't praise a lot, although this really helps with knowing how to target gravityforms elements, in the past I used just to inspect element and copy a bunch of large selector to my stylesheet, Now thanks to your tutorial it's simpler 🙂 keep it up?

  12. Fuck sake dude, do you have to talk more bullshit? For anyone wondering when the fuck his going to begin with the tutorial click: 8:20

    While you do that, I'm going to look for another tutorial that isn't a waste of damn time!?

  13. Great tut.  I did most of it on my own, but you really helped inspire me and solve a couple of problems.?

  14. I have followed all of these instructions to a tee. And none of them work. I am using a genesis theme. The child theme is called prestige by zig zag press. i am updating the style.css in the prestige theme. It does nothing. what am i doing wrong?

    Ok. I just realized my W3 Total Cache is throwing it off. When I disabled it the changes appeared.?

  16. Im having difficulty on my multi forms. When the user clicks next to go to the next page, it loads halfway down the page and not at the top. Is there a quick fix to this????