seperate contact.php page is not recognizing css file?

(@johannes999)

Hallo,
I have made seperate contact.php page and put this code in :


<?php
 /* Template Name: Contact */ 
 
 ?>
<!DOCTYPE HTML>  
<html>
<link rel="stylesheet" href="contact-form.css" type="text/css">
<style>
.error {color: #FF0000;}
</style>

	 
<div class="container">
<form id="contact" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<h3>Quick Contact</h3>
<h4>Contact us today, and get reply with in 24 hours!</h4>
<fieldset>
      <input placeholder="Your name" type="text" tabindex="1" required="" autofocus=""></fieldset>
<fieldset>
      <input placeholder="Your Email Address" type="email" tabindex="2" required=""></fieldset>
<fieldset>
      <input placeholder="Your Phone Number" type="tel" tabindex="3" required=""></fieldset>
<fieldset>
      <input placeholder="Your Web Site starts with http://" type="url" tabindex="4" required=""></fieldset>
<fieldset>
      <textarea placeholder="Type your Message Here...." tabindex="5" required=""></textarea></fieldset>
<fieldset>
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button></fieldset>
</form></div>
</html>



I made seperate css is file with filename : contact-form.css and uploaded to my theme directory .
the css code is :

/*------contact-form
 */

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

.container {
	max-width:400px;
	width:100%;
	margin:0 auto;
	position:relative;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
	background:#F9F9F9;
	padding:25px;
	margin:50px 0;
}

#contact h3 {
	color: #F96;
	display: block;
	font-size: 30px;
	font-weight: 400;
}

#contact h4 {
	margin:5px 0 15px;
	display:block;
	font-size:13px;
}

fieldset {
	border: medium none !important;
	margin: 0 0 10px;
	min-width: 100%;
	padding: 0;
	width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
	width:100%;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 5px;
	padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}

#contact textarea {
	height:100px;
	max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
	cursor:pointer;
	width:100%;
	border:none;
	background:#0CF;
	color:#FFF;
	margin:0 0 5px;
	padding:10px;
	font-size:15px;
}

#contact button[type="submit"]:hover {
	background:#09C;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
	outline:0;
	border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}


I have inserted  this line of code in function php :

function auto_garage_scripts() {
	wp_enqueue_style( 'auto-garage-style', get_stylesheet_uri(), array(), _S_VERSION );
	wp_enqueue_style( 'auto-garage-style', get_template_directory_uri() . '/css/contact-form.css' ); 
	
	wp_enqueue_style('contact', get_template_directory_uri() . '/css/contact-form.css' );

    	
	wp_style_add_data( 'auto-garage-style', 'rtl', 'replace' );

	wp_enqueue_script( 'auto-garage-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
if(is_page('contact')) {
        wp_enqueue_style('contact-form.css');
    }

add_action( 'wp_enqueue_scripts', 'auto_garage_scripts' );

`
when I go to my contact page I see that css file is not recognized . it was also not recognized before I made extra css file.
How I can solve this problem?
thanks
johannes

This topic was modified 3 years, 11 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

Thread Starter johannes999
(@johannes999)

3 years, 11 months ago
hallo,
I saw a fault in my function.php
in this 2 lines are the same :
```
wp_enqueue_style( 'auto-garage-style', get_template_directory_uri() . '/css/contact-form.css' ); 
	
	wp_enqueue_style('contact', get_template_directory_uri() . '/css/contact-form.css' );
```
I corrected my fault now my function.php looks like this:
/**
* Enqueue scripts and styles.
*/
function auto_garage_scripts() {
wp_enqueue_style( ‘auto-garage-style’, get_stylesheet_uri(), array(), _S_VERSION );
}
add_action( ‘wp_enqueue_scripts’, ‘auto_garage_scripts’ );

function register_contact_style() {
if ( is_page_template( ‘contact.php’ ) ) {
wp_enqueue_style( ‘auto-garage-contact-css’, get_stylesheet_directory_uri() . ‘/contact.form.css’ );
}
}
add_action( ‘wp_enqueue_scripts’, ‘register_contact_style’ );`

`
this solution I found in google but stll it is not working.

my contact-form.css is in my theme directory. as the other pages.
I hope some one solves this problem !
thanks
johannes
Thread Starter johannes999
(@johannes999)

3 years, 11 months ago
Hello,
I ask again after searching all the day and cleaning the cash many times.
this is my seperate contact.php code:(page)
<?php
/* Template Name: Contact */

?>
<!DOCTYPE HTML>
<html>

<style>
.error {color: #FF0000;}
</style>

<div class=”container”>
<form id=”contact” action=”<?php echo htmlentities($_SERVER[‘PHP_SELF’]); ?>” method=”post”>
<h3>Quick Contact</h3>
<h4>Contact us today, and get reply with in 24 hours!</h4>
<fieldset>
<input placeholder=”Your name” type=”text” tabindex=”1″ required=”” autofocus=””></fieldset>
<fieldset>
<input placeholder=”Your Email Address” type=”email” tabindex=”2″ required=””></fieldset>
<fieldset>
<input placeholder=”Your Phone Number” type=”tel” tabindex=”3″ required=””></fieldset>
<fieldset>
<input placeholder=”Your Web Site starts with http://” type=”url” tabindex=”4″ required=””></fieldset>
<fieldset>
<textarea placeholder=”Type your Message Here….” tabindex=”5″ required=””></textarea></fieldset>
<fieldset>
<button name=”submit” type=”submit” id=”contact-submit” data-submit=”…Sending”>Submit</button></fieldset>
</form></div>
</html>`
```
first I want to tell I just created contact.php and uploaded to my theme directory.
I understood that I didn't need to insert any code in function.php tp make my contact.php page to work.
now I changed the code in function.php like this:
```
```
add_action('init', 'my_register_styles');

function my_register_styles() {
    wp_register_style( 'auto-garage-style', get_template_directory_uri() . '/style.css' );    
    wp_register_style( 'auto-garage-contact-form', get_template_directory_uri() . '/contact-form.css' );

}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

function my_enqueue_styles() {
    if ( is_front_page() ) {
        wp_enqueue_style( 'auto-garage-style' );
    } elseif ( is_page_template( 'contact.php' ) ) {        
        wp_enqueue_style( 'auto-garage-contact-form' );
    } else {
        wp_enqueue_style( 'auto-garage-style' );
    }
}
```
`
I have cutted this code above expresly to see if auto-garage-style wil not function.and it did not functioned. all the style of my webiste gone away .
it means that this code above is functioning for style.ccs but it is not functioning for auto-garage-contact-form css or for contact.php page.
what it can be wrong here or how I can solve this problem ?
thanks
johannes

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘seperate contact.php page is not recognizing css file?’ is closed to new replies.

seperate contact.php page is not recognizing css file?

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics