Today we going to look into something really cool you can use on your WordPress website to gather emails and data about your users: Learning quiz with Gravity Form!
For this recipe you will need:
- 100gr of WordPress
- 1 GravityForm
- 1 Gravity PDF
- 2 Spoons of CSS
Ok, so it's pretty simple, once you have GravityForms & GravityPDF installed. First, you will need to create your checklist/quiz. You can use a model that I've already created so you can just duplicate the different sections, or create yours from scratch.
The quiz is made with two type of questions. The one you can answer by yes or know and the one that asks you what you can/want to be able to do.
Basic yes and no question look like this:
Mostly you will use them to get more information about your audience. Like do you have a computer, have ever done this etc…
The second type of question looks like this:
Those one have a special feature. If you answer “I can do this” in the .pdf report nothing would appear but, if you answer I want to do this then a paragraph would show up in the .pdf with whatever explanation you want to write.
How does that work? Simple, with a bit of CSS and the GravityForm conditional logic.
Every question is build the same way with an HTML block that contains the text that will be shown only on the pdf and the actual question:
Now, we will need to give our HTML block a CSS class so we can make it invisible to the user:
Let's just add “invisible” here. Now add the conditional logic action that will allow this text to be or not to be on the pdf by saying to show this HTML only if any of the condition (Your questions) answer is (I want to do this):
And that it, you just have to use this for every other question you want fill your form with.
Now that we have our form setup, let's add the bit of CSS that will make our HTML block invisible. Best way to do it would be to go to your template options, for Divi user it would be WP Dashboard > Divi > Theme Options > General > Custom CSS then add:
.invisible{
display:none !important;
}
It's a very simple piece of code. Now if you don't have any place to customize your CSS in your theme you can install a plugin like:
https://wordpress.org/plugins/rt-custom-css-page-and-post/
Now let's see the second part of this quiz, the pdf generation. Once the plugin is installed go to your form list and in settings click PDF:
Then add a new one:
You will get into the settings page for customizing your pdf with your logo and colors. Customisation is simple but if you know how to code you can create your own template or ask the creator of the plugin to do that for you, they have an option on their website.
From here I just play with the typo (type, size and colors), add my logo
