mardi 28 novembre 2017

How to close popup after checkbox is checked

I'm in trouble trying to satisfate the specific request of a customer. I'm more a designer than a developer, so I need an urgent help.
I'm working on a Wordpress theme with a custom contact form integrated.
I need to place a link on the "Submit" button that when clicked will open a confirm popup. In the popup, the user would find a checkbox with a text saying "I declare that I have read, understood and accepted the information on the processing of my personal data".
Once they checkmark the checkbox, a "Continue" button on the bottom of that popup should enable (prior to checking the checkbox, the Continue button is disabled). When the Continue button is clicked, the popup would go away and the form will be launched.
I know it's a bit difficult, but I'm stucked and the customer really cares a lot about this thing.
Please, help! Every solution is fine.

Here's how I would like the popup to look like:
Popup preview png

Here's the HTML of the form:

<form method="post" name="contactform" class="peThemeContactForm">
                <div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
                    <div class="form-group">
                        <input type="text" name="author" class="form-control input-lg" placeholder="<?php _e("Full Name",'Pixelentity Theme/Plugin'); ?>" required />
                    </div>
                    <div class="form-group">
                        <input type="email" name="email" class="form-control input-lg" placeholder="<?php _e("Email",'Pixelentity Theme/Plugin'); ?>" required />
                    </div>
                    <div class="form-group">
                        <input type="text" name="phone" class="form-control input-lg" placeholder="<?php _e("Phone",'Pixelentity Theme/Plugin'); ?>">
                    </div>
                </div>
                <div class="col-md-7 col-sm-7 col-xs-12 animated hiding" data-animation="slideInRight">
                    <div class="form-group">
                        <textarea name="message" class="form-control input-lg" placeholder="<?php _e("Message",'Pixelentity Theme/Plugin'); ?>" required ></textarea>
                    </div>
                </div>
                <input type="submit" class="btn btn-custom up animated hiding" value="<?php _e("Send Message",'Pixelentity Theme/Plugin'); ?>" data-animation="fadeInUpBig">
            </form>




Aucun commentaire:

Enregistrer un commentaire