Menu icon Foundation
Submitting form in Reveal

Hi Guys,

I am creating a form within a reveal window but on submit i would like to keep the reveal window open and display my thank you message is this possible?

I have attached the current code for the form within the modal window I would just like the success message to load once the form has been submitted but as it stands the reveal window just closes once the submit button is pressed

<!-- MODAL WINDOW -->
           
              <div id="formModal" class="reveal-modal small" data-reveal>
                <form data-abide method="post" action="index.php">
                  

                  <h3>Please fill in the form below and we will contact you shortly</h3>
                  <fieldset>
                  
                     <div class="name-field">
                        <label for="name">Your name <small>required</small></label>
                          <input type="text" name="name" id="name" required pattern="[a-zA-Z]+">
                        <small class="error">Name is required.</small>
                      </div>

                      <div class="email-field">
                        <label for="email">Email <small>required</small></label>
                          <input type="email" name="email" id="email" required>
                        <small class="error">An email address is required.</small>
                      </div>

                      <div class="tel-field">
                        <label for="tel">Telephone</label>
                          <input type="tel" name="tel" id="tel">
                       
                      </div>

                      <div class="textarea">
                        <label for="remarks">Comments</label>
                         <textarea id="remarks" name="remarks" placeholder="Leave your remarks here."></textarea>
                       </div>

                      <button type="submit" value="send">Submit</button>

                  </fieldset> 

                  <?php if (isset($_GET["status"]) AND $_GET["status"] == "thanks") { ?>
                    <p>Thanks for the email! I&rsquo;ll be in touch shortly!</p>
                  <?php } else { ?>
                </form>

                <?php } ?>
                <a href="#" class="close-reveal-modal">&#215;</a>
              </div>
            
           

            <!-- MODAL WINDOW END -->
            

         

revealmodal

Hi Guys,

I am creating a form within a reveal window but on submit i would like to keep the reveal window open and display my thank you message is this possible?

I have attached the current code for the form within the modal window I would just like the success message to load once the form has been submitted but as it stands the reveal window just closes once the submit button is pressed

<!-- MODAL WINDOW -->
           
              <div id="formModal" class="reveal-modal small" data-reveal>
                <form data-abide method="post" action="index.php">
                  

                  <h3>Please fill in the form below and we will contact you shortly</h3>
                  <fieldset>
                  
                     <div class="name-field">
                        <label for="name">Your name <small>required</small></label>
                          <input type="text" name="name" id="name" required pattern="[a-zA-Z]+">
                        <small class="error">Name is required.</small>
                      </div>

                      <div class="email-field">
                        <label for="email">Email <small>required</small></label>
                          <input type="email" name="email" id="email" required>
                        <small class="error">An email address is required.</small>
                      </div>

                      <div class="tel-field">
                        <label for="tel">Telephone</label>
                          <input type="tel" name="tel" id="tel">
                       
                      </div>

                      <div class="textarea">
                        <label for="remarks">Comments</label>
                         <textarea id="remarks" name="remarks" placeholder="Leave your remarks here."></textarea>
                       </div>

                      <button type="submit" value="send">Submit</button>

                  </fieldset> 

                  <?php if (isset($_GET["status"]) AND $_GET["status"] == "thanks") { ?>
                    <p>Thanks for the email! I&rsquo;ll be in touch shortly!</p>
                  <?php } else { ?>
                </form>

                <?php } ?>
                <a href="#" class="close-reveal-modal">&#215;</a>
              </div>
            
           

            <!-- MODAL WINDOW END -->
            

         

This post has been closed. No new replies can be added.

Renier Santander Yhanes almost 6 years ago

My dear friend, for doing that you should submit your form via Ajax and replace the modal content with Ajax Response. I've done it before:
You can perform a jquery "load" request to load directly the content returned form server into the modal. You just got to make sure to send form values as params in the ajax call via $("#myForm").serializeArray(). In server side you perform Form validation and all the stuff you want and return a piece of HTML to replace modal content.
I hope it may be useful for you

Jason Perkins over 5 years ago

Anthony,

Did you ever get a solve for this? I am trying to figure out the same thing for a contact form. Any help would be great!

Lyn over 5 years ago

Hey there Jason,

As Renier said, you should perform the submit asynchronously using AJAX.
You can look at a simple (didn't read all of it but it seems ok) tutorial here http://scotch.io/tutorials/javascript/submitting-ajax-forms-with-jquery

Regards,

Lyn.

Lindsey Klavitter about 5 years ago

If anyone else is still in need on this topic, checkout Lyn's link above, it was a great solution for me.