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!
    Back to top
  2. 2. Create your first form

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

    1. Head over to FormsAdd 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 submissions? Head over to Setup tab, then check Shuffle order of 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 Shuffle order of choices.

    Edit form fields

    Almost every form field has several core settings — including Label, Width and so on. 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 an option to hide the form after submit, setting up a redirect, enabling reCAPTCHA spam protection, and so oodles more.

    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 submissions are delivered correctly. At the very least, you’ll want to review these two settings:

    1. Email me a copy of each submission — receive an email alert with a copy of the data your users submitted through your form.
    2. Email respondent a copy of their submission — 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!

    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! 👏

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

    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 submission (upgraded)

    Hopefully by now your recipients are using your sparkling new form. Now it’s time to track the incoming submission! Let's hop on to your FormsActivity screen.

    The Activity screen lists all the submissions you've received from your forms, in order of submission.

    Filter your submissions (upgraded)

    To see your submissions 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 submissions? You can sort your submissions 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 submissions: 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 submissions 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 View link when hovering the submission.

    Export as CSV (upgraded)

    It's easy to manage your submissions, 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 FormsSettings screen.
    2. Expand Import and Export section.
    3. Pick Export submissions to spreadsheet (.csv) from Action dropdown.
    4. In the Form dropdown, choose a form you'd like to export submissions from.
    5. Finally, click Download Export File button button. Your browser will download all submissions for the selected form as a single CSV file to your computer.
    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 submissions, 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 Additional CSS class(es) 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)

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

    1. Select either v2 or v3 under Service.
    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 submissions for you. When enabling it for another form, just repeat step 4.

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

    Email integrations in your FormsIntegrations screen make subscribing to mailing lists quick and easy through your email service of choice.

    ActiveCampaign
    1. Follow this guide to obtain your API URL and API Key.
    2. Paste your API URL and API key into the ActiveCampaign widget.
    3. Click Save Changes to activate your integration. All done!
    AWeber
    1. Click Get your code in AWeber widget to open AWeber authentication screen.
    2. Authenticate with your AWeber credentials to obtain your verification code.
    3. Copy your verification code to your clipboard and close the browser tab.
    4. Back in the AWeber widget, paste your verification code in the Verification code field.
    5. Click Save Changes.
    Constant Contact
    1. Create a developer account, then create an app as outlined in this guide.
    2. 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

    Once you have created your application, open the application Details screen, then:

    1. Paste the application API Key into the Constant Contact widget.
    2. Click Generate Secret, then paste the API Secret into the Constant Contact 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. Access your ConvertKit dashboard.
    2. Click Account Settings in user menu.
    3. Copy value from API Key input.
    4. Paste this value to API key field in ConvertKit widget.
    5. Click Save Changes.
    Mailchimp
    1. Follow this guide on generating Mailchimp API key.
    2. Paste your key to API key field in Mailchimp widget.
    3. Click Save Changes.
    4. All done! You can now send data to your Mailchimp through Happyforms.
    MailerLite
    1. Head over to Integrations screen in your MailerLite dashboard.
    2. Copy value of API key input.
    3. Paste this key to API key field in MailerLite widget.
    4. Click Save Changes.
    MailPoet
    1. You'll need MailPoet or MailPoet Premium plugin active. If you haven't already, go ahead to Plugins screen in WordPress and activate MailPoet.
    SendFox
    1. Go to Settings → API screen in SendFox dashboard.
    2. In Personal Access Tokens section, click Create New Token.
    3. Enter Happyforms for token name, then click Create.
    4. Copy the token and it to Personal access token field in SendFox widget.
    5. Click Save Changes.
    SendGrid
    1. Navigate to SettingsAPI Keys screen in SendGrid dashboard.
    2. Click Create API Key, then fill in the API Key Name so you can later identify it.
    3. Click Create & View.
    4. Copy API key from the screen that appears and click Done.
    5. Paste this key to API key field in SendGrid widget.
    6. Click Save Changes.
    Sendinblue
    1. Head over to SMTP & API screen in your Sendinblue dashboard.
    2. Copy v3 key from API KEY input.
    3. Paste this key to API key field in Sendinblue widget.
    4. Click Save Changes.

    Using your integration

    Once your integration is connected successfully, head over to your form edit screen and proceed to Email tab. Pick your integration in Connect with dropdown to enable it. 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 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 your integration's 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 users to list

    Control labeled List to add user'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 Group to add user's email to 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 submissions 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 submission.

    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 FormsIntegrations screen.
    2. Paste both publishable and secret key to respective fields in Stripe widget.
    3. Click Save Changes.

    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 set Mode to Test and click Save Changes. 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 Mode is set to Live to make payments live.

    PayPal

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

    1. Head over to FormsIntegrations screen.
    2. Obtain your PayPal credentials here.
    3. Paste your Client ID and Client secret credentials in PayPal widget.
    4. Click Save Changes.

    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 FormsIntegrations screen.
    2. Paste your Google Analytics Tracking ID in Google Analytics widget.
    3. Click Save Changes.

    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. Manage automation integrations (upgraded)

    Zapier

    Zapier makes it easy to automate your workflow and with our integration, you can make your forms talk with thousands of third party services. Get started with a few simple steps:

    1. Head over to FormsIntegrations screen.
    2. In Zapier widget, fill in the API key field. Copy the API key to your clipboard.
    3. Hop on your Zapier dashboard and make a new zap.
    4. Choose Happyforms as the trigger app, and New Activity as the trigger event.
    5. Continue to the account setup step and add a new account.
    6. Paste your API Key in the Api Key field.
    7. Enter your site address (without /wp-admin) in the Site URL field.
    8. Click Yes, continue to proceed with your zap setup.

    That's it! Once your zap is configured, new submissions will trigger it immediately.

    Integromat

    Connect your form to Integromat and create fully automated advanced workflows. It's easy thanks to our integration:

    1. Head over to FormsIntegrations screen.
    2. In Integromat widget, fill in the API key field. Copy the API key to your clipboard.
    3. In your Integromat dashboard, create a new scenario.
    4. Select Happyforms as the starting app and click Continue.
    5. In your scenario editor, select Happyforms and the New Activity trigger.
    6. In the Webhook step, click Add to create a new webhook.
    7. In the Add a hook step, click Add to create a new connection.
    8. Enter your site address (without /wp-admin) in the Site URL field.
    9. Paste your API Key in the API Key field.
    10. Click Continue to save your new connection.

    That's all! You can now connect 3rd party apps and data transformations. When your scenario is active, new submissions will trigger it immediately.

    Integrately

    Build powerful automations thanks to our Integrately integration. It's super simple:

    1. Head over to FormsIntegrations screen.
    2. In Integrately widget, fill in the API key field. Copy the API key to your clipboard.
    3. In your Integrately dashboard, create a new automation.
    4. Select Happyforms as the app 1 and pick a service of your choice as the app 2.
    5. Pick a ready-made automation, or create your own, then click Go.
    6. In the Automation screen, click Add connection under Happyforms to create a new connection.
    7. Enter your site address (without /wp-admin) in the Site URL field.
    8. Paste your API Key in the API Key field.
    9. Click Continue to save your new connection.

    Done! Once you've connected a 3rd party service, you can test your automation and go live.

    Back to top
  14. 14. 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 FormsAdd 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 email us 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! 🤗