Dev Diary Ep66 - New Form Components

Elements Dev Diary
1

Hello again,

In today’s Dev Diary, we’re finally showing the new Form Components :fire: While they won’t be shipping in a build this week, we are getting very close and would love to hear your feedback based on what we’ve demoed today.

Useful Links

Suggest a Feature

Don’t forget you can vote and suggest the features you want on our open Roadmap page.

Get Elements.

Elements is currently in Early Access. You can visit the elementsapp.io website to purchase a license today.

Thanks for Your Feedback

As always, keep the feedback coming. Your input has made all the difference so far.

Thank you!

See you soon,
Dan & Team Realmac.

5 Likes
2

Wow, looks very promising.
But I have an instant request: Please integrate an option for hCaptcha as a clean alternative to Gooogle and Cloudfare.

1 Like
3

Looks Great! Forms section is in alphabetical order. As a FORM “container” always needs to be added can we have that a top in position 1 in grid? aids flow. Secondly Is it possible to have the button obfuscate the email address?
Thirdly as layouts are what we normally start with its getting pushed more to bottom of components as more sections are added, once again alpha order. It would be great to be able to move the component bar sections to where you want them as my brain starts at top and works its way down sections. Can’t wait for Beta to play with them. THANKS all for your hardwork!

4

It’s a fantastic form. I like idea vertical and horizontal, And successful other pages are good :+1:t2:

I have some questions;

  • @fox78 same question hCaptcha
  • What is a webhook?
  • How can I hide the blue hover border of an input field that appears automatically in the browser? I tried removing it from the filter input.

Thank you,
Dan, for your hard work.

5

Okay, that was more than I wanted. But in giving me more than I wanted, I now want more ;~).

You’re one step away from doing surveys using the form component. That would be immensely useful.

Oh, and about collections: why isn’t that an element by itself? It’s a type of text that is really a database list of text. That, too, would be useful.

1 Like
6

Would be amazing, if in the theme studio we could setup default form design. So you won’t need to restyle every single one you drop in.

1 Like
7

Forms are looking great. I will definitely switch to Elements as my static site builder just because I can natively use SMTP and use my mail adresses.

Two wishes

  1. Add a honeypot as a simple field in protection. Maybe even rotate with names of the hidden field with every upload so bots don’t catch up easily.
  2. Please implement accessibility basics for forms. Placeholders are not labels. Use fieldgroups, inputs, labels etc :slight_smile:
8

You use the Outline controls :slight_smile:

These controls will be available on all components (where it makes sense).

Screenshot 2025-03-04 at 17.42.00
Screenshot 2025-03-04 at 17.42.00618×572 29.7 KB

2 Likes
9

Have to be honest, I’d not heard of hCaptcha. I’ll take a look and see if we can implement it as an option :slight_smile:

10

A webhook is a way to automatically send form data to a specified URL when the form is submitted. The form triggers an HTTP POST request with the form data to an external service, allowing real-time processing of the data.

One use case would be to send the form data to a webhook in service such as IFTTT or Zapier.

Those services take the form data and allow you to process it as you wish - so you could save the data to a google sheet, add a new subscriber to Mailchimp, and/or create a social media post.

Webhooks opens up the possibility to use your form data in any way you like - it’s a very powerful feature!

1 Like
11

just wondering how to secure that without PHP. But yeah thats a different topic.

12

We already have a Label component that you can add to your forms.

We’re also aware of DOM elements such as fieldset, we’ll ensure we’re using those where appropriate and possible in Elements :slight_smile:

3 Likes
13

Great! :slight_smile: Can I link the label to the input by aria-label or aria-labelledby?

1 Like
14

not just yet, but it is on my list to ensure that works as smoothly as possible :blush:

2 Likes
15

Looking great @dan

1 Like
16

Thanks for Clarify about for outline Accessibility, webhook.

reCAPTCHA protects you against spam and automated abuse. Using Contact Form reCAPTCHA integration module, you can block spam bot submissions.

Thanks @bon

17

Looking good. And you went by it really fast … multiple checkboxes can be checked? Dropdowns are for a singular choice, right.

18

Awesome work! I can’t wait to bring FormsPlus to Elements to make contact forms even better!

Cheers
Greg

5 Likes
19

That is great Greg. Can only imagine what it will be like on Elements.

20

Looks good! Have you thought of the ability for step forms and also dropdown for countries selection.