We recently has a Gravity Forms user ask how they could send eGreetings using Gravity Forms and I figured it was a good use case for Gravity Forms so we decided to create a couple of demos to show you how to do it.
I this tutorial we will be showing you two forms. One for free eGreetings and one to support paid eGreetings.
There are other use cases that would work with this type of setup. For example, you could use it to sell eGift Cards or other types of digital products.
Pre Requisites
In these demos and this tutorial, we use a couple of third party add-ons to help improve the functionality and make this an even better solution.
Keep in mind, you can simplify the intake form, and use a Basic license and avoid using the add-ons listed below.
- Gravity Forms (Elite License)
- Signature Add-On (requires Elite license)
- Image Choices (Jetsolth paid add-on)
- GP Preview Submission (Gravity Wiz paid add-on)
- Stripe Add-On (requires Pro or Elite license)
- GP Notifications Scheduler (Gravity Wiz paid add-on)
Non-Essential Tools
You may notice some differences in my images and videos and wonder why your Gravity Forms UI looks different and that is because of these utility plugins I use.
- GravityHopper (paid add-on)
- GP Live Preview (Gravity Wiz paid add-on)
The Complete Tutorial / Walk Through
Let’s Get Started!
These forms are practically the same, except for page three in the payment form and the need for a couple of Stripe payment feeds.
I will demonstrate how to build the free eGreetings form, then I will duplicate the form and demonstrate how to add the payment functionality.
Pro Tip
Although this demo uses the Stripe Payment add-on, you could accomplish this same result with either the Square or PayPal Checkout add-ons.
Part One: Building Your Form
To simplify this for you, I have created a form template that you can download here.
To understand how the form works and what changes you might need to make if you’re not using the add-ons listed in the prerequisites section, please review this video.
Part Two: The Notifications
If you’ve downloaded and imported the form templates you’ll have the notifications and custom HTML/CSS I used to build the custom eGreeting email templates.
However, because there is quite a bit of detail and setup to these notifications, and with the form templates available you don’t need step-by-step instructions, I’m just going to focus these videos on going over the notification configurations.
Custom Email Template
If you have not downloaded the form templates, below is an example of the custom HTML and CSS used to create the Merry Christmas eGreeting email template that looks like this:
Note: Some of this HTML and CSS is also used in the form to design the layout for the in-form preview (page 2 of the multi-page form).
<div style="background-color: #D70D2B; padding: 25px;">
<table style="border-spacing: 2%; max-width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width:49%;">
<div style="text-align: center;">
{Card Image:16:image_800px}
</div></td>
<td style="vertical-align: top; background-color: #fff; padding: 25px; width:49%;">
<h3>Dear {Name (First):9.3},</h3>
<p style="font-size: 20px;">{Add Your Message:3}</p>
<p>{Your closing:5}<br>
<img src="{Sign the card:4}" /><br>
{Your Name (First):6.3} {Your Name (Last):6.6}</p>
</td>
</tr>
</tbody>
</table>
</div>
<div style="background-color: #E1C579; padding: 25px;">
<p style="text-align: center; color: #D70D2B;">Spread the love! Send an eGreeting today!</p>
<p style="text-align: center;"><a style="color: #294E3D;" href="#">Click Here To Get Started</a></p>
</div>
If you need help building your email templates, you could try using a plugin like this:
Part Three: Stripe Payment Setup
As previously mentioned, you can use whichever Gravity Forms payment add-on you want, you do not have to use Stripe.
It is important to note that the Stripe feeds will not be included in the form templates I have provided.
Gravity Forms does not include these feeds in the export file, so don’t skip over this section.
This video will walk you through how to setup the payment gateway in this use case.
Download the Form Template
It’s 100% FREE!
The Wrap Up
Using Gravity Forms to send electronic greetings is a great way to spread some love when you are far from loved ones or unable to see them for whatever reason.
The initial request was intended for sending greetings to a senior living facility where the nurses would print out the greetings and deliver them to the recipient.
Hopefully, this serves to fill a need you have or spark some ideas on how to fill that need.
If you have any questions or feedback, feel free to use the comments below.