Customizing signup form, keep getting CORS error


Jessica Jorgenson
 

Hey y'all!

I'm using the form action link (https://groups.io/g/GROUPNAME/signup?u=LONGNUMBER) for my own form that I built with Mobirise.
I keep getting a CORS issue when I use this link on my site, though when I use the given one under promote it seems to work fine. I just want the form to match the theme of my site, so I have differing HTML/CSS. What else does the form depend on so I can avoid the CORS issue?

Thanks!


Bruce Bowman
 

On Tue, May 19, 2020 at 02:16 PM, Jessica Jorgenson wrote:
I keep getting a CORS issue when I use this link on my site, though when I use the given one under promote it seems to work fine. I just want the form to match the theme of my site, so I have differing HTML/CSS. What else does the form depend on so I can avoid the CORS issue?
You may be omitting an expected input field. In particular, there's one that's hidden off-page (5000 pixels to the left).
 
Hope this helps,
Bruce

Check out the new groups.io Help Center and groups.io Owners Manual


Jessica Jorgenson
 

Thanks for getting back to me, Bruce!

I kept that in mind, but it still doesn't seem to be working.
Here's what I have (with the proper action link):
<div class="row py-2 justify-content-center">
                <div id="groupsio_embed_signup" class="col-12 col-lg-6  col-md-8" data-form-type="formoid">
                    <form action="https://groups.io/g/GROUP/signup?u=NUM" method="post" id="groupsio-embedded-subscribe-form" name="groupsio-embedded-subscribe-form" target="_blank" class="mbr-form form-with-styler">
                        <div id="groupsio_embed_signup_scroll">
                            <div class="form-group col" data-for="email">
                                <input type="email" value="" name="email" class="email" id="email" placeholder="email address" required="" class="form-control display-7" id="email">
                            </div>
                            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_1949773347192752915" tabindex="-1" value=""></div>
                            <div class="col-auto input-group-btn">
                                <input type="submit" value="Subscribe" name="subscribe" id="groupsio-embedded-subscribe" class="btn btn-primary  display-4">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
Is the structure of the divs throwing it off?

Thanks!
 
 
 


Bruce Bowman
 

Jessica -- I assume you actually have the provided group number inserted in the form action query string (i.e.: instead of NUM)?

You also have duplicate id's defined for the email address input field. Not sure why that would break it, but...

Good luck,
Bruce

Check out the new groups.io Help Center and groups.io Owners Manual


Jessica Jorgenson
 

Yup! I have the proper group name and number (copied from the Promote page).

I also uploaded the code I was messing with, whoops - here's what I want the product to look like:

<div class="row py-2 justify-content-center">
                <div class="col-12 col-lg-6  col-md-8 " data-form-type="formoid">
                    <!---Formbuilder Form--->
                    <form action="https://groups.io/g/GROUPNAME/signup?u=NUM" method="POST" class="mbr-form form-with-styler">
                        <div class="row">
                            <div hidden="hidden" data-form-alert-danger="" class="alert alert-danger col-12">
                            </div>
                        </div>
                        <div class="dragArea row">
                            <div class="form-group col" data-for="email">
                                <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_SAME-NUM" tabindex="-1" value=""></div>
                                <input type="email" name="email" placeholder="Email" data-form-field="Email" required="required" class="form-control display-7" id="email-form3-5">
                            </div>
                            <div class="col-auto input-group-btn">
                                <button type="submit" class="btn btn-primary display-4">SUBSCRIBE</button>
                            </div>
                        </div>
                    </form>
                    <!---Formbuilder Form--->
                </div>
            </div>