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
Free version gets all updates automatically by default. If you have upgraded HappyForms, head to the Register page to keep your plugin up to date. We only need you to do this once.
Welcome screen overview
When you activate HappyForms, you’ll see a 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 parts drawer, 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.
- Now let’s start building…
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. And if you’re in a rush, there’s a search feature at the top of the drawer. Adding a part is as easy as…
- Scroll down the part 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 a 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 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 step, then check Shuffle parts checkbox. This will randomize the order of all form parts for each user visiting your form.
You can also shuffle order of options in various parts like Dropdown, Single Choice, Multiple Choice, or Table! Click Advanced button when editing the part, then choose Shuffle order of options.
Edit form parts
Every form part has several core settings, including Title, Width and Required. Clicking the Advanced toggle will also reveal additional settings that are unique to that 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, click Next. In this second step, you’ll find several important settings you’ll want to fill out so your form responses are delivered correctly. As 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.
- On complete redirect link — the URL used to redirect on successful form submission.
To further personalize your emails, we added fields to allow change of email address, display name, subject, and email body. If you don’t want to send emails to a user or receive alerts, clicking appropriate checkbox will hide the settings and disable that feature.
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 step.
- 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 → Overlay section.
Secure your form with password (upgraded)
To increase level of protection, HappyForms upgrade adds Require password option to Setup step. 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, that your Timezome is set to the correct city.
Style your form
Let’s style your form! Click Next 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 responses 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!
Rename a form
Your duplicated form is looking great, but the title includes ‘Copy’. Let's fix that!
Click your form title in your 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 Save Form to go back to your All Forms screen.
5. Manage your responses (upgraded)
Hopefully by now your recipients are now 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 your responses table. This also shows your form headers with your form field names, which a handy way to quickly scan your new submission data.
Mark as read/unread (upgraded)
What about old and new responses? You can sort your responses by clicking the Date 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 blue background.
Each time you click on a message to see the data that comes with it, you're marking that message as read. You don't need to do so for each message 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 or Mark as Spam from the Bulk Actions dropdown to mark your responses with a single click.
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 → Import/Export screen.
- Pick Export responses to spreadsheet (.csv) from action dropdown.
- In the next Select your form… dropdown, choose a form you'd like to export responses from.
- Finally, click Export Responses. 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 step 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 step of your form and set your Add identifying number to messages option on.
6. Manage integrations (upgraded)
HappyForms → Integrations screen lets you connect your forms to your favorite email marketing, payment processing (coming soon), and anti-spam services. Here's how to connect each one of them:
HappyForms lets you strengthen your forms' spam protection by integrating with reCAPTCHA. Setting it up is just so easy!
- Expand reCAPTCHA accordion.
- Obtain keys 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.
We integrate with Mailchimp to make subscribing to mailing lists quick and easy.
To enable connection, you'll need to add your Mailchimp account's API key. Here's how…
- Go to HappyForms → Integrations screen.
- Expand Mailchimp accordion.
- 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.
Once Mailchimp is connected successfully, head over to edit your form and proceed to Setup step. Check Use Mailchimp 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.
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 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 Mailchimp account 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. 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 Mailchimp fields
With Mailchimp enabled, there's a new Assign part to Mailchimp field dropdown control added to each part's More tab in Build step. Select a Mailchimp field (merge tags) you'd like that part to populate and save your form.
With Mailchimp integration, a shiny new part has been added to the bottom of the parts drawer in Build step. This is perfect for when you'd like to require permission before opting submitted email into your mailing list. No data will be sent to Mailchimp when part remains unchecked.
Time to take it for a spin and gain new subscribers for your email campaigns! 📧
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:
- Go to HappyForms → Integrations screen.
- 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:
- Go to HappyForms → Integrations screen.
- 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.
7. Test your form
How to test a form work
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 inbox
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.
8. 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 responses 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.
9. Customize HappyForms
Add custom CSS class to parts
Every form part you add has settings you can personalize. One of such options is Custom CSS class field found at the bottom of each part in the Form Builder. If you’re on to some serious modifications and our controls in Style step 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 (separated by space, please) to help you target that part in your own stylesheets.
Use Additional CSS
The easiest way to add custom styles is to use the Additional CSS tab in Customizer.
- Head over to Appearance in your WordPress dashboard, then click Customize.
- Click Additional CSS tab to get right to the CSS code editor.
- Now it's your turn! Roll up those sleeves and add in your code.
10. Get extra help
Need a hand setting things up? We’d love to help you! Email and we’ll get back to you as quickly as we can.