I know this question has been asked lots, but I am a complete novice at coding and could therefore do with some help.
I'm adding a mailchimp subscribe box in a wordpress footer. I've followed instructions on how to customer the naked version to match formatting etc.
The final part is to get all three boxes in a single line at the bottom of the page. I just can't get my head around it.
Please help!
#mailchimp {
background: #F7C6CB;
color: #3D6392;
padding: 10px 7px;
}
#mailchimp input {
border: medium none;
color: #444;
font-family: architects daughter;
font-size: 0.7rem;
font-style: italic;
margin-bottom: 2px;
padding: 2px 2px;
width: 300px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#mailchimp input.email {
background: #fff
}
#mailchimp input.name {
background: #fff
}
#mailchimp input[type="submit"] {
background: #BBD8DC;
color: #444;
cursor: hand;
font-size: 0.7rem;
width: 100px;
padding: 4px 0;
}
#mailchimp input[type="submit"]:hover {
color: #ffff
}
<div id="mailchimp">
<form action="//rocketfuelforlife.us16.list-manage.com/subscribe/post?u=3234aff37dd880f87f2f30d0e&id=3f511425b1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input type="text" size="30" value="Enter your first name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input type="email" size="30" value="Enter your email address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<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>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
</div>
I played around a bit with your code. I removed the clear class around your input submit and move the validation div below the input. I also reduced the width of the input to make sure they had enough space to align next to each other on one line. Run the code below the see the result of this:
#mailchimp {
background: #F7C6CB;
color: #3D6392;
padding: 10px 7px;
}
#mailchimp input {
border: medium none;
color: #444;
font-family: architects daughter;
font-size: 0.7rem;
font-style: italic;
margin-bottom: 2px;
padding: 2px 2px;
width: 200px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#mailchimp input.email {
background: #fff
}
#mailchimp input.name {
background: #fff
}
#mailchimp input[type="submit"] {
background: #BBD8DC;
color: #444;
cursor: hand;
font-size: 0.7rem;
width: 100px;
padding: 4px 0;
}
#mailchimp input[type="submit"]:hover {
color: #ffff
}
<div id="mailchimp">
<form action="//rocketfuelforlife.us16.list-manage.com/subscribe/post?u=3234aff37dd880f87f2f30d0e&id=3f511425b1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input type="text" size="30" value="Enter your first name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input type="email" size="30" value="Enter your email address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
<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>
</form>
</div>
I added "display: inline-block" style to both of the text inputs and also the submit input to force them onto the same line. I also moved the submit input out of the div.clear and put it directly under the email input, which allows it to be in the same line.
#mailchimp {
background: #F7C6CB;
color: #3D6392;
padding: 10px 7px;
}
#mailchimp input {
border: medium none;
color: #444;
font-family: architects daughter;
font-size: 0.7rem;
font-style: italic;
margin-bottom: 2px;
padding: 2px 2px;
width: 300px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
display: inline-block;
}
#mailchimp input.email {
background: #fff
}
#mailchimp input.name {
background: #fff
}
#mailchimp input[type="submit"] {
background: #BBD8DC;
color: #444;
cursor: hand;
font-size: 0.7rem;
width: 100px;
padding: 4px 0;
display: inline-block;
}
#mailchimp input[type="submit"]:hover {
color: #ffff
}
<div id="mailchimp">
<form action="//rocketfuelforlife.us16.list-manage.com/subscribe/post?u=3234aff37dd880f87f2f30d0e&id=3f511425b1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input type="text" size="30" value="Enter your first name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input type="email" size="30" value="Enter your email address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
<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>
<div class="clear">
</div>
</form>
</div>
Okay, so I just created parent divs for the <input> blocks and then I just floated the divs left and right and then changed the #MailChimp css style to have a height of 20px. Here is my JSFiddle
Related
The code is as follows:
.form-wrapper {
border: 1px solid rgb(68, 240, 0);
background-image: radial-gradient(rgb(252, 252, 252), #ffffff);
border-radius: 20px;
width: 400px;
position: relative;
padding: 10px 40px;
margin: 10px auto;
}
.close-button {
position: absolute;
right: 0px;
left: auto;
border: 1px solid rgb(240, 0, 0);
width: 40px;
}
.form-header {
border: 1px solid rgb(232, 0, 240);
position: relative;
text-align: center;
}
.form-header h3 {
display: inline;
}
.form-outline {
border: 1px solid rgb(237, 250, 235);
border-radius: 20px;
padding: 5px 30px;
}
.form-field {
margin-top: 5px;
}
.form-field input {
outline: none;
width: 100%;
display: block;
padding: 5px;
font-size: 15px;
border: 2px solid rgb(179, 177, 177);
border-radius: 6px;
background-color: rgba(227, 247, 250, 0.918);
}
.form-field small {
display: block;
visibility: hidden;
}
<div class="form-wrapper">
<div class="close-button"><i class="far fa-times-circle "></i></div>
<div class="form-header">
<!-- <div style="border: 2px solid aqua;"></div> -->
<h3> Lets talk!</h3>
</div>
<form class="form-outline">
<div class="form-field">
<label class="field-title">Name </label><br>
<input type="text" id="" value="" placeholder="Enter your name."> <br>
<small class="error-message">Error message</small>
</div>
<div class="form-field">
<label class="field-title">Phone </label><br>
<input type="text" id="" value="" placeholder="Enter your phone number."> <br>
<small class="error-message">Error message</small>
</div>
<div class="form-field">
<label class="field-title">Organization </label><br>
<input type="text" id="" value="" placeholder="Enter your organization's name."><br>
<small class="error-message">Error message</small>
</div>
<div class="form-field">
<label class="field-title">Address </label><br>
<input type="text" id="" value="" placeholder="Enter your address."> <br>
<small class="error-message">Error message</small>
</div>
<div class="form-field">
<label class="field-title">Email </label><br>
<input type="text" id="" value="" placeholder="Enter your email."> <br>
<small class="error-message">Error message</small>
</div>
</form>
</div>
The result looks like this.
I want to move the "close button" to the right side sticking to the green border of form-wrapper div. The right property is not working. I don't know if it is a silly mistake or lack of knowledge. Any help or direction would be appreciated.
I tested the right property using another html file and it is working perfectly. But I could not move this close button to right.
try to add this to your close-button class. it worked for me.
.close-button {
direction: rtl;
}
Your code is fine and should work propely. Maybe your styles without right: 0px; is cached by browser. Try to open your project in new private / incognito tab. It prevents browser to read cached styled.
HTML
<div class="form">
<!-- USERNAME BOX-->
<label for="username"><b>Username or email address</b></label><br>
<input type="text" name="username" value=""><br>
<!-- PASSWORD BOX -->
<label for="password">
Password
Forgot password?
</label><br>
<input type="password" name="password" value=""><br>
<!-- SIGN IN BUTTON -->
<input type="button" name="button" value="Sign in">
</div>
CSS
.form{
background: white;
border: 1px solid #aaa;
padding: 15px;
border-radius: 5px;
}
label{
font-size: 12px;
font-weight: 600;
text-align: left;
}
input{
margin-top: 5px;
margin-bottom: 10px;
width: 300px;
height: 25px;
border-radius: 5px;
border: 1px solid #aaa;
text-indent: 5px;
box-shadow: inset 0 0 1px #000;
outline-color: dodgerblue;
}
input[type="button"]{
background: green;
color: white;
font-weight: 600;
height: 30px;
border: darkgreen;
}
label a{
float: right;
transform: translateY(3px);
text-decoration: none;
}
I want Forgot password? to end exactly where the input field ended. I have tried to do this but i couldn't. Plese help me to fix this. It shifted towards right from the required position.
You should add the following css for label so that label will be same width as input, and its Forgot password? aligns with input field.
width: 300px;
display: inline-block;
.form{
background: white;
border: 1px solid #aaa;
padding: 15px;
border-radius: 5px;
}
label{
font-size: 12px;
font-weight: 600;
text-align: left;
width: 300px;
display: inline-block;
}
input{
margin-top: 5px;
margin-bottom: 10px;
width: 300px;
height: 25px;
border-radius: 5px;
border: 1px solid #aaa;
text-indent: 5px;
box-shadow: inset 0 0 1px #000;
outline-color: dodgerblue;
}
input[type="button"]{
background: green;
color: white;
font-weight: 600;
height: 30px;
border: darkgreen;
}
label a{
float: right;
/* transform: translateY(3px); */
text-decoration: none;
}
<div class="form">
<!-- USERNAME BOX-->
<label for="username"><b>Username or email address</b></label><br>
<input type="text" name="username" value=""><br>
<!-- PASSWORD BOX -->
<label for="password">
Password
Forgot password?
</label><br>
<input type="password" name="password" value=""><br>
<!-- SIGN IN BUTTON -->
<input type="button" name="button" value="Sign in">
</div>
I think you positioned you forgot password on the wrong place.
<div class="form">
<!-- USERNAME BOX-->
<label for="username"><b>Username or email address</b></label><br>
<input type="text" name="username" value=""><br>
<!-- PASSWORD BOX -->
<label for="password">
Password
</label><br>
<input type="password" name="password" value="">Forgot password?
<br>
<!-- SIGN IN BUTTON -->
<input type="button" name="button" value="Sign in">
</div>
Firstly, you need to remove the <br>s after the labels:
<div class="form">
<!-- USERNAME BOX-->
<label for="username"><b>Username or email address</b></label>
<input type="text" name="username" value=""><br>
<!-- PASSWORD BOX -->
<label for="password">
Password
Forgot password?
</label>
<input type="password" name="password" value=""><br>
<!-- SIGN IN BUTTON -->
<input type="button" name="button" value="Sign in">
</div>
Then, you need to add display: block; and width: 310px; to the label:
label {
font-size: 12px;
font-weight: 600;
text-align: left;
display: block;
width: 310px;
}
.login-page {
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background-color: black;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
}
.form input {
outline: none;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
text-transform: capitalize;
outline: 0;
background: orange;
width: 100%;
border: none;
padding: 15px;
font-size: 14px;
color: white;
cursor: pointer;
}
.form button:hover,
.form button:active {
background: green;
border: none;
}
.form .zaten {
margin: 15px 0 0;
color: white;
font-size: 12px;
}
.form .zaten a {
color: orange;
text-decoration: none;
}
.register-form {
display: none;
}
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="Name Surname">
<input type="password" placeholder="Password">
<input type="email" placeholder="Email">
<input type="tel-no" placeholder="Telephone Number">
<button type="button">Register</button>
<p class="zaten"> Already have a account? <a href="#"> Login </p>
</form>
<form class="login-form">
<input type="text" placeholder="Email or Phone Number">
<input type="password" placeholder="Password">
<button type="button">Login</button>
<p class="zaten"> Not registered yet? <a href="#"> Register </p>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$('.zaten a').click(function()
{
$('form').animate({height:"toggle",opacity:"toggle"}, "slow");
});
</script>
</body>
When I look at how my site looks, I saw <p class="zaten"> Not registered yet? <a href="#"> Register </p> place as whole clickable orange text. How can I change the color and make it text, not link.
If you have difficulty understanding pardon me, English is not my native language. If you need more informaiton, ask freely.
"</a>"missing closing tag...
<p class="zaten"> Not registered yet? Register </p>
$('.zaten a').click(function()
{
$('form').animate({height:"toggle",opacity:"toggle"}, "slow");
});
.login-page {
width:360px;
padding: 10% 0 0;
margin: auto;} .form {
position:relative;
z-index: 1;
background-color:black;
max-width: 360px;
margin: 0 auto 100px;
padding:45px;
text-align:center;} .form input {
outline:none;
background:#f2f2f2;
width:100%;
border: 0;
margin: 0 0 15px;
padding:15px;
box-sizing: border-box;
font-size:14px;} .form button {
text-transform: capitalize;
outline: 0;
background: orange;
width: 100%;
border: none;
padding: 15px;
font-size: 14px;
color:white;
cursor: pointer;} .form button:hover,.form button:active {
background: green;
border:none;} .form .zaten {
margin:15px 0 0;
color:white;
font-size:12px;} .form .zaten a {
color: orange;
text-decoration: none;} .register-form {display:none;}
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="Name Surname">
<input type="password" placeholder="Password">
<input type="email" placeholder="Email">
<input type="tel-no" placeholder="Telephone Number">
<button type="button">Register</button>
<p class="zaten"> Already have a account? Login </p>
</form>
<form class="login-form">
<input type="text" placeholder="Email or Phone Number">
<input type="password" placeholder="Password">
<button type="button">Login</button>
<p class="zaten"> Not registered yet? Register </p>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
I have noticed that you have forgotten to close a tag and that lead to unexcpted
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="Name Surname">
<input type="password" placeholder="Password">
<input type="email" placeholder="Email">
<input type="tel-no" placeholder="Telephone Number">
<button type="button">Register</button>
<p class="zaten"> Already have a account? Login </p>
</form>
<form class="login-form">
<input type="text" placeholder="Email or Phone Number">
<input type="password" placeholder="Password">
<button type="button">Login</button>
<p class="zaten"> Not registered yet? Register </p>
</form>
</div>
</div>
I'm having trouble to move text inside input. If i add margins or paddings it moves or scales the input. I want to move "Username" 10px away from left side.
.log_inp input[type="username"] {
top: 80px;
height: 28px;
width: 234px;
border: solid 1px #e4e4e4;
font-family: OpenSans-Italic;
color: #9a9a9a;
font-size: 13px;
}
input {
padding: 0px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
If you want to only move the placeholders over, use vendor prefix CSS properties:
::-webkit-input-placeholder {
padding-left: 10px;
}
::-moz-placeholder {
padding-left: 10px;
}
:-ms-input-placeholder {
padding-left: 10px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
If you want to change the padding and not have it influence the total size of the input, set box-sizing to border-box.
In the following example, the two inputs are the same size, but I have given the username one a left padding.
.log_inp input {
top: 80px;
height: 28px;
width: 234px;
border: solid 1px #e4e4e4;
font-family: OpenSans-Italic;
color: #9a9a9a;
font-size: 13px;
padding: 0px;
box-sizing: border-box;
}
input[type="username"] {
padding-left:10px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
.log_inp input[type="username"] {
height: 28px;
width: 234px;
border: solid 1px #e4e4e4;
font-family: OpenSans-Italic;
color: #9a9a9a;
font-size: 13px;
padding-left:10px;
}
input {
padding: 0px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
With accepted answer cursor position of input is not modified.
You can move placeholder text of your input along with its cursor position via
input {
text-indent: 10px;
}
https://www.w3schools.com/csSref/pr_text_text-indent.asp
Check it out it might be helps u
input{
text-align:center;
}
Question:
1. Why is the "required" function not working in my contact form?
2. Why can I not make use of the full width of the input-field. See img.
I can only write on the left half of the input field.
HTML:
<div id="content">
<div class="contact">
<fieldset class="name group">
<label for="name" class="name">Name</label>
<input id="name" name="name" required pattern="[A-Za-z-0-9]+\s[A-Za-z]+" title="firstname lastname"/>
</fieldset>
<fieldset class="email group">
<label for="email" class="email">Email</label>
<input type="email" id="email" name="email" required title="Submit a valid Email">
</fieldset>
<fieldset class="phone group">
<label for="phone" class="phone">Telephone</label>
<input type="tel" id="phone" name="phone" pattern="(\+?\d[- .]*){7,17}" required title="Submit an international, national or local phone number"/>
</fieldset>
<fieldset class="message group">
<label class="message">Message</label>
<input type="text" id="message" required/>
</fieldset>
<fieldset class="send group">
<input type="submit" value="Send" class="sendButton">
</fieldset>
</div>
</div>
CSS:
#content
{
max-width: 50.694%;
position: absolute;
bottom: 0;
background: none repeat scroll 0 0 rgba(0, 0, 0, .55);
border-radius: 13px;
width: 730px;
margin: 0 0 6.6% 25.9167%;
box-shadow: 0 0 0 2px #000000, 2px 2px 30px 1px rgba(199, 255, 100, 0.73);
}
.contact{
width: 100%;
margin: 10px;
}
fieldset{
border: 0;
margin: 0;
width: 100%;
padding: 1%;
}
.name, .email, .message{
padding-right: 29px;
}
label{
color: #d8d9de;
font-family:'apple_chancerychancery';
font-size: 1.2em;
padding-left: 10px;
}
input{
margin-right: 70px;
padding: 6px;
text-align: left;
border-radius: 10px;
background: none repeat scroll 0 0 rgba(255, 240, 260, 0.5);
}
#name, #email, #phone, #message{
padding-right: 50%;
float: right;
color: #253c93;
text-decoration: none;
border: 1px dotted #29FF00;
font-family: 'Calibri', Arial, sans-serif;
font-size: 1em;
width: 23%;
}
div#inner-editor{
padding: 30px;
}
#message{
padding-top: 10%;
}
.sendButton{
background: rgba(0, 0, 0, 0);
color: #d8d9de;
font-size: 1.2em;
font-family: 'apple_chancerychancery';
padding: 0.8% 4%;
border: none;
margin-left: 42%;
box-shadow: inset 2px 2px 9px rgba(199, 255, 100, 0.73), inset -2px -2px 9px rgba(199,
255, 100, 0.73);
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #d8d9de;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #d8d9de;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #d8d9de;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #d8d9de;
}
You are missing your form tag. It works for me once I add your form tag in:
<div id="content">
<div class="contact">
<form>
<fieldset class="name group">
<label for="name" class="name">Name</label>
<input id="name" name="name" required pattern="[A-Za-z-0-9]+\s[A-Za-z]+" title="firstname lastname"/>
</fieldset>
<fieldset class="email group">
<label for="email" class="email">Email</label>
<input type="email" id="email" name="email" required title="Submit a valid Email">
</fieldset>
<fieldset class="phone group">
<label for="phone" class="phone">Telephone</label>
<input type="tel" id="phone" name="phone" pattern="(\+?\d[- .]*){7,17}" required title="Submit an international, national or local phone number"/>
</fieldset>
<fieldset class="message group">
<label class="message">Message</label>
<input type="text" id="message" required/>
</fieldset>
<fieldset class="send group">
<input type="submit" value="Send" class="sendButton">
</fieldset>
</form>
</div>
</div>
http://jsfiddle.net/GEs34/
Here is the fiddle where your second issue has been resolved.
Just removed the padding-right from the name, email, phone and message id input fields and increased their width percentage.