Populating WS Form Field in a Modal with Button Data Attribute in Bricks

This tutorial shows how a field of a WS Form inside a BricksExtras‘ Modal can be filled with the data attribute values of the clicked buttons/links that open the modal.

This should also work with other plugin’s forms with a few adjustments.

Step 1

Install and activate BricksExtras and activate the license.

Enable Modal in the plugin’s settings.

Step 2

Create a form using your favorite forms plugin. Ours is WS Form.

Step 3

Edit your template/Page with Bricks.

Add two Buttons and a Modal element in a Section’s Container.

Set up data attributes for the buttons. For example,

for Button 1:

for Button 2:

Add a class of say, open-form-1 for both the buttons in the STYLE tab → CSS.

Configure the Modal element’s trigger like this:

Add this custom CSS for the Modal:

%root% .wsf-alert {
	margin-bottom: 0;
}

Add a WS Form element inside the Modal.

Pick the form that should be shown in the modal.

Step 4

Settings (gear icon) → PAGE SETTINGS → CUSTOM CODE → Body (footer) scripts:

<script>
document.addEventListener("DOMContentLoaded", (e) => {
  const buttons = document.querySelectorAll('.open-form-1');
  
  buttons.forEach(button => {
    button.addEventListener('click', function() {
      setTimeout(() => {
        const successMessage = document.querySelector('.x-modal .wsf-alert-success');
        
        const phoneValue = this.getAttribute('data-phone');

        const form = document.getElementById('ws-form-1');

        const inputField = form.querySelector('#wsf-1-field-4');

        if (successMessage) {
          successMessage.style.display = 'none';
        }
        
        form.style.display = 'block';

        if (inputField) {
          inputField.value = phoneValue;
        }
      }, 0); // increase the time (ms) if needed
    });
  });
});
</script>

Replace open-form-1 with the class that’s added to all the buttons.

Replace data-phone with the name of your attribute.

Replace ws-form-1 with the ID of your form. This can be obtained by inspecting the form (inside the modal) on the front end.

Replace wsf-1-field-4 with the ID of the field inside the form.

Inside of Query Loops

If your form and modal is inside of a query loop, the IDs of the form are going to be different, so we need to adjust the code to avoid using IDs.

document.addEventListener("DOMContentLoaded", () => {

   const loopElementID = 'brxe-dgflih'; /* the ID from the element with the query loop */
   const fieldName = 'field_29'; /* the 'name' attribute value on the tel input in the form */
  const buttons = document.querySelectorAll('.open-form-1');
  
  buttons.forEach(button => {
    button.addEventListener('click', function() {
      
      setTimeout(() => {
        
        const loopEl = this.closest('.' + loopElementID);
        const successMessage = loopEl.querySelector('.x-modal .wsf-alert-success');
        const phoneValue = this.getAttribute('data-phone');
        const form = loopEl.querySelector('.wsf-form');
        const inputField = form.querySelector('input[name="' + fieldName + '"]');

        if (successMessage) {
          successMessage.style.display = 'none';
        }
        
        form.style.display = 'block';

        if (inputField) {
          inputField.value = phoneValue;
        }
      }, 0); // increase the time (ms) if needed
    });
  });
});

You’d then want to first change the first three variables at the top.

The loopElementID is going to be the ID of the block/div/container with the query loop enabled.

The fieldName is the value of name attribute on the input where the value needs changing. (it will be field_X where X is the ID of the field inside of your WSForm settings, see image below for where to find the field ID)

Screenshot of wsform settings showing where ID is

Replace open-form-1 with the class that’s added to all the buttons.

And then lastly, replace data-phone with the name of your attribute if using a different attribute name.

Instant access to 390+ Bricks code tutorials with BricksLabs Pro

8 comments

  • it works great with wsform. thank you so much. would be great to see in another tutorial how this works with the native form widget of bricks for all others 👍

  • works perfectly, thank you very much. is there also a way to use the whole thing in a loop? currently the attribute is only taken from the first entry in the modal.

    • A

      Can you share some details of your query loop, button and form setup? Screenshots/screencast etc. will help.

        • A
          David Browne

          Have updated the tutorial to include the code to use if inside of a query loop.

          • works very well, thank you very much (even if the console complains about the duplicate ids because the form is used several times in the loop, but that's a different "problem")

  • cool thing, thanks a lot. is there a way to make this work in a query loop?

  • Kyle Sweezey

    I like this one -- can it be integrated with ACSS modal? I tried replacing what appears to be the unique field ID with a few different values but couldnt get the form to populate.. Is there something simple i might be overlooking?
    I can get brickslabs just want to stay clear unless i require more functionality from the plugins for small stuff..
    Tx!

Leave your comment