Add another email field dynamically with a (+) button

Design help Custom code
1

Hello to the best community!
And to all the custom code ninjas!
I build a referral program for my client. The scenario is simple:
Existing customer enters friends’ or family members’ email and submit.
Easy.
Now, before the submit, I want to add a function that will create one more email field with a “+” button.
And then another, and one more… Each time pressing the “+” a new email field will appear.
I saw some examples in Webflow Showcase, like this " Advanced Webflow Forms", a project by Alex Iglesias.
Go to “Conditional Logic” tab and hit “+” button.

I think it would be a good addition to Webflow’s Community

That’s it. How can I achieve that?

Thank’s a lot!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Ilan_Golan adding dynamically input fields is not too hard. Here is simple code example you can study and customise to your needs.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Add another email input</title>
    <style>
      .input-plus {
        display: flex;
      }

      .inputs-set {
        border: none;
      }

      .input-field {
        border: none;
        border: 1px solid rgb(209, 209, 209);
        padding: 8px;
        margin-right: 4px;
        margin-bottom: 4px;
        display: block;
      }

      .btn-submit,
      .btn-add-input {
        border: none;
        padding: 8px 12px;
      }

      .btn-submit {
        background-color: rgb(152, 247, 199);
      }

      .btn-add-input {
        background-color: rgb(127, 187, 255);
      }
    </style>
  </head>
  <body>
    <form id="form" action="" method="POST">
      <fieldset class="inputs-set" id="email-list" class="input-field">
        <input class="input-field" type="email" name="email_field[]" required />
      </fieldset>
      <button class="btn-submit" type="submit">SUBMIT</button>
    </form>
    <button class="btn-add-input" onclick="addEmailField()" type="">
      Add email
    </button>

    <script>
      const myForm = document.getElementById("email-list");
      
      function addEmailField() {
        // create an input field to insert
        const newEmailField = document.createElement("input");
        // set input field data type to text
        newEmailField.type = "email";
        // set input field name
        newEmailField.name = "email_field";
        // set required
        newEmailField.setAttribute("required", "");

        newEmailField.classList.add("input-field");

        // insert element
        myForm.appendChild(newEmailField);
      }
    </script>
  </body>
</html>

Hope that will help you to understand the princilpes

1 Like
3

HI @Ilan_Golan I have just created for you a bit more fancy example. :wink:

1 Like
4

@Stan You’re amazing! Clear and clean solution!

1 Like
5

Question: do I have to use your whole code (html+css) or I can use fields styled with Webflow, and include your JS?

6

Hi @Ilan_Golan it is up to you. You can do both combine or set it in desired areas (embed, page or site) as custom code. I personally will choose all in custom code as I will have all front of me and I have full control over it.

7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.