Let's learn HappyForms in a few quick minutes
1. Install HappyForms
Ready to get up and running with HappyForms?! It takes just a few super-easy steps. So let's get going…
The free plugin
- Head over to Plugins in WordPress dashboard and click Add New.
- In the Search plugins… field, type “HappyForms”.
- Find HappyForms in the search results, hover over it, and click Install.
- Once it is installed, click Activate. Ta-da! You're done 🤗
The upgraded plugin
- Download HappyForms Upgrade from your account.
- Go to Plugins in WordPress dashboard and click Add New.
- Click Upload Plugin button at the top of the screen.
- Click Browse to choose the downloaded file, then click Install Now.
- Once installed, click Activate Plugin button.
- If you have the free plugin enabled, please now disable it. That's it!
Set up automatic updates
To keep the paid version updated, head to the Settings page and enter your email address and password into the Register section. Doing this once connects you our server and let's us notify you directly in the WordPress dashbaord when updates are available.
The free version is updated automatically through the Plugin Directory.
Welcome screen overview
When you activate HappyForms, you’ll see a little welcome message from us. Be sure to enter your email address to agree to important notifications and share usage data.
After that, click Create your first form to go to the form builder.
2. Create your first form
Let’s set up your first form! Here goes…
- Head over to HappyForms → Add New. (This brings up the form builder. On the left is the builder itself and on the right is the form preview — which will look pretty blank right now, but not to worry.)
- Start by naming your form, something meaningful always helps.
Add or remove form parts
It’s time to add your form inputs (we call these ‘parts’)! All available parts are listed in the parts drawer. To open it, click Add a Part button.
- Scroll down the drawer until you find the part you want.
- Click to add this part from the drawer to your form. That’s it! The new part will immediately show in the form preview.
Removing parts is super-easy, too! Just click the Delete button at the bottom of each part in form builder.
Add file uploads (upgraded)
Looking to add a file uploader? The Attachment part in HappyForms upgrade lets you add secure, drag-and-drop upload feature.
While uploading files, a progress bar is shown. Then, each individual file may be reviewed and deleted in a file list.
Once your form is submitted, files are securely stored on your server and available for you to download and manage on the Activity screen.
Reorder form parts
Moving form parts around is just the same as moving Widgets in the Customizer. Click the part header (where the name displays) and drag and drop into place. Easy, right?
Shuffle parts order (upgraded)
Building survey or a quiz and want to avoid bias in responses? Head over to Setup tab, then check Shuffle parts checkbox. This will randomize the order of all form parts for each user visiting your form.
You can also shuffle options in various parts like Dropdown, Single Choice, Multiple Choice, or Table! Click More button when editing the part, then choose Shuffle order of options.
Edit form parts
Almost every form part has several core settings — including Label, Width and so on. Clicking the More button will reveal additional settings that are unique to each form part. When you make change to these settings, you’ll see the form preview update immediately.
Set up your form actions
Once your form parts are added, head over to Setup tab. To change to this tab, simply click it in the in navigation at the top of form builder.
Here you'll find several settings for adding features to your form like custom messages and labels, option to hide the form after submit, setting up a redirect, configuring Mailchimp integration, enabling reCAPTCHA spam protection, and so oodles more.
We've added tooltips (little descriptions that show on hover) so you can easily make heads and tales of what each setting does.
Open form in overlay window (upgraded)
HappyForms lets you generate a link that can be clicked to open your form in an overlay window. You can do that in three easy steps:
- Check Open in overlay window option in Setup tab.
- Save your form. There'll be a link in All Forms table for you to copy.
- Paste link to the Text editor of your post, page, custom post type, or widget content.
That's it! 🎉 By the way, there are plenty of styling options available for overlays too! From width, to padding, or even screen background. Check them out in Style tab's Overlay section.
Secure your form with password (upgraded)
To increase level of protection, HappyForms upgrade adds Require password option to Setup tab. This replaces your form with a password input and a submit button. The form is only accessible to visitors after entering the given password.
Every form password is encrypted and you can change it anytime by clicking Reset password link.
Schedule form availability (upgraded)
Set visibility of your form during a chosen time or day with Schedule visibility control. Just pick date and time and choose whether it should affect form opening or closing time (or both!). Picking a range will make form available within specified time period.
Just check, under Settings in WordPress, that your Timezone is set to the correct city.
Set up email notifications
Sending emails is the core feature of a contact form. That's why we devoted an entire tab for it. To configure emails, navigate to Email tab by clicking it in the navigation at the top of form builder.
You’ll find a number of important settings you’ll want to fill out so your form responses are delivered correctly. At the very least, you’ll want to review these two settings:
- Receive submission alerts — receive an email alert with a copy of the data your users submitted through your form.
- Send confirmation email — send a confirmation email to your users after they submit your form.
Each of those settings reveal a number of related controls once checked. You can configure a 'Reply-To' address here, send a copy of submitted data to your co-workers using Email Bcc address control, or even change email subject based on the submitted data by adding a logic group!
Optionally, you can attach PDF receipts to confirmation emails by checking Attach PDF to confirmation email. Once checked, more controls will show up to let you personalize a receipt with your brand.
If you don’t want to send emails to users or receive alerts, clicking appropriate checkbox will hide the settings and disable that feature.
Style your form
Let’s style your form! Click Style in the tab navigation and you’ll see several groups — click on these to reveal more style settings. Colors, fonts, and everything to do with the way your form looks can be edited here.
3. Add a form to your website
Now that your form is ready, it's time to publish it! You can embed your form in your page or post content, or display it in a sidebar using a widget.
Add a shortcode to a page or post
In your Edit Post / Edit Page screen, click the Add HappyForms button right above your toolbar to reveal the HappyForms selection box, select a form and click Insert. That's it! Your form will show up inside your content.
Use the HappyForms widget
In your Appearance → Widgets screen, drag the HappyForms widget to your sidebar then select a form from the Form dropdown. All done! Your form will show up everywhere that displays your sidebar.
Adding HappyForms to Gutenberg editor
WordPress 5.0 ships with the new Gutenberg editor. Inserting your form to a page using this editor is very easy. Here goes…
- In your Edit Post / Edit Page screen, click the Add block button, search for HappyForms and click to add it to your content.
- Your form preview will render inside the block. You can easily select another form in your block settings panel, and edit your form by clicking Edit Form link.
That's it! You're all set! 👏
Adding an overlay form? Just paste the link to your content. No additional steps required! 🎉
4. Manage your forms
At some point you might want to create a new form, or replace an existing one. That’s where the Forms screen comes to the rescue! Head over to HappyForms → All Forms to manage your forms.
Duplicating and trashing your forms
Let's say you've just created a form, but a new idea just popped to your mind. You'd like to use the existing form as a base, or tweak its style, without redoing everything from scratch? We've got you covered!
In your All Forms screen, hover over the form entry you'd like to duplicate. Doing so reveals an additional line of form actions: click Duplicate to create an exact copy of your form. You can now further edit this form without any risk of losing your original form configuration.
If you find out that the new form looks better than the previous one, you might want to remove the old form. Move your mouse over the original form entry, then click Trash. Your form will be moved to your Trash, and you'll be free to remove it completely or recover it.
Once your form is removed, all submissions belonging to it will be removed, too. That's to ensure your data is always in sync, but pay extra attention or you'll lose your submissions!
To stop accepting submissions for the form but preserve all of its data including submissions, click Archive link in the table. A message will show up on your site's front-end telling users that the form has been archived. You can re-publish this form later by clicking Archive in the filter above table, then Restore link.
Rename a form
Click Edit link in All Forms screen to edit your form. Then look in the sidebar: the very first field lets you change your form title. Once you're done, simply click Update to save new title.
5. Manage your responses (upgraded)
Hopefully by now your recipients are using your sparkling new form. Now it’s time to track the incoming response! Let's hop on to your HappyForms → Activity screen.
The Activity screen lists all the responses you've received from your forms, in order of submission.
Filter your responses (upgraded)
To see your responses from a specific form, just select the name of your form from the Form filter dropdown, right above the table.
To change columns displayed or number of parts in the submission, click Screen Options link at the top right of your screen and change settings to your preference.
Mark as read/unread (upgraded)
What about old and new responses? You can sort your responses by clicking the Submitted On header at the far right of your table, like you would do with your posts. But there's another way to quickly sort between read and unread responses: any unread message is highlighted with a light orange background and burnt orange border on the left.
Each time you edit submission, you're marking it read automatically. You don't need to do so for each submission you've received, though. In your Activity screen, tick the selection checkbox in the left part of your message entries, then select Mark as Read, Mark as Unread from the Bulk Actions dropdown to mark your responses with a single click.
Submission looking spammy? You can move it to Spam folder by choosing Mark as Spam from the Bulk Actions dropdown.
Edit activity (upgraded)
User errors happen! A typo in the submission or even wrong phone number submitted by accident. That's why HappyForms lets you edit each entry in Activity table by clicking Edit link when hovering the submission.
Export as CSV (upgraded)
It's easy to manage your responses, but it would be great to be able to export them in a common format, one that allows importing them in a spreadsheet or your favorite CRM platform. Here's how…
- Head over to HappyForms → Settings screen.
- Expand Import and Export section.
- Pick Export activity to spreadsheet (.csv) from Action dropdown.
- In the next Form dropdown that appears, choose a form you'd like to export responses from.
- Finally, click Export button. Your browser will download all responses for the selected form as a single CSV file to your computer.
Limit responses per user (upgraded)
Want only one response from each user? 👨🏻💻 Fair enough! Click Limit responses option in Setup tab to set maximum number of allowed entries per user.
Using this feature, you can also limit the total number of responses.
Add a unique identifier to your responses (upgraded)
HappyForms also allows for adding a unique ID to each form response and lets you specify its prefix and suffix. To start configuring that option, head over to Setup tab of your form and set your Add identifier to each submission option on.
7. Test your form
How to test a form works
Right after publishing your form, it's a good idea to give it a test run and experience it from the point of view of your recipients. In your Edit Page or Edit Post screen, just click on the permalink or preview link, then submit some test dummy content. You’ll want to double check that your validation rules are correct, and ensure that your email notifications are working. If the submissions checks out, that means your form is ready!
What to do if it arrives in your Spam folder
If you've set up your form to send a confirmation message to your email, HappyForms will send a message containing submission data every time a user submits your form. This message might be considered spam by your email provider or client. In that case, be sure to flag the email sender (which depends on your server configuration) as a trusted address. That should do the trick!
What to do if the email doesn't arrive at all
By default, HappyForms uses WordPress core features to send email messages. WordPress follows your server configuration regarding email sending: if your server forbids access to its email service, your emails might not make it to your inbox, or that of your recipients. Don't panic, though! There's a bunch of solutions to overcome this limitation. The easiest one is to use a third party, SMTP plugin like WP Mail SMTP.
Using SMTP moves email sending from your server to an external service, like GMail or your email provider of choice. If you can, we suggest SMTP over the basic WordPress functionality since it offers improved security, reliability and frees your server from the additional work.
7. Update HappyForms
How to update
Each time we release an update to HappyForms, WordPress will display an little update icon in your Dashboard. When this happens, head over to Plugins and, find HappyForms, and click Update Now.
What happens when you deactivate
We’ve made that easy for you: nothing! 😛
HappyForms will store your existing forms and submissions until the next reactivation. If you'd like to clean things up before deactivating, be sure to remove all your forms, then trash them. This will remove all your form responses, too.
8. Customize HappyForms
Add custom CSS class to parts
Every form part you add has settings you can personalize. One of these settings is the Custom CSS class field found at the bottom of each part in the Build tab. If you’re on to some serious modifications and our controls in Style tab are not cutting it anymore for you, this is the best way to add your own styles.
Add as many classes as you’d like (each separated by a space) to help you target that part in your own stylesheets.
Add custom CSS code
You're too fly for our default style, huh? We get it. You can add your very own spin on things by pasting your custom code into core's own editor.
- Head to Appearance in your dashboard and click Customize.
- Click Additional CSS tab to get to the CSS code editor.
- Roll up those sleeves and add in your code.
9. Manage anti-spam integrations (upgraded)
Spam integrations section in your HappyForms → Settings screen lets you strengthen your forms' spam protection by integrating with reCAPTCHA. Setting it up is just so easy!
- Expand reCAPTCHA accordion.
- Obtain keys for reCAPTCHA V2 using your Google account here.
- Paste your keys to Site key and Secret key fields and click Connect.
- Edit your form and tick Use reCAPTCHA checkbox. Save your form.
reCAPTCHA will now do all the heavy lifting and filter spammy responses for you. When enabling it for another form, just repeat step 4.
10. Manage email integrations (upgraded)
Email integrations section in your HappyForms → Settings screen makes subscribing to mailing lists quick and easy through your email service of choice.
- Select Active Campaign in the Email Integration section.
- Follow this guide to obtain your API URL and API Key.
- Paste your API URL and API Key into the Email Integrations widget.
- Click Save to activate your integration. All done!
- Select AWeber in the Email Integration section.
- Create a developer account, then create an app as outlined in this guide.
- Set your application Client type to Confidential.
- Configure your application OAuth Redirect URL to your site address followed by
/wp-admin/?happyforms-oauth=aweber. Like this:
If you're in doubt with the "OAuth Redirect URL" field, you can click the copy to clipboard link in the Email Integrations section.
Once you have created your application:
- Paste your application Client ID and Client secret into the Email Integrations section and click Save to begin the authorization process.
- On the AWeber authentication screen, log in to your developer account and click Allow access.
- You'll be finally redirected back to your Settings screen. You're connected to AWeber!
- Select Constant Contact in the Email Integration section.
- Create a developer account, then create an app as outlined in this guide.
- Configure your application Redirect URI to your site address followed by
/wp-admin/?happyforms-oauth=constant-contact. Like this:
If you're in doubt with the "Redirect URI" field, you can click the copy to clipboard link in the Email Integrations section.
Once you have created your application, open the application Details screen, then:
- Paste the application API Key into the Email Integrations widget.
- Click Generate Secret, then paste the API Secret into the Email Integrations widget. Click Save to begin the authorization process.
- On the Constant Contact authorization screen, log in to your developer account and click Allow.
- You'll be finally redirected back to your Settings screen. You're connected to Constant Contact!
- Select ConvertKit in Email Integrations section.
- Access your ConvertKit dashboard.
- Click Account Settings in user menu.
- Copy value from API Key input.
- Paste this value to API key field in HappyForms.
- Click Save.
- Select Mailchimp in Email Integrations section.
- Follow this guide on generating Mailchimp API key.
- Paste your key to API key field.
- Click Connect.
- All done! You can now send data to your Mailchimp through HappyForms.
- Select MailerLite in Email Integrations section.
- Head over to Integrations screen in your MailerLite dashboard.
- Copy value of API key input.
- Paste this key to API key field in HappyForms.
- Click Save.
- Select SendGrid in Email Integrations section.
- Navigate to Settings → API Keys screen in SendGrid dashboard.
- Click Create API Key, then fill in the API Key Name so you can later identify it.
- Click Create & View.
- Copy API key from the screen that appears and click Done.
- Paste this key to API key field in HappyForms.
- Click Save.
Using your integration
Once your integration is connected successfully, head over to your form edit screen and proceed to Setup tab. Check Use (your integration) checkbox to enable integration. More options will show up below.
Send email to confirm subscription
Also known as double opt-in. When checked, new subscribers will need to confirm their email address to complete subscription on integrations that support this feature.
Add recipients to list
Control labeled List to add recipient's email to lets you pick a list which you'd like to feed new subscribers into. Adding a logic group makes it possible to drive subscribers to your other list(s) based on the form parts values.
Assign subscribers to groups
If your integration supports this feature, and your list has interest categories (groups) created, you'll notice a new set of controls showing up below Assign responses to these group(s) label. This reflects controls you've set up in your integration account dashboard and allows you to assign new entries to groups automatically. Conditional logic makes it easy to change a group based on submitted data.
Adding tags is a great way to further organize your contacts. On integrations that support tags, Add these tags to responses text field accepts as many tags as you need, separated by commas. And with conditional logic it's super easy to pick another set of tags based on the response.
Assigning parts to subscriber fields
With your email integration enabled, there's a new Map part to (service name) field dropdown control added to each part's More section. Select an email integration field you'd like that part to populate and save your form.
With an active email integration, a new Opt-In part has been added to the bottom of the parts drawer in Build tab. This is perfect for when you'd like to require permission before opting submitted email into your mailing list. No user will be added to your mailing list when this part remains unchecked.
Time to take it for a spin and gain new subscribers for your email campaigns! 📧
11. Manage payment integrations (upgraded)
Stripe ranks as one of the best credit card payment processor out there. With its intuitive interface, ease of setup, and its integration to HappyForms, you can start collecting payments in a matter of minutes.
Setting it up is just so easy:
- While in Integrations section, expand Stripe accordion.
- Follow Where to get keys? link to obtain your account’s keys.
- Paste both publishable and secret key to respective fields.
- Click Save.
That’s really all it takes! To start accepting credit card payments through HappyForms now, just add Payment part to your form.
Don’t feel like going live with payments yet? No problem! That’s what Stripe integration’s test mode is for. After adding your test keys, just check Test mode control and click Save. And done! You can now use any of the test cards available here to double-check that your form is collecting payments flawlessly.
When you’re ready to publish your form to public, make sure Test mode is unchecked to make payments live.
Easily accept payments worldwide with our PayPal integration! It just takes some simple steps:
- While in Integrations section, expand PayPal accordion.
- Obtain your PayPal credentials here.
- Paste your Client ID and Client secret credentials.
- Click Save.
That's it! You're now ready to accept payments with PayPal. To do so, edit your form and add a Payment part.
Configuring PayPal application and obtaining credentials
In order to obtain a set of credentials, PayPal requires you to setup an application first. To create one, head over to the My Apps & Credentials page on the PayPal Developer dashboard.
Sandbox and live mode
PayPal assigns two pairs of credentials to your application. Live credentials are linked to your real PayPal account, while sandbox credentials are linked to a virtual account you can use to test your integration. We suggest to first test your integration in sandbox mode, and switch to live mode once you're sure about your Payment part configuration. For more information, take a look at the PayPal Sandbox Testing Guide.