Hey 👋 Let's learn HappyForms in 15 minutes...
1. Install HappyForms
Ready to get up and running with HappyForms? No stress — it takes just four super-easy steps. Let's get going...
- 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 🤗
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 be redirected 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 (where all the available inputs are) 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 short but 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.
Reorder form parts
Moving form parts around in is just the same as Widgets in Customizer. Click the part header (where the name displays) and drag and drop into place. Nice and easy, right?
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.
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! 👏
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
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 Responses screen.
The Responses screen lists all the responses you've received from your forms, in order of submission.
Filter your responses
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
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 Responses screen, tick the selection checkbox in the left part of your message entries, then select Mark Read or Mark Unread from the Bulk Actions dropdown to mark your responses with a single click.
Export as CSV
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. CSV to the rescue!
In your Responses screen, first filter your responses selecting a form from the Form dropdown. Then click the selection checkbox in the top left part of your message table to select all responses on screen. Finally select Export to CSV: your browser will download your responses to your hard drive as a single CSV file, ready to be imported in third party applications.
Add a unique identifier to your responses
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. 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.
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 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.
8. 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.
9. 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.