• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Explorer ,
Apr 10, 2019 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

Views

745

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
community guidelines

correct answers 1 Correct answer

Community Expert , Apr 10, 2019 Apr 10, 2019

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.

Votes

Translate

Translate
Community Expert ,
Apr 10, 2019 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.

Votes

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
community guidelines
Explorer ,
Apr 10, 2019 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.

Votes

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
community guidelines
Community Expert ,
Apr 10, 2019 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

Votes

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
community guidelines
Explorer ,
Apr 10, 2019 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

Votes

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
community guidelines
Community Expert ,
Apr 10, 2019 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.

Votes

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
community guidelines
Explorer ,
Apr 10, 2019 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

Votes

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
community guidelines
Community Expert ,
Apr 11, 2019 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.

Votes

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
community guidelines
Explorer ,
Apr 11, 2019 Apr 11, 2019

Copy link to clipboard

Copied

LATEST

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.

Votes

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
community guidelines