Hello All,
I had a very long week of troubleshooting and, with the incredible assistance of @differentdan, was able to identify the issues and fix them.
I’m writing down the solution for any current Elements projects having the same problem, or for any users in the future who may come across this post.
Specifically, this thread is for anyone using the Form component with Fastmail and anyone trying to understand which Spam Protection option to use with the Form Component.
-
Spam Protection. Elements and several of the third party spam protection options offer two settings: “Visible” and “Invisible.” We’re all used to the CAPTCHA box at this point, but that doesn’t mean that they look good. You might be tempted, as I was, to delight at selecting “Invisible,” meaning a site visitor wouldn’t see the box at all because all of the checks are done in the background. It’s true that your visitor won’t see anything, but this pushes all of the checks to the background. In extreme edge cases, these invisible checks will cause Safari to stutter load extremely slowly (7-10 seconds of blank and frozen white webpage). Setting these processes to “Visible” in Elements and in the third party spam protection configuration will help, but not totally eliminate this issue. In my testing, it was only in Safari (macOS/iOS), and only truly noticeable with very aggressive scrolling. This would be the visitor who returns to your site, knowing exactly what they want, and that item is far down the page. Turning Spam Protection off (not ideal) or using the Honeypot option fixes this issue. My sites are not crazy popular, but in several days of testing, using a proxied Cloudflare DNS record + the Honeypot has resulted in no spam.
-
Form Fails to Send Every Time (500 Error). If you’re like me, the drop in building blocks as seen in Elements Essentials and Flexion 2 are a great way to learn advanced Elements techniques quickly. I don’t use forms often, but I needed to use a form on a project and was very happy to drop in a pre-built one from Elements Essentials. The form will work, but be careful to update the Input component’s “Name” field. Each field needs a unique “Name” for the form to work. Copy and paste all you like! Just don’t forget this last step for each new field.
-
Fastmail. The above two items work perfectly for Fastmail, and likely any other mail service. For Fastmail specifically, as the Elements docs say, use an App Specific Password generated in your Fastmail dashboard for the password. The password must include the spaces exactly as shown in the Fastmail interface. The username is your Fastmail Username, and the From Address & To Address should be email addresses already on your Fastmail account (alias addresses are ok to use!).
I hope this is helpful to someone out there, and will save you several hours of testing and troubleshooting.
I used Rapidweaver Classic for more than a decade, and I have to remind myself that Elements is a totally new platform. Where in Classic I would have needed to very creatively come up with a workaround or solution, Elements is built (as far as I can tell) to just work the first time and in a straightforward way. Once you get the pieces of the puzzle into the right place, the whole system just works.