Highlighted

Website: contact form, how to change the colour of the input field and scrolling?

Explorer ,
Apr 10, 2019

Copy link to clipboard

Copied

Hello everyone!

This is my website: www.sheilaschaefer.com, I have two problems that I am not able to see where I can put it right, well I did try, but with no avail.

1. contact in the navbar will not scroll down to the contact form page in the page (the other three navbar items scroll nicely though);

2. The input fields for the contact form is white text with a white background.  I went into custom.css to change the text dark blue for the input text, but it is still white.  I had followed a step by step tutorial on youtube for  this really nice contact form.

Please can anyone help me in putting this right by letting me know what I cannot for the life of me see?

Thank you

Sheila

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

Right now, you have <div id="contact form" as your form's id, but <a href="#Contact"> for the link.

ID's can't have spaces.


Change it to <div id="Contact" and it should work (unless you have other errors).

You can validate your page at http://validator.w3.org/nu to get a listing of any other errors.

Views

510

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Website: contact form, how to change the colour of the input field and scrolling?

Explorer ,
Apr 10, 2019

Copy link to clipboard

Copied

Hello everyone!

This is my website: www.sheilaschaefer.com, I have two problems that I am not able to see where I can put it right, well I did try, but with no avail.

1. contact in the navbar will not scroll down to the contact form page in the page (the other three navbar items scroll nicely though);

2. The input fields for the contact form is white text with a white background.  I went into custom.css to change the text dark blue for the input text, but it is still white.  I had followed a step by step tutorial on youtube for  this really nice contact form.

Please can anyone help me in putting this right by letting me know what I cannot for the life of me see?

Thank you

Sheila

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

Right now, you have <div id="contact form" as your form's id, but <a href="#Contact"> for the link.

ID's can't have spaces.


Change it to <div id="Contact" and it should work (unless you have other errors).

You can validate your page at http://validator.w3.org/nu to get a listing of any other errors.

Views

511

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 10, 2019 0
Adobe Community Professional ,
Apr 10, 2019

Copy link to clipboard

Copied

Right now, you have <div id="contact form" as your form's id, but <a href="#Contact"> for the link.

ID's can't have spaces.


Change it to <div id="Contact" and it should work (unless you have other errors).

You can validate your page at http://validator.w3.org/nu to get a listing of any other errors.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2019 1
Explorer ,
Apr 10, 2019

Copy link to clipboard

Copied

Thank you very very much.  I did the change and it is now scrolling nicely to Contact.

I appreciate you advice.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2019 0
Adobe Community Professional ,
Apr 10, 2019

Copy link to clipboard

Copied

As for your second question, I don't see any background-color setting for your form fields in your css.

Something like...


textarea, input[type=text] {
     background-color:#ffd17b;
}

...with your own color in place of #ffd17b should do it.

EDIT:

...and I read too fast, looks like you want to change the placeholder text color inside the fields?

If so, this will work, though it's non-standard and probably isn't fully supported in all browsers...

::placeholder | CSS-Tricks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2019 1
Explorer ,
Apr 10, 2019

Copy link to clipboard

Copied

I had followed a youtube tutorial and I am going through the video for the fifth time, as his contact sheets works perfectly, e.g. when he uploads it to the server and writes in the text fields it is black whereas mine is white/clear.  The code is in custom.css, which I am not sure if you can see it when viewing my website.

Thank you though for your advice. 

Sheila

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2019 0
Adobe Community Professional ,
Apr 10, 2019

Copy link to clipboard

Copied

Ah, OK, so you are talking about the color of the text after the viewer starts typing.

Looks like your custom.css file hasn't been uploaded, or was uploaded to the wrong location. When I try to view it, I get a 404 File No Found Error.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2019 0
Explorer ,
Apr 10, 2019

Copy link to clipboard

Copied

I will have a look at that and see why it is not visible.  I can only see in "view-source" <link href="css/custom.css" rel="stylesheet"> which is below head in my coding.

Thank you.

I did have a problem with the Paintings header text being transparent, but figured it out to do a div class for the h3 to be placed on-top. I was thinking it maybe the same solution for the contact form input, and trying to see how I could do the same for that.

Sheila

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2019 0
Adobe Community Professional ,
Apr 11, 2019

Copy link to clipboard

Copied

You need to upload the .css file itself to your website, they don't automatically upload when you upload the .html page.

Your link to it is there, but the file itself is not on the server where the link says it should be.

If the link said "css/custom.css" that would mean there needs to be a css folder on the server on the same level as the page you're looking at the source of. Inside that css folder would need to be the custom.css file.

The link on your actual page shows just "custom.css" meaning it's not looking into the folder for the file. If the file was uploaded to the folder, you'll need to change the link to point to it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 11, 2019 0
Explorer ,
Apr 11, 2019

Copy link to clipboard

Copied

Thank you for your advice, but It was some html colour code for a text that I had to change, this was spotted by another helpful Dreamweaver person in support.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 11, 2019 0