I'm trying to style the superslim Mailchimp form to go onto our homepage. I've created a new div to wrap it all in, and copied and pasted the code in and currently it appears below:
<div class="mailChimp">
****Copied Code****
<form action="blahblahblah" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email Address" required>
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded- subscribe" class="button">
</div>
Then in my CSS:
#mailChimp{
max-width:245px;
margin-left: 55px
}
#mce-EMAIL{
margin-bottom: 5px;
margin-top: 5px;
width: 95%
}
#mc-embedded-subscribe {
margin-bottom: 5px;
margin-top: 5px;
}
Now, this seems to have the correct IDs attached as it appears correctly in Dreamweaver. However, when I upload the files to the server then none of the CSS styling is applied.
None of the css is applying, which is frustrating! Even the div ID mailChimp isn't. I can't even find it in the inspected element.
Am I selecting the ID's incorrectly?
The main confusion comes from the fact that It appears correctly in Dreamweaver which is reading from the style sheet, but not when I upload both files live.
'mailChimp' is a class, so it starts with a . in the css not a #:
.mailChimp{
max-width:245px;
margin-left: 55px;
}
The margin-left had not been closed with a ;. Also, in mce-email, you have not closed the width tab with a ;.
In your css, you have '#mc-embedded-subscribe' but in the HTML is it written with a big gap between embedded- and subscribe.
Related
I seem to have a strange line that appears under one of my headers, H2.
Code used was from mail chimp to input a subscribe form within the footer
and automate the subscribe process.
Here is the code:
<div id="mc_embed_signup">
<form action="*" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Want some inbox loving?</h2>
<h3>Sign up for Cute Pink Boutique new brand clothing releases and
news</h3>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk"> </span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
</div>
Also, to give you a better idea, here is a screenshot of the line under the header.
The platform is wordpress.
Screenshot of problem
Any help would be much appreciated.
Check the css of the header element by right clicking on it with to inspect the element. It must be having the attribute of either border-top or border-bottom i.e
#mc_embed_signup_scroll h2{
border-bottom: 1px solid #eee;
}
So find out
I am trying to use below code in the WordPress Code Block or Text Block. But by adding , it removes the entire code from the Code Block and showing form outside in the WordPress editor screen with lot of junk characters.
<style>
.leftCol
{
width: 47%;
}
.rightCol
{
width: 47%;
float: right;
}
</style>
<form action="../process.php" method="post" name="myForm">
<div class="rightCol">
Name <input id="name" type="text" name="name" />
Phone <input id="" type="number" name="phone" />
</div>
<div class="leftCol">
Email <input id="email" type="text" name="email" />
Company <input id="comp" type="text" name="comp" />
</div>
<input type="submit" value="Submit" />
</form>
How can I use this line of code
<textarea width='100'></textarea>
within the form code.Please share an example.
Why dont you create a specific template for the page you need to insert the form. With it you can control the look and the structure without having wp filters stripping your tags..
add page-yourSlug.php to your current theme. Copy code from page.php and customize accordingly. yourSlug is the id or name of the page you creating.
I'm a CSS/HTML novice and I haven't really found how to do this by searching. I have a simple login page where a person enters in a username and password. The page has a large background image. I want to create a rounded box that the two text fields (username and password) and the submit button goes into and sits on top of to further separate form the background image. Here is the main part of the html file, I just want to know what should I put into the container section of the CSS file to get a rounded white box .
<div class="container">
<form class="form-signin" role="form" name='f'
action='${pageContext.request.contextPath}/j_spring_security_check' method='POST'>
<h2 class="form-signin-heading">Please sign in</h2>
<input type='text' name='j_username' class="form-control" placeholder="Username"
required autofocus>
<input type='password' name='j_password' class="form-control"
placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
As far as a box goes, you can just create a div for that(as I see you've done: .container). To round the corners, you'll want to use the CSS property border-radius:
HTML:
<div id="example1">Hello!</div>
CSS:
#example1 {
width: 100px;
background: green;
border-radius: 15px;
margin: 0 auto;
text-align: center;
}
JSFiddle Example
It appears you have a bootstrap example. First, you need to use bootstrap (http://getbootstrap.com) then add a class that suits you best to container. I recommend the classes "well", "thumbnail", and "jumbotron". Visit the CSS section on the bootstrap site to see these rendered. If you don't want to use bootstrap, just copy the CSS code and apply it to your example.
I have a contact form that was pieced together. The form works exactly the way I need it after much struggling, but doesn't look right.
The first two fields for the phone number have a different appearance then then others.
How can I get the first two to look like the other 3?
*yes im sure there is lots of errors in this code as im learning, but currently it is working. Ill go back after reading/learning more to correct issue(hopefully).
How can I make first two look the same?
Thanks
<div style="background-color: #ff69b4;"margin: -5px 12px 0px 10px"><div style="margin-left:10px; margin-right: 10px;">
<center><br><br><div id="contentinner">
<div class="content">
<div class="form">
<form id="form1" method="post" action="form-process.php" onsubmit="return checkSelection('form1');">
<input type="hidden" name="thank_you_url" value="./thank you" />
<input type="hidden" name="error_url" value="./contact-us.php" />
<input type="hidden" name="subject" value="Contact from Website" />
<div style="width:50%">
<!-- Start Form Fields -->
phone number<br>
<input name="phone" required="required" type="phone" id="phone" />
<br>confirm phone
<br>
<input name="phone_confirm" required="required" type="phone" id="phone_confirm" oninput="check(this)" />
<script language='javascript' type='text/javascript'>
function check(input) {
if (input.value != document.getElementById('phone').value) {
input.setCustomValidity('Phone Number Must be Matching.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
<br>
<form action="demo_form.asp">
name<input type="text" name="name" required>
email<input type="email" name="email" required>
<label>more information<?php form_error('Comments');?></label>
<textarea name="Comments" cols="" rows="" class="textarea" required></textarea>
<!-- End Form Fields -->
<input type="submit" class="button" value="Submit" />
</div>
</div>
</div>
<script type="text/javascript">
<!--
function checkSelection(whichform) {
if(document.forms[whichform].required.value) {
var required = document.forms[whichform].required.value.split(','), errors = false;
for(var i = 0; i < required.length; i++) {
if(document.forms[whichform][required[i]].value == "") {
errors = true;
}
}
if (errors) {
alert ('Whoops! You must fill in all required fields before you can continue.');
return false;
}
else {
return true;
}
}
}
//-->
</script>
</form>
</div></div>
</center>
#wrapper {
background-color: #ff69b4;
width:600px;
height:400px;
}
.outer {
margin-left:10px;
margin-right: 10px;
width:300px;
margin:auto;
background-color:grey;
height:350px;
}
input
{
width:150px;
height:20px;
}
textarea
{
width:150px;
}
fiddle
Dont ever use the <Center > tag..!
This feature has been removed from the Web. Though some browsers may
still support it, it is in the process of being dropped. Do not use it
in old or new projects. Pages or Web apps using it may break at any
time.
To give effects to phone text box add class to the input text box and add css to the class
HtMl
<input class="phones" name="phone" required="required"
type="phone" id="phone" />
<br>
confirm phone
<br>
<input class="phones" name="phone_confirm" required="required"
type="phone" id="phone_confirm" oninput="check(this)" />
Css
.phones
{
background-color:#003366;
color:white;
}
Demo
Updated fiddle
You'll first need to remove the quote between your background color and margin in the uppermost style.
I think its because you've placed the second form in the div with a 50% width. Its being centered because it has <center> as a parent element. The center is deprecated in HTML5. This should be done up in CSS. See here for details.
For your code, try using either Brackets or Sublime Text. I use Brackets for work.
Also, you don't need to declare type="text/javascript" anymore. You can remove that for cleaner code.
For learning how to do front-end, this is a great try. When you feel you're beginning to understand, check out Twitter Bootstrap.
Here's my go at cleaning up your code. Notice the one warning it has given you in the JavaScript. http://jsbin.com/hijec/1/edit
I guess you are talking about the line breaks... just remove them! http://jsfiddle.net/L92dp/1/
confirm phone
<br> <!-- remove this -->
You should have a look at a CSS framework like bootstrap or foundation, it will help you write beautiful forms easily.
I think your both input field look alike same .it depends on what style using from imported Css file.First Check in your Css file there should be same type of style for fields
if style written on the basis for ID then
id="phone" & id="phone_confirm" have same style
or
on the basis of name both phone and phone_confirm should be same.
.content { /*color: #fff;*/ }
and / or
.form { /*color: #fff;*/ }
and / or
#form1 { /*color: #fff;*/ }
and / or
input { /*color: #fff;*/ }
and cool link
http://css-tricks.com/styling-texty-inputs-only/
It could also be easier to read if you removed your inline and unnecessary nested divs etc:
<div style="background-color: #ff69b4;"margin: -5px 12px 0px 10px"><div style="margin-left:10px; margin-right: 10px;">
to
.pickaclassname {
background-color: #ff69b4;
margin: -5px 12px 0px 10px;
margin-left:10px;
margin-right: 10px;
}
Try using comments to help organize your code to compare and contrast with the forms.
<!-- my awesome form 1 -->
(all the form code)
<!-- // end form 1 -->
<!-- my awesome form 2 -->
(all the form code)
<!-- // end form 2 -->
I have a site that I'm creating, part in static HTML, the other part is served via Django. Since I want the look and feel to remain the same (who doesn't?) I have used CSS for the static site. That same CSS I have included (almost successfully) in the dynamic site.
When I create a form, I can get a very nice two column listing on the static side
Label Input
Label Input
Label Input
But, when I do the same code on the dynamic side, it's not so nice
Label Input
Label Input
Label Input
The CSS I'm using is:
form.login label.fixedwidth {
display: block;
width: 240px;
float: left;
}
\.
Sorry, here's my form:
<form action="" method="post" class="login">
<fieldset>
<div>
<label for="username" class="fixedwidth">User name:</label>
<input type="text" name="username" value="" id="username">
</div>
<div>
<label for="password" class="fixedwidth">Password:</label>
<input type="password" name="password" value="" id="password">
</div>
<input type="submit" value="login" />
</fieldset>
</form>
[edit]
So, I noticed that my two 'input type' lines didn't close the tag (no '/'). But, no difference.
[/edit]
Try
clear:both; overflow: auto
on the surrounding DIV.
By the way, a <ul> with <li> s may be semantically more fitting than <div>s here. Won't make a difference in the output though.