Get More Out of Gravity Forms

2,894 views
2,598 views

Published on

Newly updated 10/26/2015! Trying to decide to buy or already have it, but only using it for simple forms? Find out what else Gravity Forms can do for you.

Published in: Education, Technology, Business
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
2,894
On SlideShare
0
From Embeds
0
Number of Embeds
116
Actions
Shares
0
Downloads
9
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide
  • First, I want to say how happy I am to be here. It’s an incredible opportunity to speak to you here at WordCamp NYC and I hope I can share something really useful with you. I have tried to include something for everyone here, so if you’re a newbie, I’m going to start off slow, and if you’ve been using Gravity Forms for a while, please stick around because I think there will be something for you, too.
  • First, a little about me.  My name is Laura Hartwig and I work for the MarkNet Group where I build and maintain WordPress websites.  I didn’t create GF.  I don’t work for GF.  I’m not affiliated in any way with GF.  I’m a website developer who uses GF everyday and find that it makes my life much easier.  I think it might make your life much easier too, and that’s why I wanted to talk to you about it today. 
  • So, here’s what I’d like to talk about today. These are the reasons I love GF.
  • GF is a paid plugin.  I very rarely promote paid plugins because there are just so many really useful free plugins that work incredibly well.  However, I personally think GF is worth paying for and I’d like to show you why.  So the pricing is as you see here.  If you have only one site, you can go with the Personal License, but you will not have the add-ons available to you, and that’s one of the most useful parts of GF. But if you are looking for a simple form with incredible options on it’s own, the Personal License might be right for you. All licenses are  for one year and include support.  If you allow your license to expire, the forms will still work on your site, but making changes to forms or adding new forms can become problematic as WordPress Core and other integrations get updated.  I’ve found sometimes the drag and drop functionality or the open and close of the fields doesn’t work if it hasn’t been updated.  So, let’s talk about what you get with GF. 
  • First, you need to purchase GF and download the zip file and install it on your site.
  • Once you install it and activate it , you’ll notice a new link in your left hand side bar for Forms.  Go to settings to put in your license key to make sure you get updates. 
  • http://test.wpdecoder.com/wp-admin/
  • As you saw in the demo, it’s super easy to add a form or forms to any page or post. It has it’s own shortcode. It’s also super easy to add GF to any widget areas. Which means for those of you who use the WPBakery Visual Composer, you can easily add it through the composer as well.
    Gravity Forms can also be added to php page templates with a function call like this:
    gravity_form( 1, false, false, false, '', false );
    This snippet will display the form with an id of '1'; the title and description will not be displayed, the form itself will not display if it is inactive, and it will not use AJAX for form submission.
    And it’s own enqueue script, like this:
    gravity_form_enqueue_scripts( 4, true ); The first variable is the form id. The second is whether you want to use ajax form submission. This script should be added in the theme’s header.php file just before the wp_head() function is called.
  • Single Line Text *Passwords You know how when you enter a password, your typing is protected by those dots or asterisks? Ever wonder how to ask people to choose a password with Gravity Forms and keep it hidden like that? The trick is to use the single line text field and under the advanced tab, just check the "Enable Password Inut" box. So simple!
    Progress bar above appears automatically when you enable paging with the "Page Break" field. When you select the Page Break field, you can select to use the bar, steps, or none. You can also select the which style of bar you would like to use. The one above is the default blue bar. You can also choose the custom option to choose your own text and background color. You can also create custom "Next" buttons and give each page a name.
  • Address field can be customized to hide the country, state, and/or address line 2. You can also choose to allow international addresses or only Canada or the US. If using the international addresses, you can set a default country. If you choose to only allow US addresses, you may set the default state.
    File- Allowed file extensions should be entered into the properties tab when setting up this field as well as the maximum file size you want to allow.
    List field can have multiple columns.
  • Next are the Post Fields. If you have a website where you have different authors submitting articles or different users submitting information, GF makes it very easy with these fields. As you can see, there are options for post title, body, excerpt, tags, categories, and even an image. Yes, the post body accepts HTML
    Once the post has been added it is held as a draft and then an admin or editor level user needs to approve it before it appears on your site.
  • If you want to set this up with custom post fields, you can do that as well. You can see that you can choose the field type for your custom field and can use an existing custom field or create a new one. You can even set up a custom template to display your custom field. So, if you wanted to do something like accept movie or book reviews on your site, you could set this up to be the name of the movie, author of a book, or a location for a book signing, etc. Lots of possibilities.
  • GF also makes it easy to sell tickets or a small amount of items on your website. You start by choosing a product name and type of product you want to sell, whether it’s a simple product or a choice of products – like maybe a ticket level – member or non-member. If you’re selling multiples, you can add a field for quantity. If there are options, you can add a choice here, but include the price of the options in the description because a price doesn’t show anywhere. If there are multiple products, you can associate the option with the correct product. Then you add shipping.
    All these Pricing Fields can be integrated with the payment add-ons like Paypal to set up your own shopping cart, but that is for another tutorial.
  • GF also allows automatic calculations. First list all the fields that you want the customer to fill. Then, just choose a number field AFTER you have added your other fields with amounts in them. Check Enable Calculation and create your formula by using the merge tags and the addition, subtraction, etc. When you use the Pricing Fields, calculation will happen automatically.
  • Conditional logic is one of the options that I really love about GF. If you don’t want to overwhelm your customer with a huge form, have some fields hidden unless you need them. Let’s say you want to know if your customer has children. First, you can ask them “Do you have children?”. If they do, THEN you can show the list field and ask them the name of their children. If not, they never see that question and simply move on.
    Here you will see that we are under the Advanced Tab. Check the box to enable conditional logic. Then you will be able to show or hide this particular field depending on the answers to one or more other questions.
  • So, those are the form fields. For the form in general, you can adjust the form Settings. Here you can set the general form properties, like the title and description, which you can choose to show or hide whenever you embed a form. Then you can choose the placement of labels, and customize the text of your submit button or upload a custom image for your button.
    You can set up your confirmations to be simple text, or to redirect to a page, or to a custom url. You can even set it to pass a query string including field data.
    And you can set the notifications to the administrator or the user who submitted the form. You can cc or bcc as many people as you would like.
  • Notification options can be found under Form Settings > Notifications. Emails can be sent to admins, users, whoever you want. You can customize the emails with HTML and form fields and create your own autoresponder – a paid service with MailChimp.
  • So this is a widget that is on the sidebar of one of my customer’s sites. People fill out this form and their name and email automatically go to Mailchimp through the integration, but at the same time, they are sent an email notification with a PDF attached.
  • Next, let’s talk about how easy GF is to style.
  • GF comes with some CSS classes and styling already included. All you need to do is add those classes under the Appearance tab. Here you can see that normally these two fields would be one under another like in the top example, but when you add this CSS class, they will line up next to each other in columns.
  • There are also classes to create 3 columns for checkboxes and radio items and multiple fields can be set inline.
  • There’s even an option for turning those super long terms and conditions statements into a scroll so you don’t use up a huge page. A full list of GF Ready classes can be found at this link.
  • Of course, in that field, you could also include your own CSS classes that you have created as well. But besides those CSS classes, GF automatically creates unique classes for each field so you can style each form and field differently, if you want. You can see that it also creates a custom class that detects the browser, so you can even style by browser.
  • Here is just an example of some typical CSS I use in my style.css file.
  • So, instead of your form looking like the top example, your form can look like the bottom example. I really like to use placeholders because it significantly shrinks the size of my form. You can see the difference in just these four fields.
  • So, besides all these great options, GF also has lots of other functionalities.
  • You can export all the entries or just the ones you want.
  • You can also export the form itself and move it to another site.
  • GF also adds all these add-ons so you can integrate your form with the functionality of all these other sites. As you can see, there is MailChimp and AWeber as well as payment options like Paypal and Stripe. There are probably more of these now since I last checked and they are coming up with new ones all the time. And if you notice the Zapier integration on the top right – if you are familiar with Zapier at all, it allows you to integrate your form with a ton of other options like integrating with Google Docs, Salesforce, Hubspot, Trello, etc - 28 different options just with the Zapier add-on alone. So, it’s a good idea just to look these options over and you might get ideas of how you can do something you never dreamed of being able to do.
  • Now, like I mentioned at the beginning when we were talking about pricing, these add-ons are only available to those who have the Developer option. A few are available with the Business plan, including Mailchimp, but most require the more expensive license.
  • You will still be able to see the data entries as before on your backend, but your database will be encrypted.
  • Contact Form 7 is a free alternative to GF. When you first install CF7, this form is automatically generated. However, you can edit it. You insert it where you want it using the shortcode given at the top of the page. In my opinion, this is much more complicated to use and you must feel at least a little comfortable with HTML.
  • All these add-ons require payment.
  • Get More Out of Gravity Forms

    1. 1. Get More From Gravity Forms Why Gravity Forms Might be the Right Choice & How to Get More Out of It If You Already Own It
    2. 2. Laura Hartwig • WordPress Developer for MarkNet Group • NOT affiliated with GF • WPDecoder.com • This presentation can be found: – slideshare.net/LauraHartwig/gravity-forms
    3. 3. Easy to Use 1. Simple Forms in 5 minutes 2. Many Form Field Options 3. Easy Notifications Easy to Style 1. Ready CSS Classes 2. Create Your own CSS Easy to Increase functionality 1. Add-ons 2. Third Party Plugins Other Form Options Contact Form 7 & Ninja Forms
    4. 4. Gravity Forms
    5. 5. Gravity Forms
    6. 6. Getting Started Purchase it & download zip file Since Gravity Forms is a paid plugin, you are going to need to purchase it from GravityForms.com. You cannot simply search for it in the Add Plugins area. Install it by going to Plugins > Add New > Upload Plugin
    7. 7. Easy to Use – Live Demonstration Or for you viewers at home: http://bit.ly/simple-forms
    8. 8. Easy to Add Gravity Forms can also be displayed by a function call in a custom page template.
    9. 9. Form Field Options 1. Multiple Page Forms 2. Allow Users to Submit Articles 3. Set up a Simple Shopping Cart Find more details about all the form fields here: WPDecoder.com/plugins/gravity-forms-field-types/
    10. 10. Standard Fields There are also options for hidden fields, HTML fields, section breaks, and page breaks for multi-page forms
    11. 11. Passwords & Input Masks Progress Bar
    12. 12. Advanced Fields
    13. 13. Post Fields
    14. 14. Post Custom Field
    15. 15. Pricing Fields
    16. 16. Calculations For viewers at home here’s a Video that explains how it works : wpdecoder.com/plugins/calculations-with-gravity-forms/
    17. 17. Conditional Logic This allows some parts of the form to show up only if a user responds a certain way to previous questions. See how it works here: http://bit.ly/gf-conditional-logic
    18. 18. Form Properties –Live Demo or http://bit.ly/gf-form-settings
    19. 19. Notifications -Send to anyone -HTML emails -Customize email with data used in form
    20. 20. Autoresponders You can include a link to the PDF file mentioned, but there is also a plugin that will allow you to include an actual attachment with your notification. If you don’t want to install another plugin to include attachments, simply add the code you find here to your functions.php file: http://www.gravityhelp.com/documentation/page/Gform_user_notification_attachments
    21. 21. Easy to Style
    22. 22. CSS Ready Classes Gravity Forms comes with Ready CSS classes ready to go. Just add them under the appearance tab to style your form.
    23. 23. A full list of CSS Ready Classes for Gravity Forms can be found here: https://www.gravityhelp.com/css-ready-classes-for-gravity-forms/
    24. 24. Your Own Custom CSS class names & unique ID’s
    25. 25. /* Gravity Forms ------------------------------------------------------------ */ div.gform_wrapper input, div.gform_wrapper select, div.gform_wrapper textarea { background-color: #f5f5f5; border: 1px solid #ddd; } div.gform_footer input.button { color: #fff; } div.gform_wrapper .ginput_complex label { font-size: 12px; } div.gform_wrapper li, div.gform_wrapper form li { margin: 0 0 10px; }
    26. 26. The functionality of hiding your field labels can be added with a plugin or by adding this little bit of code to your functions.php file: //* Add placeholder text for Gravity Forms add_filter( 'gform_enable_field_label_visibility_settings', '__return_true' ); Placeholders
    27. 27. So,insteadofthis:This:
    28. 28. Other Functionalities
    29. 29. Exporting Entries
    30. 30. When you click the export file, it will download a CSV file, but this can easily be opened as an Excel spreadsheet. See my tutorial for step by step instructions. http://wpdecoder.com/plugins/gravity-forms-exporting-entries/
    31. 31. Moving forms to another site 1. From that Import/Export screen, simply click on the “Export Forms” button. Select the form you want to export and it will download an XML file to your computer. 2. Then go to the new site and click on the link at the top that says “Import Forms”. You can then upload that XML file.
    32. 32. Integration Add-ons Zapier includes integrations with: Google Docs Salesforce Hubspot Trello, etc (28 options)
    33. 33. Note – not all add-ons come with all package levels. Find out which are included here: gravityforms.com/add-ons/
    34. 34. User Registration Add-on BuddyPress & Paypal integration
    35. 35. Signature Capture - capture signatures - touchscreen device support. See it in action here: http://wpdecoder.com/plugins/signature-add-on-for-gravity-forms/ However, not legally binding. If you want a signature that will stand up in court, you will need to purchase the business license for the ApproveMe.me add-on for $197
    36. 36. With Gravity Forms Third Party Plugins, you can add even more functionality to your forms. Here are a few of my favorite:
    37. 37. Read more about it here: wpdecoder.com/plugins/plugin-review-gravity-forms-directory/ Directory Listing Allows you to show form entries as a directory https://wordpress.org/plugins/gravity-forms-addons/
    38. 38. Security – Encryption of Database Gravitate Encryption Install the plugin through the WordPress plugins menu, activate it, and then go to Settings > Gravitate Encryption to configure it. The settings will look like this: Use that “Auto Create Key” button to have a key emailed to you.
    39. 39. Warning: Be sure to keep that key or you will not be able to decipher your entries! On that same page, you will see a button to run a test to see if the encryption is working. Before you put in your key, you will see that everything is readable, like this: Once you put in your encryption key, you will get something like this so you will know the encryption is working. Plain Text: Here’s My Phone Number (123) 123-1234 Encrypted Text: enx2:2HJ4Ar4vvgc816OKj2Uzhwg… Decrypted Text: Here’s My Phone Number (123) 123-1234 Read more about this here: http://wpdecoder.com/plugins/gravity-forms-encrypting-the-database/
    40. 40. The Other Options
    41. 41. Other Options: Contact Form 7
    42. 42. Contact Form 7 –Front End -No widgets are created for adding forms to sidebars or widget areas. -This form set up automatically when you install plugin. -Email notification set up automatically and customizable. -No where to see all entries. They are only email to you.
    43. 43. Other Options: Ninja Forms -This form set up automatically when you install plugin. -Email notification set up automatically and customizable. -Can see all submissions in the backend. -This seems to be very similar to Gravity Forms, except many of the options come as paid add- ons.
    44. 44. Ninja Forms –Front End -Widgets for adding forms to sidebars or widget areas. Also gives shortcode, icon in visual editor and php code for easy insertion anywhere -Basic plugin is free but must pay for add-ons to make it similar to Gravity Forms.
    45. 45. Ninja Forms Add-ons
    46. 46. So these types of add-ons cost extra with Ninja forms but come included with the $39 version of Gravity Forms: • Conditional Logic $39 (one site) • Multi-part Forms $39 (one site) • File Uploads $39 (one site) Other add-ons that are similar to what is offered in the higher level of Gravity Forms are also extra. The Cost: Ninja Forms Add-ons
    47. 47. Free Autoresponder Attachmentstoresponders Widget&Visualeditoricon Multi-pageforms Simpleshoppingcart BasicAdd-ons Contact Form 7 x x no no no no no Ninja Forms x x paid x paid x paid Gravity Forms x Free plugin x x x x
    48. 48. Questions?
    49. 49. Thank You • This presentation can be found: – slideshare.net/LauraHartwig/gravity-forms • Learn more on my personal website: – WPDecoder.com/topics/gravity-forms • More resources: – GravityHelp.com (support when you purchase GF) – GravityWiz.com • Contact Me at Laura@MarkNetGroup.com

    ×