I have created a simple hardcoded popup with an unstyled Mailchimp form. But when I deploy it to a WordPress webpage through the "Insert Headers and Footers" plugin it does not work. When I test the code on an online HTML editor, then it works. I am trying to find out what is the problem, I presume that there is somewhere on the server-side something that is blocking the link to be clicked.
code for the popup:
<script>
var element = document.getElementById("wrapper");
var t=setTimeout(openPopUp,3000);
function openPopUp() {
element = document.getElementById("wrapper");
element.style.visibility = "visible";
element.style.opacity = "1";
}
/* Get all elements with class="close" */
function zatvori() {
var x = document.getElementById("wrapper");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<!DOCTYPE html>
<html lang="de-CH">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Newsletter XXX</title>
<style>
* {
box-sizing: border-box;
margin: 0;
font-family: 'Roboto', Arial, sans-serif;
line-height: 1.2;
}
#wrapper {
position: relative;
height: 950px;
max-width: 100%;
overflow: hidden;
background-size: cover;
background-position: right;
background-repeat: no-repeat;
display: block;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.7s;
transition: opacity 0.7s;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: 430px;
height: 950px;
opacity: 0.5;
-webkit-box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
-moz-box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
}
.content {
position: absolute;
width: 435px;
height: auto;
padding: 28px 25px;
background-color: #82BB28;
z-index: 1;
}
/* Style the close button (span) */
.close {
cursor: pointer;
color:white;
float: right;
position: absolute;
top: 5%;
right: 2%;
padding: 12px 16px;
transform: translate(0%, -50%);
}
.close:hover {background: red;}
div .text-1 p {
text-transform: uppercase;
font-weight: normal;
font-size: 18px;
margin: 0;
line-height: 1.1;
text-transform: uppercase;
color: #000;
}
.text-spacing {
letter-spacing: 1px;
}
.text-2 p {
margin: 40px 0 30px 0;
text-transform: uppercase;
font-size: 19px;
font-weight: bold;
letter-spacing: 1px;
}
.text-3 {
font-size: 12px;
color: #A1A199;
}
.email-btn {
display: flex;
justify-content: space-between;
}
/* Full-width input fields */
input[type=text], input[type=email] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Set a style for button */
.button-form {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.button-form:hover {
opacity:1;
}
#ad-email {
height: 36px;
width: 65%;
padding: 0px 14px;
background-color: #fff;
border: 1px solid #ababab;
border-radius: 3px;
font-size: 12px;
color: #332c2c;
}
/*placeholder*/
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-size: 10px;
color: #ababab;
}
::-moz-placeholder {
/* Firefox 19+ */
font-size: 10px;
color: #ababab;
}
:-ms-input-placeholder {
/* IE 10+ */
font-size: 10px;
color: #ababab;
}
:-moz-placeholder {
/* Firefox 18- */
font-size: 10px;
color: #ababab;
}
#send {
width: 29%;
height: 36px;
background-color: #fff;
border: 1px solid #000;
border-radius: 3px;
font-weight: bold;
font-size: 10px;
color: #000000;
cursor: pointer;
transition: all 0.3s;
}
#send:hover {
background-color: #332c2c;
color: #fff;
}
.accept {
position: relative;
margin: 14px 0 35px 0;
}
#check {
position: absolute;
top: 0;
left:0;
opacity: 0;
}
.accept label {
display: flex;
cursor: pointer;
font-size: 10px;
line-height: 12px;
}
.checkbox-box {
display: inline-block;
width: 12px;
height: 12px;
background-color: #fff;
border: 1px solid #332c2c;
}
#check:checked+label>.checkbox-box {
background-color: #332c2c;
}
.checkbox-label {
margin-left: 5px;
width: calc(100% - 18px);
line-height: 14px;
}
.checkbox-label a {
color: #000;
display: block;
}
.profit-1 {
font-size: 20px;
line-height: 25px;
}
ul.benefits {
column-count: 2;
margin-left: 15px;
padding: 0;
}
li {
width: 95%;
font-size: 10px;
line-height: 14px;
}
#media all and (max-width: 434px) {
.content {
width: 100%;
}
}
#media all and (max-width: 387px) {
.text-1 p, .text-2 p {
font-size: 20px;
}
}
#media all and (max-width: 379px) {
.content {
padding: 20px;
}
.text-2 p {
margin: 20px 0 30px 0;
}
#inputs {
position: relative;
padding-bottom: 15px;
}
#ad-email {
width: 100%;
}
#send {
width: 50%;
position: absolute;
bottom: 0;
left: 0;
}
.checkbox-label a {
display: inline;
}
.profit {
margin-top: 20px;
}
ul.benefits {
column-count: 1;
}
li {
width: 100%;
}
}
#media all and (max-width: 324px) {
.profit-1 {
font-size: 16px;
line-height: 20px;
}
.text-1 p {
text-align: center;
}
.text-2 p {
margin: 15px 0 20px 0;
text-align: center;
}
#send {
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<!-- width - 655 x height -450-->
<div id="wrapper">
<div id="mc_embed_signup">
<form action="https://ozg.us3.list-manage.com/subscribe/post?u=da98377a6d05e2f01558d3e04&id=67aaab10f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mask"></div>
<div class="content">
<div class="text-1">
<p>OZG - DER SPEZIALIST FÜR KOMPLETTAUSSTATTUNG IM<span class="close" onclick="zatvori()">X</span></p>
<p class="text-spacing"> GESUNDHEITSWESEN</p>
</div>
<div class="text-2">
<p>Haben Sie eine Anfrage oder möchten einen persönlichen Beratungstermin buchen?</p>
</div>
<!--
<div id="inputs">
<div class="email-btn">
<input type="email" name="#" placeholder="Adres e-mail" id="ad-email" required />
<input type="submit" name="#" id="send" value="ZAPISUJĘ →">
</div>
</div>
-->
<!--New code-->
<div id="mc_embed_signup_scroll">
<div class="indicates-required"><span class="asterisk">*</span>zeigt erforderlich an</div>
<div class="mc-field-group email-btn text-3">
<input type="email" value="" name="EMAIL" placeholder="Email Address *" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="FNAME" placeholder="Name" class="" id="mce-FNAME">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="LNAME" placeholder="Vorname" class="" id="mce-LNAME">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="UNTERNEHME" placeholder="Unternehmen" class="" id="mce-UNTERNEHME">
</div>
<div class="mc-field-group">
<textarea rows="4" cols="50" name="NACHRICHT" class="text-3" form="usrform" id="mce-NACHRICHT" placeholder="Nachricht">Nachricht
</textarea>
</div>
<div class="accept">
<input type="checkbox" name="#" value="true" id="check" required>
<label for="check"><span class="checkbox-box"></span><span class="checkbox-label">Ja, ich möchte aktuelle News und Aktionen erhalten
</span></label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_da98377a6d05e2f01558d3e04_67aaab10f0" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Abonnieren" name="subscribe" id="mc-embedded-subscribe" class="button-form"></div>
</div>
</div>
</form>
</div>
</div>
<!--End mc_embed_signup-->
</body>
</html>
So the endpoint does not go to Mailchimp, instead goes to wp-admin/admin-ajax.php
Any help is much appreciated.
Related
So my problem may sound banal but it is quite annoying. When I click on the css icons in the css accordion, I have to click on the letters URL so that a link is copied into the clipboard. So far the code works fine.
But I want the whole thing to work also when I click on the white border of the css icon (so above and below the URL letters).
What would I need to change to include the entire css icon to be part of the JS onclick process?
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<div class="blackframe"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<div class="blackframe"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>
</div>
<script>
function myFunction(event) {
/* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText);
/* Alert the copied text */
alert("Copied: " + copyText);
}
</script>
</body>
</html>
```
I have now solved the problem. Someone here on Stackoverflow helped me to combine the two DIV elements into one by using a linear gradient. Now the code works perfectly on both fields because it is now a single div. So in a nutshell, I had to improve the CSS code a bit and the problem was solved. Nevertheless, thanks to all who took the time to help me, but the solution came this time nevertheless differently than expected at first.
Here is the finished example of how it works:
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
.whitepaper {
align-items: center;
cursor: pointer;
text-align: center;
background: linear-gradient(to top, white 12px, black 12px, black 28px, white 28px);
border: 2px solid black;
border-radius: 3px;
color: white;
display: flex;
justify-content: center;
font-size:12px;
font-weight:bold;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background: linear-gradient(to top, black 12px, white 12px, white 28px, black 28px);
border: 2px solid white;
border-radius: 3px;
color: black;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>
</div>
<script>
function myFunction(event) {
/* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText);
/* Alert the copied text */
alert("Kopiert: " + copyText);
}
</script>
</body>
</html>
```
Ditch the onclick, declare your tooltip with your whitepaper class(s), then use a function with a click eventlistener
let tooltip = document.querySelectorAll(".whitepaper");
for (let i = 0; i < tooltip.length; i++) {
tooltip[i].addEventListener("click", function() {
var copyText = event.target.nextSibling.nextSibling.value
navigator.clipboard.writeText(copyText);
alert("Copied: " + copyText);
});
}
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color: black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked+label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input+label+.content {
display: none;
}
input:checked+label+.content {
display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
pointer-events: none;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
</head>
<body>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>
</div>
</body>
</html>
```
This will not open you alert when clicking below or above, but it won't show an error as well.
Just put onClick event inside "blackFrame" div.
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe" onclick="myFunction(event)"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe" onclick="myFunction(event)"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe" onclick="myFunction(event)"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>
</div>
<script>
function myFunction(event) {
/* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText);
/* Alert the copied text */
alert("Copied: " + copyText);
}
</script>
</body>
</html>
```
As far as I know, and based on this documentation https://www.w3schools.com/tags/tag_span.asp, I think that you can't do what you wish using Span tag.
Full Code Here: https://github.com/akashpandya/Portfolio
#media (max-width: 700px) {
.nav-links {
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: 0;
z-index: 2;
text-align: left;
transition: 1s;
}
This is the script to toggle mobile navbar but when i switch to mobile view it is on by default outside of the perameters of the website and I have to turn it off and then on.
<script>
var navlinks = document.getElementById("navLinks");
function showMenu() {
navlinks.style.right = "0";
}
function hideMenu() {
navlinks.style.right = "-200px";
}
</script>
This form input was too long on mobile but the fix I found makes it look terrible
<form>
<input type="text" class="grid-item" placeholder="Name:" id="name" />
<input type="Email" class="grid-item" placeholder="Email:" id="email" />
<input type="number" class="grid-item" placeholder="Phone Number:" id="phone" />
<label for="textarea">Your Message Here:</label>
<textarea type="text" class="grid-item" id="msg"> </textarea>
</form>
CSS Styling for Form
.contact {
width: 60%;
margin: auto;
text-align: center;
margin-top: 150px;
border: 1px solid #f44336;
border-radius: 10px;
}
form {
display: grid;
grid-template-columns: repeat(auto-fit, (2, 1fr));
}
.grid-item {
background-color: #fff3f3;
text-align: center;
margin: 10px 35px;
border: #fff3f3;
padding: 10px;
}
#phone,
#msg,
#btn {
grid-column: span 2;
}
#btn {
margin: 10px auto;
padding: 2px 20px;
border: 1px solid #f44336;
background: #fff;
border-radius: 4px;
transition: 0.5s;
cursor: pointer;
}
#btn:hover {
background: #f44336;
}
label {
text-align: start;
margin: 0 30px;
color: #777;
font-size: 14px;
font-weight: 300;
line-height: 22px;
padding-top: 20px;
}
::placeholder {
color: #777;
font-size: 14px;
}
Set the .nav-links style to right: -200px;
#media (max-width: 700px) {
.nav-links {
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
z-index: 2;
text-align: left;
transition: 1s;
}
I was wondering how would I be able to send the message entered from the form box above, to a specific email address, while using the users entered email as the sending address? Is this possible to accomplish through html or would I have to use some sort of JavaScript to accomplish this? Anything helps and thanks in advance!
<script>
const inputs = document.querySelectorAll(".input");
function focusFunc() {
let parent = this.parentNode;
parent.classList.add("focus");
}
function blurFunc() {
let parent = this.parentNode;
if (this.value == "") {
parent.classList.remove("focus");
}
}
inputs.forEach((input) => {
input.addEventListener("focus", focusFunc);
input.addEventListener("blur", blurFunc);
});
</script>
<style>
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');
#font-face { font-family: Raleway; src: url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
input,
textarea {
font-family: Raleway;
}
.container {
position: relative;
width: 100%;
min-height: 100vh;
padding: 2rem;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.form {
width: 100%;
max-width: 820px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
z-index: 1000;
overflow: hidden;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.contact-form {
background-color: #3A81B4;
position: relative;
}
.circle {
border-radius: 50%;
background: linear-gradient(135deg, transparent 20%, #2d6a96);
position: absolute;
}
.circle.one {
width: 130px;
height: 130px;
top: 130px;
right: -40px;
}
.circle.two {
width: 80px;
height: 80px;
top: 10px;
right: 30px;
}
.contact-form:before {
content: "";
position: absolute;
width: 26px;
height: 26px;
background-color: #3A81B4;
transform: rotate(45deg);
top: 50px;
left: -13px;
}
form {
padding: 2.3rem 2.2rem;
z-index: 10;
overflow: hidden;
position: relative;
}
.title {
color: #fff;
font-weight: 500;
font-size: 1.5rem;
line-height: 1;
margin-bottom: 0.7rem;
}
.input-container {
position: relative;
margin: 1rem 0;
}
.input {
width: 100%;
outline: none;
border: 2px solid #fafafa;
background: none;
padding: 0.6rem 1.2rem;
color: #fff;
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.5px;
border-radius: 7px;
transition: 0.3s;
}
textarea.input {
padding: 0.8rem 1.2rem;
min-height: 150px;
border-radius: 7px;
resize: none;
overflow-y: auto;
}
.input-container label {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
padding: 0 0.4rem;
color: #fafafa;
font-size: 0.9rem;
font-weight: 400;
pointer-events: none;
z-index: 1000;
transition: 0.5s;
}
.input-container.textarea label {
top: 1rem;
transform: translateY(0);
}
.btn {
padding: 0.6rem 1.3rem;
background-color: #fff;
border: 2px solid #fafafa;
font-size: 0.95rem;
color: #1880c9;
line-height: 1;
border-radius: 25px;
outline: none;
cursor: pointer;
transition: 0.3s;
margin: 0;
}
.btn:hover {
background-color: transparent;
color: #fff;
}
.input-container span {
position: absolute;
top: 0;
left: 25px;
transform: translateY(-50%);
font-size: 0.8rem;
padding: 0 0.4rem;
color: transparent;
pointer-events: none;
z-index: 500;
}
.input-container span:before,
.input-container span:after {
content: "";
position: absolute;
width: 10%;
opacity: 0;
transition: 0.3s;
height: 5px;
background-color: #3A81B4;
top: 50%;
transform: translateY(-50%);
}
.input-container span:before {
left: 50%;
}
.input-container span:after {
right: 50%;
}
.input-container.focus label {
top: 0;
transform: translateY(-50%);
left: 25px;
font-size: 0.8rem;
}
.input-container.focus span:before,
.input-container.focus span:after {
width: 50%;
opacity: 1;
}
.contact-info {
padding: 2.3rem 2.2rem;
position: relative;
}
.contact-info .title {
color: #1880c9;
}
.text {
color: #333;
margin: 1.5rem 0 2rem 0;
}
.information {
display: flex;
color: #555;
margin: 0.7rem 0;
align-items: center;
font-size: 0.95rem;
}
.icon {
width: 28px;
margin-right: 0.7rem;
}
.social-media {
padding: 2rem 0 0 0;
}
.social-media p {
color: #333;
}
.social-icons {
display: flex;
margin-top: 0.5rem;
}
.social-icons a {
width: 35px;
height: 35px;
border-radius: 5px;
background: linear-gradient(45deg, #3A81B4, #2d6a96);
color: #fff;
text-align: center;
line-height: 35px;
margin-right: 0.5rem;
transition: 0.3s;
}
.social-icons a:hover {
transform: scale(1.05);
}
.square {
position: absolute;
height: 400px;
top: 50%;
left: 50%;
transform: translate(181%, 11%);
opacity: 0.2;
}
#media (max-width: 850px) {
.form {
grid-template-columns: 1fr;
}
.contact-info:before {
bottom: initial;
top: -75px;
right: 65px;
transform: scale(0.95);
}
.contact-form:before {
top: -13px;
left: initial;
right: 70px;
}
.square {
transform: translate(140%, 43%);
height: 350px;
}
.big-circle {
bottom: 75%;
transform: scale(0.9) translate(-40%, 30%);
right: 50%;
}
.text {
margin: 1rem 0 1.5rem 0;
}
.social-media {
padding: 1.5rem 0 0 0;
}
}
#media (max-width: 480px) {
.container {
padding: 1.5rem;
}
.contact-info:before {
display: none;
}
.square,
.big-circle {
display: none;
}
form,
.contact-info {
padding: 1.7rem 1.6rem;
}
.text,
.information,
.social-media p {
font-size: 0.8rem;
}
.title {
font-size: 1.15rem;
}
.social-icons a {
width: 30px;
height: 30px;
line-height: 30px;
}
.icon {
width: 23px;
}
.input {
padding: 0.45rem 1.2rem;
}
.btn {
padding: 0.45rem 1.2rem;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Form</title>
</head>
<body>
<div class="container">
<span class="big-circle"></span>
<img class="square" alt="" />
<div class="form">
<div class="contact-info">
<h3 class="title">Let's get <b>in touch</b></h3>
<p class="text">
Feel free to send us an email with any inquiries; one of our receptionists will reach out to you as sson as possible.
</p>
<div class="info">
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/location.png " class="icon" alt="" />
<p></p>
</div>
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/email.png" class="icon" alt="" />
<p></p>
</div>
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/phone.png" class="icon" alt="" />
<p></p>
</div>
</div>
<div class="social-media">
<p>Connect with us :</p>
<div class="social-icons">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-instagram"></i>
</a>
<a href="#">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
<div class="contact-form">
<span class="circle one"></span>
<span class="circle two"></span>
<form action="index.html" autocomplete="off">
<h3 class="title">Contact us</h3>
<div class="input-container">
<input type="text" name="name" class="input" />
<label for="">Username</label>
<span>Username</span>
</div>
<div class="input-container">
<input type="email" name="email" class="input" />
<label for="">Email</label>
<span>Email</span>
</div>
<div class="input-container">
<input type="tel" name="phone" class="input" />
<label for="">Phone</label>
<span>Phone</span>
</div>
<div class="input-container textarea">
<textarea name="message" class="input"></textarea>
<label for="">Message</label>
<span>Message</span>
</div>
<input type="submit" value="Send" class="btn" />
</form>
</div>
</div>
</div>
</body>
</html>
yes just use some link like this for in html to send an email:
<a id="email-link" href="mailto:email#example.com?cc=secondemail#example.com, anotheremail#example.com, &bcc=lastemail#example.com&subject=Mail from our Website&body=Some body text here">Send Email</a>
and you can make it change when user change the box message:
function changeLinkHref(){
let message_content = document.getElementById("message-text-area").value;
let name = document.getElementById("name-input").value;
document.getElementById("email-link").href = "mailto:yourmail#yourdomain.zone?&subject=subject&body=" + name + "%0A" + message_content ;
}
and call the function when text-area and text input get changed.
in a tag href attribute body section you can append your email text with htmlEncodedNewLine (%0A)
I have a multi-step form (created in HubSpot): Demo
The form in the demo is Step 1. Once a user completes, step 1, they hit the button and it'll move to step 2 (as you would expect!).
However, I can't seem to get this action working. I have two issues:
If a user is on step 1, I want the step 1 anchor link to remain underlined. Unsure on how I can check what form the user is on using JavaScript.
I need the form to submit and then change to step 2. Issue is they're HubSpot embedded forms, which means I can't really (and don't want to) alter the HTML. I've seen many Bootstrap approaches, but again, don't want to alter the HTML too much and would therefore, like to avoid it.
Step 1 form embed code (in code below):
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "103687",
formId: "7c124354-e1ff-411d-9245-2b214e943a90"
});
</script>
Step 2 form embed code (What I want to appear after form 1 is submitted):
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "103687",
formId: "555bd0a1-adb9-4e31-b71e-e09e4834e844"
});
</script>
What I've tried:
$(document).ready(function() {
$(".modal-content .hs-button").click(function() {
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();
});
if (currentSectionIndex === 3) {
$(document).find(".modal-content .form-columns-2 .form-columns-1").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
Any help/advice would be appreciated!
Full demo code:
$(document).ready(function() {
$(".modal-content .hs-button").click(function() {
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".modal-content").submit(function(e) {
e.preventDefault();
});
if (currentSectionIndex === 3) {
$(document).find(".modal-content").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
a {
cursor: pointer;
}
p {
margin: 0 0 1rem;
font-weight: 400;
}
a {
color: inherit;
cursor: pointer;
}
ul {
padding-left: 0;
margin: 0;
}
.input textarea {
padding-left: 10px !important;
}
.modal-content {
background-color: #097afb;
margin: 4% auto 15% auto;
padding-bottom: 30px;
border-radius: 3px;
}
.steps {
text-align: center;
}
.steps li {
display: inline-block;
margin: 20px;
color: #fff;
font-size: 0.875rem;
padding-bottom: 5px;
text-transform: uppercase;
}
.imgcontainer {
text-align: center;
position: relative;
display: block;
}
.imgcontainer h2 {
font-size: 29px;
padding-top: 50px;
color: #fff;
margin: 0;
text-transform: uppercase;
}
.imgcontainer p {
font-size: 18px !important;
padding-top: 10px;
color: #fff;
}
input[type=text],
input[type=email] {
width: 90%;
padding: 12px 12px;
margin: 10px 50%;
display: inline-block;
border-bottom: 1px solid #414141;
box-sizing: border-box;
font-size: 16px;
background: transparent;
text-transform: uppercase;
border-top: none;
border-left: none;
box-shadow: none;
border-right: none;
}
textarea {
width: 98% !important;
padding: 12px 20px;
margin: 8px 25%;
display: inline-block;
border-bottom: 1px solid #414141 !important;
box-sizing: border-box;
font-size: 16px !important;
background: transparent;
text-transform: uppercase;
border-top: none !important;
border-left: none !important;
box-shadow: none !important;
border-right: none !important;
resize: none;
}
form span:not(.close) {
display: none !important;
}
form .actions {
padding: 0px 20px 0px 0px;
width: 87%;
display: inline-block;
}
form .actions input[type=submit]:hover {
background-color: #000;
color: #fff;
border: 2px solid #000;
}
form .actions input[type=submit] {
border: 2px solid #fff !important;
background-color: #097afb;
padding: 12px 25px !important;
color: #fff !important;
text-decoration: none;
font-size: 0.8125rem;
font-family: "Lato";
font-weight: 700;
float: right;
background-image: none;
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="visible" class="button-outline hero-button button-arrow" onclick="document.getElementById('modal-wrapper').style.display='block'">Click here</a>
<div id="modal-wrapper" class="modal" style="display: none;">
<div>
<div>
<div>
<div>
<span>
<form class="modal-content animate">
<div class="imgcontainer">
<h2 style="text-align: center;">Title</h2>
<p>Lorum Ipsum</p>
</div>
<div class="container">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
// <![CDATA[
hbspt.forms.create({
portalId: "103687",
formId: "7c124354-e1ff-411d-9245-2b214e943a90"
});
// ]]>
</script>
<div></div>
<ul class="steps">
<li class="is-active"><a>Step 1</a></li>
<li>/</li>
<li><a>Step 2</a></li>
<li>/</li>
<li><a>Step 3</a></li>
</ul>
</div>
</form>
</span>
</div>
</div>
</div>
</div>
</div>
i hope this is what you looking for .
$(document).ready(function(){
$(".form-wrapper .button").click(function(){
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();
});
if(currentSectionIndex === 3){
$(document).find(".form-wrapper .section").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
}
h1, h2, h3, h4, h5 ,h6{
font-weight: 200;
}
a{
text-decoration: none;
}
p, li, a{
font-size: 14px;
}
fieldset{
margin: 0;
padding: 0;
border: none;
}
/* GRID */
.twelve { width: 100%; }
.eleven { width: 91.53%; }
.ten { width: 83.06%; }
.nine { width: 74.6%; }
.eight { width: 66.13%; }
.seven { width: 57.66%; }
.six { width: 49.2%; }
.five { width: 40.73%; }
.four { width: 32.26%; }
.three { width: 23.8%; }
.two { width: 15.33%; }
.one { width: 6.866%; }
/* COLUMNS */
.col {
display: block;
float:left;
margin: 0 0 0 1.6%;
}
.col:first-of-type {
margin-left: 0;
}
.container{
width: 100%;
max-width: 700px;
margin: 0 auto;
position: relative;
}
.row{
padding: 20px 0;
}
/* CLEARFIX */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.wrapper{
width: 100%;
margin: 30px 0;
}
/* STEPS */
.steps{
list-style-type: none;
margin: 0;
padding: 0;
background-color: #fff;
text-align: center;
}
.steps li{
display: inline-block;
margin: 20px;
color: #ccc;
padding-bottom: 5px;
}
.steps li.is-active{
border-bottom: 1px solid #3498db;
color: #3498db;
}
/* FORM */
.form-wrapper .section{
padding: 0px 20px 30px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
opacity: 0;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
text-align: center;
position: absolute;
width: 100%;
min-height: 300px
}
.form-wrapper .section h3{
margin-bottom: 30px;
}
.form-wrapper .section.is-active{
opacity: 1;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.form-wrapper .button, .form-wrapper .submit{
background-color: #3498db;
display: inline-block;
padding: 8px 30px;
color: #fff;
cursor: pointer;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
position: absolute;
right: 20px;
bottom: 20px;
}
.form-wrapper .submit{
border: none;
outline: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-wrapper input[type="text"],
.form-wrapper input[type="password"]{
display: block;
padding: 10px;
margin: 10px auto;
background-color: #f1f1f1;
border: none;
width: 50%;
outline: none;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
}
.form-wrapper input[type="radio"]{
display: none;
}
.form-wrapper input[type="radio"] + label{
display: block;
border: 1px solid #ccc;
width: 100%;
max-width: 100%;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
position: relative;
}
.form-wrapper input[type="radio"] + label:before{
content: "✔";
position: absolute;
right: -10px;
top: -10px;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 100%;
background-color: #3498db;
color: #fff;
display: none;
}
.form-wrapper input[type="radio"]:checked + label:before{
display: block;
}
.form-wrapper input[type="radio"] + label h4{
margin: 15px;
color: #ccc;
}
.form-wrapper input[type="radio"]:checked + label{
border: 1px solid #3498db;
}
.form-wrapper input[type="radio"]:checked + label h4{
color: #3498db;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<ul class="steps">
<li class="is-active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
<form class="form-wrapper">
<fieldset class="section is-active">
<h3>Your Details</h3>
<input type="text" name="name" id="name" placeholder="Name">
<input type="text" name="email" id="email" placeholder="Email">
<div class="button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Account Type</h3>
<div class="row cf">
<div class="four col">
<input type="radio" name="r1" id="r1" checked>
<label for="r1">
<h4>Designer</h4>
</label>
</div>
<div class="four col">
<input type="radio" name="r1" id="r2"><label for="r2">
<h4>Developer</h4>
</label>
</div>
<div class="four col">
<input type="radio" name="r1" id="r3"><label for="r3">
<h4>Project Manager</h4>
</label>
</div>
</div>
<div class="button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Choose a Password</h3>
<input type="password" name="password" id="password" placeholder="Password">
<input type="password" name="password2" id="password2" placeholder="Re-enter Password">
<input class="submit button" type="submit" value="Sign Up">
</fieldset>
<fieldset class="section">
<h3>Account Created!</h3>
<p>Your account has now been created.</p>
<div class="button">Reset Form</div>
</fieldset>
</form>
</div>
</div>
I´ve trying to implement this simple slideshow: http://codepen.io/rafaelcastrocouto/pen/doZNMo
But im not having sucess and i dont know what the problem is, the only thing that shows up is the last image of the slideshow, i added the path to the js file, checked if the name are correct, but stil no luck.
var seconds = 2; //time beetwen auto slide
var delay = 8; //time to restart auto slide
var slider = $('#slider');
var images = $('#slider .images');
var controls = $('<div>').addClass('controls');
slider.after(controls);
var width = images.width();
var slideClick = function() {
var b = $(this);
$('.controls div').removeClass('current');
b.addClass('current');
var index = b.index();
images.css('left', -1 * index * width);
};
$('#slider .images img').each(function(i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div>');
controls.append(button);
if (i == 0) {
button.addClass('current')
}
button.click(function() {
clearInterval(autoSlideInterval);
slideClick.apply(this);
setTimeout(function() {
setInterval(autoSlide, seconds * 1000);
}, delay * 1000);
});
});
var autoSlide = function() {
var next = $('.controls .current').next();
if (next.length) {
slideClick.apply(next);
} else {
var first = $('.controls div').first();
slideClick.apply(first);
}
};
var autoSlideInterval = setInterval(autoSlide, seconds * 1000);
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 90px;
text-align: right;
}
.mail2.fixed {
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 90px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
border: 2px solid #ddd;
margin: 1em auto;
width: 350px;
height: 250px;
overflow: hidden;
}
#slider .images {
position: relative;
transition: left 0.5s;
left: 0;
}
#slider .images img {
position: absolute;
}
.controls {
width: 350px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 8px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: firebrick;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundo3.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
.mobile .invisi {
position: absolute;
width: 13%;
height: 10%;
bottom: 14%;
border-radius: 8px;
}
.mobile .invisi:hover {
background: white;
opacity: 0.2;
}
.mobile .appstore {
right: 26.5%;
}
.mobile .googleplay {
right: 11.5%;
}
.contact {
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 a {
display: inline-block;
color: white;
font-weight: bold;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
padding: 12px 60px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/fixedbar.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js/slider.js"></script>
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" alt="Image-1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FFCC47&txtclr=ffffff&txt=Image-2&w=350&h=250" alt="Image-2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-3&w=350&h=250" alt="Image-3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=4763FF&txtclr=ffffff&txt=Image-4&w=350&h=250" alt="Image-4" />
</div>
</div>
<div class="barra2"></div>
<div class="mobile">
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form>
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="nome" size="50" placeholder="Name"/>
<input type="text" name="email" size="50" placeholder="Email"/>
<input type="text" name="subjet" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="message" rows="5" cols="70" placeholder="Message..."></textarea>
Send
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
</body>
</html>
I believe your jquery wasn't included. Here is the same code with jquery included and the slideshow working.
var seconds = 2; //time beetwen auto slide
var delay = 8; //time to restart auto slide
var slider = $('#slider');
var images = $('#slider .images');
var controls = $('<div>').addClass('controls');
slider.after(controls);
var width = images.width();
var slideClick = function() {
var b = $(this);
$('.controls div').removeClass('current');
b.addClass('current');
var index = b.index();
images.css('left', -1 * index * width);
};
$('#slider .images img').each(function(i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div>');
controls.append(button);
if (i == 0) {
button.addClass('current')
}
button.click(function() {
clearInterval(autoSlideInterval);
slideClick.apply(this);
setTimeout(function() {
setInterval(autoSlide, seconds * 1000);
}, delay * 1000);
});
});
var autoSlide = function() {
var next = $('.controls .current').next();
if (next.length) {
slideClick.apply(next);
} else {
var first = $('.controls div').first();
slideClick.apply(first);
}
};
var autoSlideInterval = setInterval(autoSlide, seconds * 1000);
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 90px;
text-align: right;
}
.mail2.fixed {
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 90px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
border: 2px solid #ddd;
margin: 1em auto;
width: 350px;
height: 250px;
overflow: hidden;
}
#slider .images {
position: relative;
transition: left 0.5s;
left: 0;
}
#slider .images img {
position: absolute;
}
.controls {
width: 350px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 8px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: firebrick;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundo3.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
.mobile .invisi {
position: absolute;
width: 13%;
height: 10%;
bottom: 14%;
border-radius: 8px;
}
.mobile .invisi:hover {
background: white;
opacity: 0.2;
}
.mobile .appstore {
right: 26.5%;
}
.mobile .googleplay {
right: 11.5%;
}
.contact {
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 a {
display: inline-block;
color: white;
font-weight: bold;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
padding: 12px 60px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/fixedbar.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js/slider.js"></script>
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" alt="Image-1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FFCC47&txtclr=ffffff&txt=Image-2&w=350&h=250" alt="Image-2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-3&w=350&h=250" alt="Image-3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=4763FF&txtclr=ffffff&txt=Image-4&w=350&h=250" alt="Image-4" />
</div>
</div>
<div class="barra2"></div>
<div class="mobile">
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form>
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="nome" size="50" placeholder="Name"/>
<input type="text" name="email" size="50" placeholder="Email"/>
<input type="text" name="subjet" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="message" rows="5" cols="70" placeholder="Message..."></textarea>
Send
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
</body>
</html>