Now that you have created a new form on your website, you want to make sure you test it for any errors or mistakes before you publish it. It’s never a good feeling to realize that a form hasn’t been working as intended, especially if you’re counting on it to accept registrations or important supporter information.
Ensure the Form is Embedded on a Page
Once you’ve built out a form and added to a page, you’ll want to preview it before making it live on your website.
- Once you are logged in to your site, go to the page where you embedded your new form. Click on the “Preview” button. A new window will open to show you how the form will look when it’s published.
- On the preview page, ensure that your new form shows up and is in the right place on the page.
- If everything looks good, you can close the preview window and continue to test the form. If your form does not appear, follow the steps below or refer to our form building tips offered in our first video (starting at 6:40).
- Return to the page where you’d like the form to appear.
- On the left-hand column, click “Add Form”.
- Choose the form that you would like to add to this page.
- Place your cursor in the location where you would like to embed the form on the page.
- Repeat steps 1-3 to preview the form and ensure it’s embedded properly.
Test for Errors
Now that you know your form is appearing correctly, the next step is to determine if the form will show error messages to your users when necessary. For example, someone might forget to complete a required field.
- Preview the page that your new form is embedded on.
- On the preview page, test your form by filling out some of the form fields. Purposely leave some required fields blank for the sake of the test.
- Submit the test form.
- Make sure that an error message appears at the top of the page indicating that you did not fill out the required fields.
Test Conditional Questions
For this test of your new form, you’ll want to determine if any conditional questions you’ve used display properly. Conditional questions are those where a follow-up question appears depending on the answer to the initial question. For example, if someone answers “yes” to a question about whether or not you should contact them, another field would appear to ask for their phone number.
If your form doesn’t use conditional questions, you can skip this test.
- On the preview page, choose the answer that prompts an additional question.
- If the conditional questions do not show up, or if they show up in the wrong place, go back and adjust your form settings.
The conditional field is working appropriately because an additional question appears when “Yes” is selected.
Test the Confirmation Messages/Thank You Page
When someone successfully submits the form, they should see a confirmation message or be sent to a Thank You page depending on your form settings.
- On the preview page, test the form by filling out all of the required fields.
- Click submit.
- Once the form is submitted, make sure that the appropriate confirmation statement or Thank You page appears.
Test Notification Emails
You have the option to send notification emails when a form is submitted. These notifications are sent to the person who submits the form so that they have a record of the information they shared with you. Make sure to test these emails so that you know what people will be receiving.
- On the preview page, test the form again and make sure to include your email address so that you receive the email.
- Once you have submitted the form, check your email inbox.
- There should be an email confirming your form submission, including a copy of your answers to the form questions.
- If you did not receive an email, follow the steps to set up notifications.
Check Form Entries
You’re almost done! Before publishing your new form, check to see that your test form entries are showing up correctly.
Hover over the Forms button in the left sidebar and click the Entries option that shows up in the menu.
You’ll be taken to a page of all form entries. In the upper left-hand corner is the title of the Form. To test a specific form, click the drop-down button next to the title and select the form you want to test.
Your successful test form submission should show up as an entry.
Test Third-Party Integrations
If you set up any third-party integrations for your form, test them to ensure that they are working properly. Common third-party integrations include email marketing platforms like MailChimp, payment processing tools like Stripe, and CRM software such as Salesforce.
- Check to see if you have any active feeds for integration.
- The settings for third-party integrations appear in the left sidebar within the form’s settings.
- Submit a test form. When the form is submitted, the information included will be passed through any third party tools that are integrated into your form.
- Log in to the third-party tool and make sure all the information has been sent correctly.
- Test each active feed to make sure they all work. There can be multiple active feeds under one integration. For example, with a MailChimp integration, you may have one active feed set up to send emails to donors and another active feed set up to send emails to volunteers.
- Do any cleanup such as refunding payments, removing emails from MailChimp, or anything else that should be removed since this form was only submitted for testing purposes.
Example: Testing a Form Integrated with Stripe
Below we have demonstrated the process of testing a third-party integration in a form. In our example, the form integrates with Stripe, a common payment processor. The following steps outline the process to properly test this hypothetical form.
- Click on Stripe to check the integration settings.
- In the “Stripe” settings, you see two active feeds indicated by the green buttons. One of the Stripe feeds processes one-time donations, and the other processes recurring donations.
- To ensure that a form payment went through, log in to your nonprofit’s Stripe account and check to see if a new payment appeared after you tested the form. Is the amount correct? Is the donor’s personal information, such as their name, correct? Make sure any information you expected to pass through is showing correctly in Stripe.
- Because there are multiple feeds connected to Stripe, make sure to test the form in every way possible to ensure that each feed is working properly.
- In the Stripe settings above, there are two feeds. One Stripe feed is solely used to process one-time payments made through the form. The other Stripe feed is only used to process monthly payments made through the form.
- To check these feeds, test the donation form twice. In the first test, make a one-time payment. In the second test, make a monthly payment.
- Check that those payments appeared in your Stripe account.
- Refund the Stripe donations that were made as part of the test. While it’s important to make these payments to ensure that Stripe is working properly, it’s equally as important to refund these payments so that the testing data does not get mixed in with actual donations/payments made.
Still Have Questions?
Reach out to us within your website’s admin dashboard. Log into your website and then fill out the Website Support form. You’ll hear back from one of Wired Impact’s team members within one business day.