Question 11783 in Shopify Question posted in
The Shopify help center can be found here.

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

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 class="globo-formbuilder" data-id="NzY5ODg="></div>

The floating button has the following code:

<div class="floating-button  bottom right" onclick="Globo.FormBuilder.showFloatingForm(this)">
  <div class="fabLabel">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 class="globo-formbuilder" data-id="76988" id="globo-formbuilder-76988">
<div class="globo-form float-form globo-form-id-76988">

<div class="globo-form-app float-layout">
    <div class="header dismiss " onclick=" Globo.FormBuilder.hideFloatingForm(this)">
        <svg viewBox="0 0 20 20" class="" 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 class="g-container" 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 class="floating-button  bottom right" onclick="Globo.FormBuilder.showFloatingForm(this)">
    <div class="fabLabel">
        NOTIFY ME
    </div>
</div>

<div class="overlay" 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!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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" class="" 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');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search