Dev Diary Ep49 - Let's talk Components

Elements Dev Diary
22

@shubhanyu what fields do you expect in a contact form?

A contact form, I think, is a tricky one. If it has to be included as a standard feature, it will likely be quite basic. And you can create something like that yourself with a custom component with a bit of trial and error. If it needs to be more sophisticated, I assume a third-party developer will quickly come up with one. In RWC, there was also a standard form, but more advanced forms were made available through stacks. For me, a contact form can be part of the release version of Elements, but it’s not absolutely necessary.

23

Hi @Bartje
I would disagree with you. A contact form is for me a basic feature of a website builder. Must not be highly sophisticated one but cover the 80% of the needs.

We can not say with every feature that a 3rd party developer will do something (at the moment there are not so many) or you can build it with a custom component (not everybody wants to create components).

Honestly I do not know a website builder without a contact form and that has some reasons.

1 Like
24

I understand your argument, and it definitely makes sense. However, I think that for many people, a basic form would be too limited. Which fields should be included as standard? I believe that varies for everyone.

25

@Bartje
for me the below fields would be enough

  • Senders first and last name
  • Senders mails adress
  • Subject
  • Message
  • Plus some security fields like Honeypot, Humanity check etc.
  • A kind of clickable field to consent the sender agree to your privacy.

The whole thing customisable so that I can create a simple newsletter registration with only email and send button an I would be lucky. Maybe @shubhanyu would like something else.

You are of course right, that can vary for everybody but the current one in Rapidweaver is not so bad as a standard, it only misses some “modern” stuff like Honeypot and consent field.

5 Likes
26

A default “Contact” page/component which had a basic contact form, email and social media links and a droppable area for a map would be nice.

A highly customisable form would be even better but it probably does fall into the realm of third party developers as I suspect most regular users would only require the basics.

I’m not sure what web black magic is available to developers but I’d love something which doesn’t require PHP.

27

“Contact form” is one of those places where the built-in versus custom nature of elements gets gray. Yes, it’s a common need for sites to have a single contact form, which suggests it should be built-in. Yes, you can create one and make it a global, which allows you flexibility to customize the form and deploy it in various places. Yes, third parties can create more elaborate forms, for those that aren’t up to spending the time and work to create a global.

This exposes one of the key Elements questions we yet don’t know the answer to: just how much will the RW staff do (built-in), how much we’ll have to do ourselves (custom components/globals), and how much will be available from others (for purchase elements).

28

I am good with basic. Basic, for me, is a few text fields (name, email, message box), maybe an option selector, and a checkbox for consent. That’s covers the ‘basics’ for me and should do for most others as well as can be expected as a starter solution out of the box. Not looking for something more than that in the app bundle.

For anything more, there are services that may be used.

2 Likes
29

I am hoping Gregory, @barchard from Chillidog Hosting will convert their contact form over to Elements. Email, plus his hosting and Chillimail service would be outstanding!

2 Likes
30

It’s in the plan, thanks for expressing your support :slight_smile:

Cheers
Greg

5 Likes
31

I’ll just add a simple file upload option in the contact form would be handy.

32

Do you feel you have what you need to make a release by version 1 release of Elements? The original goal was by the end of the year. I think they are shooting for a feature locked public beta by then.

If not what is missing? Sorry if I’m getting the cart before the horse by I need the form to even consider publishing a website with Elements.

1 Like
33

I this going to happen this week? :slight_smile:

1 Like
34

That’s the current plan… we just have a few bits to tidy up before we ship the next beta. Stay tuned!

1 Like
35

Hello @dan

Is random placement of images/ text, as shown in this GIF, possible with Elements?

This was done in Sitely, for example. I want to know if I can do the same in Elements.

CleanShot 2024-12-01 at 13.38.51

36

Not exactly, Elements works differently, but, I’m sure anything you can create in Sitely, you’d be able to create in Elements.

1 Like
37

I know Elements to be far more capable, seeing the videos from Dev Diary. :grin:

It is clear that a lot of thought is going into the design, and the interface reflects as much.

