How can I launch/trigger my signup form pop-up with a button or text-link?-CodePudding

I'm using a Shopify plugin (Form Builder) that creates a sign-up form pop-up.

The form is set to trigger when a floating button is pressed, which works as it should (this is out-of-the-box behavior).

I would like to borrow/hijack the floating button's ability to launch the pop-up by pressing a button or text-link that I assign myself.

The floating button and pop-up are called by adding this DIV to a given page:

<div  data-id="NzY5ODg="></div>

The floating button has the following code:

<div  onclick="Globo.FormBuilder.showFloatingForm(this)">
  <div >NOTIFY ME</div>
</div>

If I add the same onclick to my own buttons or links, nothing happens.

The full code that gets included looks like this (I've cleaned up the code a bit, removed the HTML for the actual form and the styling):

<head>
<script type="text/javascript" async="" src="https://cdn.shopify.com/s/files/1/0278/4342/8452/t/11/assets/globo.formbuilder.init.js?v=1649282057&amp;shop=roux-dk.myshopify.com"></script>
</head>
<body>

<div  data-id="76988" id="globo-formbuilder-76988">
<div >

<div >
    <div  onclick=" Globo.FormBuilder.hideFloatingForm(this)">
        <svg viewBox="0 0 20 20"  focusable="false" aria-hidden="true"><path d="M11.414 10l4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z" fill-rule="evenodd"></path></svg>
    </div>

    <form  novalidate="" action="https://form.globosoftware.net/api/front/form/76988/send" method="POST" enctype="multipart/form-data" data-id="76988">
        
[ form HTML goes here, omitted ]       
    
</form>
</div>

<div  onclick="Globo.FormBuilder.showFloatingForm(this)">
    <div >
        NOTIFY ME
    </div>
</div>

<div  onclick="Globo.FormBuilder.hideFloatingForm(this)"></div>

</div>
</div>

</body>

I can't seem to figure out what to do to make my own buttons launch the pop-up form.

I've set up a test page here: https://rouxposter.com

UPDATE: I found a solution, see below. The implementation can be seen on the main page of my shop, by clicking the "get notified when a specific letter is published"-button in the Featured Collection section. I've removed the link to the test page.

Any and all suggestions would be most welcome!

CodePudding user response：

I managed to figure it out!

Some further testing revealed that all that was needed to reveal the pop-up form was to add 'active' to the classes of the containing <div>.

Sadly, the <div> in question didn't have an ID, so I had to go through getElementsByClassName(), which took some trial and error with my very limited javascript knowledge.

In the end, I found two solutions:

Directly in onclick:

<a href="#" onclick="document.getElementsByClassName('globo-form-app')[0].className  = ' active'">show the pop-up form!</a>

With a function:

<script type="text/javascript">
   function showform() {
      document.getElementsByClassName('globo-form-app')[0].className  = ' active';
   }
</script>

<a href="#" onclick="showform()">show the pop-up form!</a>

All that's left is hiding the floating button, which I don't need. I did this via CSS:

.floating-button {
    visibility: hidden;
}

In hindsight, the question I should have asked was:

How do I add a class via onclick to an element that doesn't have an ID

CodePudding user response：

The button is passing (this) which in the case of the button is a button and that button has .form which is the form it is in. The form builder uses that form.

In the case of the div this is a div.

Why not just put the svg in a button?

<button onclick="Globo.FormBuilder.hideFloatingForm(this)">
    <svg viewBox="0 0 20 20"  focusable="false" aria-hidden="true"><path d="M11.414 10l4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z" fill-rule="evenodd"></path></svg>
</button>

UPDATE: To add active to the element with the class globo-form-app you can do this

document.querySelector('.globo-form-app').classList.add('active');