Currently, I have successfully created a pop-up form, but there are two issues that need fixing.
- The form is not responsive.
- After filling/submission, the form redirects to a separate landing page for another fill out.
Expected Outcome: Ideally, I would prefer a simple message in the modal after submission such as "Thank you."
This might be related to an issue with drip, though it is uncertain at this point.
Below is the code for the form:
<div class="modal" id="myModal">
<!--{cke_protected}{C}%3C!%2D%2D%20Modal%20content%20%2D%2D%3E-->
<div class="modal-content">
<div class="modal-header"><span class="close">×</span></div>
<div class="modal-body">
<form action="https://www.getdrip.com/forms/828915861/submissions" data-drip-embedded-form="828915861" method="post">
<h3 data-drip-attribute="headline">Get a copy of Webinar Promotion Strategies for you to read at your leisure</h3>
<div data-drip-attribute="description"><br></div>
<div><label for="drip-fname">First Name</label><br><input id="drip-fname" data-cke-saved-name="fields[fname]" name="fields[fname]" type="text" value="" data-cke-editable="1" contenteditable="false"></div>
<div><label for="drip-email">Email Address</label><br><input id="drip-email" data-cke-saved-name="fields[email]" name="fields[email]" type="email" value="" data-cke-editable="1" contenteditable="false"></div>
<div aria-hidden="true" style="display: none;"><label for="website">Website</label><br><input autocomplete="false" id="website" data-cke-saved-name="website" name="website" tabindex="-1" type="text" value="" data-cke-editable="1" contenteditable="false"></div>
<div><input data-drip-attribute="sign-up-button" type="submit" value="Download Now" data-cke-editable="1" contenteditable="false"></div>
</form>
</div>
<div class="modal-footer"><button></button></div>
</div>
Check out the CSS styling:
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
flex-direction: column;
align-items: stretch;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 25%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 10px 16px;
background-color: #d6812e;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 10px 16px;
background-color: #d6812e;
}
</style>