If it is not much of a hassle, would you be able to show how to achieve something similar in Elements, or, point me to a dev diary that shows something similar?

I tried finding something, but when I see components being added in Dev Diary videos, they always conform to a grid. I tried searching with the term ‘flex’ but that did not yield anything either.

I do not need Elements to operate like any other software, no. Elements has its own design thought and process behind it, and it should reflect that (as it does). But, I do want freedom to place whatever I want wherever I want, and was hoping for some demo of that.

38

I asked ChatGPT to produce this works on my iPhone using an apl to run the code it’s called snippet and it works on my iPhone, I am abroad at the moment and do not have my MacBook to test in Elements with a mouse but if someone could just copy into Elements I asked for mobile touch so I could try, not sure if this will work as a component


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Freeform Drag and Drop</title>
  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* Prevent text selection during drag */
    .no-select {
      user-select: none;
    }
  </style>
</head>
<body class="bg-gray-100 p-10">
  <div x-data="freeformDrag()" class="relative max-w-2xl mx-auto p-4 bg-white shadow rounded" style="height: 500px; overflow: hidden;">
    <h2 class="text-xl font-bold mb-4">Freeform Drag-and-Drop</h2>

    <div
      class="relative w-full h-full border border-gray-300 rounded bg-gray-50 overflow-hidden"
      @mousemove.window="drag"
      @touchmove.window="drag"
      @mouseup.window="endDrag"
      @touchend.window="endDrag"
    >
      <template x-for="(item, index) in items" :key="item.id">
        <div
          class="absolute bg-blue-100 border border-blue-300 rounded p-4 cursor-move no-select"
          :style="`top: ${item.y}px; left: ${item.x}px;`"
          @mousedown="startDrag(index, $event)"
          @touchstart="startDrag(index, $event)"
        >
          <p x-text="item.label"></p>
        </div>
      </template>
    </div>
  </div>

  <script>
    function freeformDrag() {
      return {
        items: [
          { id: 1, label: "Item 1", x: 50, y: 50 },
          { id: 2, label: "Item 2", x: 150, y: 100 },
          { id: 3, label: "Item 3", x: 250, y: 150 },
          { id: 4, label: "Item 4", x: 350, y: 200 },
        ],
        draggingIndex: null,
        offsetX: 0,
        offsetY: 0,

        startDrag(index, event) {
          this.draggingIndex = index;

          // Get initial offset
          const item = this.items[index];
          const clientX = event.type === "mousedown" ? event.clientX : event.touches[0].clientX;
          const clientY = event.type === "mousedown" ? event.clientY : event.touches[0].clientY;

          this.offsetX = clientX - item.x;
          this.offsetY = clientY - item.y;

          // Prevent text selection
          document.body.classList.add("no-select");
        },

        drag(event) {
          if (this.draggingIndex === null) return;

          const clientX = event.type === "mousemove" ? event.clientX : event.touches[0].clientX;
          const clientY = event.type === "mousemove" ? event.clientY : event.touches[0].clientY;

          // Update position of the dragged item
          const item = this.items[this.draggingIndex];
          item.x = clientX - this.offsetX;
          item.y = clientY - this.offsetY;
        },

        endDrag() {
          this.draggingIndex = null;

          // Re-enable text selection
          document.body.classList.remove("no-select");
        },
      };
    }
  </script>
</body>
</html>
39

Finally worked out how to copy code on mobile

40

If it works just add a Freeform component to drop n perhaps and keep adding might not work wish I had my MacBook with me

Although the visitor might be able to move the items around as well

Will not work but maybe as an interactive visitors interface it might work for somethings

41

I am pleased to see what important progress Elements is making. The anchors are very important to me and the chance of a contact form gives me hope.
However, there are still things that don’t quite work, typography being one example. This element is intended to hold larger text passages. Unfortunately, it is still not possible to simply copy texts with line breaks. The line breaks are visible in Elements but not on the website.
Please do not forget such important points. Not everyone wants to retype complex legal texts.

1 Like