Let's learn HappyForms in a few quick minutes

  1. 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

    1. Head over to Plugins in WordPress dashboard and click Add New.
    2. In the Search plugins… field, type “HappyForms”.
    3. Find HappyForms in the search results, hover over it, and click Install.
    4. Once it is installed, click Activate. Ta-da! You're done 🤗

    The upgraded plugin

    1. Download HappyForms Upgrade from your account.
    2. Go to Plugins in WordPress dashboard and click Add New.
    3. Click Upload Plugin button at the top of the screen.
    4. Click Browse to choose the downloaded file, then click Install Now.
    5. Once installed, click Activate Plugin button.
    6. 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.

    Back to top
  2. 2. Create your first form

    Let’s set up your first form! Here goes…

    1. Head over to HappyFormsAdd 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.)
    2. Start by naming your form, something meaningful always helps.

    Add or remove form fields

    It’s time to add your form inputs (we call these ‘fields’)! All available fields are listed in the fields drawer. To open it, click Add a Field button.

    1. Scroll down the drawer until you find the field you want.
    2. Click to add this field from the drawer to your form. That’s it! The new field will immediately show in the form preview.

    Removing fields is super-easy, too! Just click the Delete button at the bottom of each field in form builder.

    Add file uploads (upgraded)

    Looking to add a file uploader? The File Upload field 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 fields

    Moving form fields around is just the same as moving Widgets in the Customizer. Click the field header (where the name displays) and drag and drop into place. Easy, right?

    Randomize fields order (upgraded)

    Building survey or a quiz and want to avoid bias in responses? Head over to Setup tab, then check Randomize fields checkbox. This will randomize the order of all form fields for each user visiting your form.

    You can also randomize options in various fields like Dropdown, Single Choice, Multiple Choice, or Matrix Table! Click More button when editing the field, then choose Randomize order of options.

    Edit form fields

    Almost every form field has several core settings — including Label, Width and so on. Clicking the More button will reveal additional settings that are unique to each form field. When you make change to these settings, you’ll see the form preview update immediately.

    Set up your form actions

    Once your form fields 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:

    1. Check Open in overlay window option in Setup tab.
    2. Save your form. There'll be a link in All Forms table for you to copy.
    3. 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:

    1. Receive submission alerts — receive an email alert with a copy of the data your users submitted through your form.
    2. 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.

    Back to top
  3. 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 AppearanceWidgets 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…

    1. In your Edit Post / Edit Page screen, click the Add block button, search for HappyForms and click to add it to your content.
    2. 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! 🎉

    Back to top
  4. 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 HappyFormsAll 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.

    Back to top
  5. 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 HappyFormsActivity 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 fields 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…

    1. Head over to HappyFormsSettings screen.
    2. Expand Import and Export section.
    3. Pick Export activity to spreadsheet (.csv) from Action dropdown.
    4. In the next Form dropdown that appears, choose a form you'd like to export responses from.
    5. 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.

    Back to top
  6. 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.

    Back to top
  7. 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.

    Back to top
  8. 8. Customize HappyForms

    Add custom CSS class to fields

    Every form field you add has settings you can personalize. One of these settings is the Custom CSS class field found at the bottom of each field 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 field 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.

    1. Head to Appearance in your dashboard and click Customize.
    2. Click Additional CSS tab to get to the CSS code editor.
    3. Roll up those sleeves and add in your code.
    Back to top
  9. 9. Manage anti-spam integrations (upgraded)

    Anti-Spam integrations section in HappyFormsSettings screen lets you strengthen your forms' spam protection by integrating with reCAPTCHA. Setting it up is just so easy!

    1. Select reCAPTCHA version from the dropdown.
    2. Obtain keys using your Google account here.
    3. Paste your keys to Site key and Secret key fields.
    4. If you're adding reCAPTCHA v3, you can set a minimum allowed score for letting submissions through. Read more about score here.
    5. Make sure Use reCAPTCHA control is checked in Setup step of 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.

    Back to top
  10. 10. Manage email integrations (upgraded)

    Email integrations section in your HappyFormsSettings screen makes subscribing to mailing lists quick and easy through your email service of choice.

    Active Campaign
    1. Select Active Campaign in the Email Integration section.
    2. Follow this guide to obtain your API URL and API Key.
    3. Paste your API URL and API Key into the Email Integrations widget.
    4. Click Save Changes to activate your integration. All done!
    AWeber
    1. Select AWeber in the Email Integration section.
    2. Create a developer account, then create an app as outlined in this guide.
    3. Set your application Client type to Confidential.
    4. Configure your application OAuth Redirect URL to your site address followed by /wp-admin/?happyforms-oauth=aweber. Like this: https://myawesomesite.com/wp-admin/?happyforms-oauth=aweber.

    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:

    1. Paste your application Client ID and Client secret into the Email Integrations section and click Save Changes to begin the authorization process.
    2. On the AWeber authentication screen, log in to your developer account and click Allow access.
    3. You'll be finally redirected back to your Settings screen. You're connected to AWeber!
    Constant Contact
    1. Select Constant Contact in the Email Integration section.
    2. Create a developer account, then create an app as outlined in this guide.
    3. Configure your application Redirect URI to your site address followed by /wp-admin/?happyforms-oauth=constant-contact. Like this: https://myawesomesite.com/wp-admin/?happyforms-oauth=constant-contact

    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:

    1. Paste the application API Key into the Email Integrations widget.
    2. Click Generate Secret, then paste the API Secret into the Email Integrations widget. Click Save Changes to begin the authorization process.
    3. On the Constant Contact authorization screen, log in to your developer account and click Allow.
    4. You'll be finally redirected back to your Settings screen. You're connected to Constant Contact!
    ConvertKit
    1. Select ConvertKit in Email Integrations section.
    2. Access your ConvertKit dashboard.
    3. Click Account Settings in user menu.
    4. Copy value from API Key input.
    5. Paste this value to API key field in HappyForms.
    6. Click Save Changes.
    Mailchimp
    1. Select Mailchimp in Email Integrations section.
    2. Follow this guide on generating Mailchimp API key.
    3. Paste your key to API key field.
    4. Click Save Changes.
    5. All done! You can now send data to your Mailchimp through HappyForms.
    MailerLite
    1. Select MailerLite in Email Integrations section.
    2. Head over to Integrations screen in your MailerLite dashboard.
    3. Copy value of API key input.
    4. Paste this key to API key field in HappyForms.
    5. Click Save Changes.
    MailPoet
    1. Select MailPoet in Email Integrations section.
    2. Heads up – you'll need MailPoet or MailPoet Premium plugin active at this point. If you haven't already, go ahead to Plugins screen in WordPress and activate MailPoet.
    3. Click Save Changes.
    SendFox
    1. Select SendFox in Email Integrations section.
    2. Go to Settings → API screen in SendFox dashboard.
    3. In Personal Access Tokens section, click Create New Token.
    4. Enter HappyForms for token name, then click Create.
    5. Copy the token and it to Personal access token field in HappyForms.
    6. Click Save Changes.
    SendGrid
    1. Select SendGrid in Email Integrations section.
    2. Navigate to Settings → API Keys screen in SendGrid dashboard.
    3. Click Create API Key, then fill in the API Key Name so you can later identify it.
    4. Click Create & View.
    5. Copy API key from the screen that appears and click Done.
    6. Paste this key to API key field in HappyForms.
    7. Click Save Changes.
    Sendinblue
    1. Select Sendinblue in Email Integrations section.
    2. Head over to SMTP & API screen in your Sendinblue dashboard.
    3. Copy v3 key from API KEY input.
    4. Paste this key to API key field in HappyForms.
    5. Click Save Changes.

    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.

    Assigning fields to subscriber fields

    With your email integration enabled, you'll need to map your fields to the existing fields in your email marketing service. Doing it is so easy!

    1. There's a new Map field to (service name) field dropdown control added to each supported field's More section in Build step.
    2. Select an email integration field you'd like that field to populate and save your form.

    Heads up – for the integration to work, you'll need to have Email field in your form linked to Email address field.

    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 fields 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.

    Tag subscribers

    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.

    Opt-In Choice field

    With an active email integration, a new Opt-In Choice field has been added to the bottom of the fields 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 field remains unchecked.

    Time to take it for a spin and gain new subscribers for your email campaigns! 📧

    Back to top
  11. 11. Manage payment integrations (upgraded)

    Stripe

    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:

    1. Head over to HappyForms → Settings screen.
    2. While in Payment Integrations section, expand Stripe accordion.
    3. Follow Where to get keys? link to obtain your account’s keys.
    4. Paste both publishable and secret key to respective fields.
    5. Click Save.

    That’s really all it takes! To start accepting credit card payments through HappyForms now, just add Payment field to your form.

    Test mode

    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.

    PayPal

    Easily accept payments worldwide with our PayPal integration! It just takes some simple steps:

    1. Head over to HappyForms → Settings screen.
    2. While in Integrations section, expand PayPal accordion.
    3. Obtain your PayPal credentials here.
    4. Paste your Client ID and Client secret credentials.
    5. Click Save.

    That's it! You're now ready to accept payments with PayPal. To do so, edit your form and add a Payment field.

    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 field configuration. For more information, take a look at the PayPal Sandbox Testing Guide.

    Back to top
  12. 12. Manage analytics integrations (upgraded)

    Google Analytics

    Google Analytics is the most used analytics service in the world, and with HappyForms integration you can track all the interaction of your users with your forms.

    Setting it up is dead simple:

    1. Head over to HappyForms → Settings screen.
    2. In the Analytics Integrations section, activate Google Analytics.
    3. Paste your Google Analytics Tracking ID.
    4. Click Save.

    That's it! Your forms will now start tracking events. To turn analytics on and off on a form, just disable the Use Google Analytics option in your form Setup step.

    Back to top
  13. 13. Troubleshooting

    The form builder won't load! What to do? Help!

    That's almost always a clash with another plugin. We always work hard to make HappyForms compatible with the whole plugin-verse. As it turns out, there are tons of possible combinations and it's not humanly achievable to test every one of them. We're sorry!

    To rule out those conflicts, try to deactivate all plugins except HappyForms on Plugins screen.

    If that didn't help, double-check if there's an error printed on HappyFormsAdd New screen. Sometimes WordPress might not display an error on the screen directly but will email it to you instead. Have you got any email about the issue?

    Feel free to a screenshot or copy pasted error message. We'll be happy to help!

    Themes with Kirki framework

    If the error you're seeing includes the word ‘Kirki’, it means your theme uses the Kirki framework. That's cool! But when Kirki is bundled in any theme's code, HappyForms is unable to load the builder properly.

    Luckily, there's easy fix! Go ahead and install Kirki Customizer Framework plugin, then activate it. Both HappyForms and your theme will work happily together from here! 🤗