Critique my contact form in portfolio project

what else should I do to make this contact form and the server code to make it more professional?

What should I do to the code to make the contact me process more professional?

The contact form files are here:

form file

server

the live site is deployed here on netlify:
https://elegant-lichterman-1fc4e5.netlify.app/

and here on vercel:
https://nextjs-starter-dimension.kravmaguy.vercel.app/

Ive used Next starter template for this project.

(backstory: The idea is that parties interested in my services would see my profile, and contact me regarding potential jobs, or for hiring purposes. In the past Ive spent time going back and forth with clients and not getting any job, or starting projects without a solid requirements list. Should I send a follow up email to the person that fills out the form to remind them to reach out to me with their project requirements document? Or send a pdf file to them as an email attachement? Ive applied to various companies but have never gotten an interview. So im trying to freelance)

Hey, this looks really nice and it’s obvious you’ve put a lot of work into it. A few issues though that jump out at me right away:

  • It is not very keyboard accessible. I can’t click the “Push” button with the keyboard and I can’t close any of the pop-ups with the keyboard. I would highly recommend you always check to make sure you can utilize all of the functionality with the keyboard only. Also, I’m not seeing any keyboard focus indicators for the four links in the boxes.
  • The small white text on the main page is very faint for me, to the point that I can barely read it. This might be a little dependent on the OS/browser. On Windows it is slightly brighter than on my Linux box. Regardless, the font you are using doesn’t seem to be as strong as other fonts and thus even though you have the color set to #FFF it doesn’t feel like it, especially on that background. It improves if I crank the font-weight up to at least 700. Just so you think I’m not making this up, below is a pretty accurate pic of what I’m seeing. You’ll notice that the “INTRO” link looks better. That’s because I set the font-weight to 700 just for a comparison.

    Ahh, I see now that you have the font-weight set to 300. I would definitely reconsider that. White on a light gray background needs to be much brighter and heavier.
  • I would not change the text in the h1 heading on the Push button click. Headings are important for accessibility and changing them like that, especially an h1, has the potential to cause confusion for people using a screen reader.
2 Likes

ill fix those things if you believe it really makes a diffenrence for someone to hire me, however, fyi even my windows machine is not fully keyboard accessible.

regarding the post topic, ie the form behavior:

Does it have to be async in the server, and should I await on something or its not necessary? like right now it just sends me the info, but the form does nothing afterwards. I think I should also display a message to the user that the info is being sent and then either successfully recieved or failed to recieve their email. then I think i should just clear and close the form?

I can know if ive successfully recieved their email if I get to the end of the try block yes? how can I follow through with an email to the user after Ive succesffully recieved his message sending him a note such as “thank you for contacting me, in order to proceed to the next step please reply to this email with have a projects requirements list, along with a budget and timeline for your project.”

and also those boxes you were speaking about before, shouldn’t they become routes?

Well, you are usually competing against a lot of other people to get a job so I would think that you would want every advantage you can get. Keyboard accessibility is one of the major accessibility checkpoints. You don’t have to make your page more accessible if you don’t want to, but then you better hope that the person evaluating your portfolio isn’t dependent upon using the keyboard :slight_smile:

1 Like

I would suggest to you that accessibility is about the user, not about getting hired. But having good web accessibility is certainly something that can help show your knowledge and help sell it.

As for the form I would add resize: vertical to the textarea and give the buttons some focus indication. I might also suggest something a little nicer than an alert for the feedback message. Maybe something like a Snackbar/Toast type thing.

1 Like

Sorry guys, I would like to get to all these good recommendations, I should have been clearer… I appreciate the suggestions however my problem has to do with the form-server files I shared in my original post.

I wish to send a reply to the client as soon as Ive successfully recieved his message, Ive done the following:

server:

mailform:

It works in that the emails are sending and im recieving the follow up message, however I have the server error:

error headers already sent.

I know this from php it happens like when you try to send the user somewhere else after youve already sent out some html
ie. header(‘Location: http://www.example.com/’);
because you cant send out the headers twice

excuse if what I wish to do is covered in some challenge in the curriculum, please refer me to it.

Ill do it, but I need to figure out how to send back more than one response to my client side from my server side code, so basically the user can getting two notifications

first:

notification:
success ive recieved your message
or:
fail ive not recieved your message, please check your internet and try again

if the first notification is not fail then=>
second
success ive sent you a reply please check your email or spam
or:
fail Ive recieved your details but am unable to reply, please send me an email at @marketingdesigncoding with your project requirements list

Can you please tell me where/how i can see the text sent from the server:

            `email sent succesfully sedngrid the msg ${msg}`

all I see on the client side is this:

console.log('msg',msg))

is there a way to see the text “email sent succesfully sedngrid the msg” that I wrote in the send method?

The second question I have Is reguarding the flow. please confirm what I am guessing is true:

First I see the first catch block returning, and then the second catch block returning.

So basically the first try succeeds and then it goes into the second try when it tries to send the response the second time (not allowed) it falls into the second catch block which returns and then control goes back to first catch block which returns.

obviously this all happens after the two mails are sucessfully sent.

Ive fixed all these issues.

Ill do this next

how can I pass the data on to the last then after the setTimeout:

    e.preventDefault();
    this.setToast('pending')
    const theHosting='http://localhost:4000'
    const {name, email, message}=this.state.values
    fetch(`${theHosting}/send-email?sender=${email}&topic=${name}&text=${message}`)
    .then(msg =>msg.json())
    // .then((data)=> console.log(data))
    // .then(() => new Promise((resolve) => setTimeout(resolve, 2000)))
    .then((data)=>{this.setToast(data.status);})
    .then(()=>console.log('resolved everything'))
    .catch(err => {
      console.error('err',err)
      this.setToast('error')
    })
  };

is there a way to pass the data over a block of then? or use it more than once? or like once its used once its finished?

for example, I am not able to console.log(data) and then use it in the next then block afterwards or resolve a setTimeout and then pass on the data.

also, what about the variable theHosting what will that change to on a the server? although I see it is still working on the live server even though its set to localhost:4000

Edit: I guess once its used you cant reconsume it… so I just log the data in the same then block…

i’d love to hire you but my first name is only four letters long.
more over, it’s better, and common practice, to not give any validation information until the user as attempted to fill out a field.

1 Like

My only feedback would be to suggest changing “Name” to “Full Name” in the contact page. Hope this helps.

1 Like

the problem now is that if user clicks submit each form field should also be validated. The code at the top of SaadKahn will become very repetitive.

I thought to solve for this by hiding that submit button with value invalid entirely, i.e only showing a submit button if all fields are valid… but I thought a form without a submit button just looks wierd.

That red colour looks a little aggressive to be honest, and it already shows while I’m still typing. I often see it done like this with contact forms, and I always want to yell at the form “Jesus Christ, can’t you wait until I’m finished filling out the field before you complain”.

The opposite approach is a friendlier way to handle this: show a green tick as soon as the input is valid, instead of showing something aggressively red while the input is still invalid.

As for the submit button, I’d grey it out a little and remove pointer events, until the form is ready to be sent, and then give it a nice green or blue colour.

ive fixed all that. and im happy with the way its looking now. I will refactor and add more features soon enough. Thanks for your input.

not sure if thats sarcasm but if not please fill out the form and be in touch.

I think they were trying to point out that you put an unnecessary minimum string length limit on the first name.

Actually, I see that the input field is for “full name”. Still, I’m guessing maybe some people might just go by a single name and it might be less than five characters long.

Sure, I think it looks much more inviting now.

I have one other suggestion, but that’s not related to the form: The first thing someone reads about you when they look at your page is that you’ve been coding for 3 years without interview, while others sometimes get hired within 6 months. I totally understand how that can be frustrating, but I think it sends the wrong message to display your frustration so prominently.
A potential employer doesn’t want to know about your pain or how they can make your life better, they’re looking for someone who makes their life better by solving their problems. And ideally that would be someone with a positive attitude who’s easy to work with.
So I’d maybe change that a little and focus more on “I’ve been coding for 3 years, I’m a professional who will solve your problems, I’d love to work with you, let’s get in touch” or something like that. Just an idea.

1 Like

Ill take that advice. I realize it makes me look like a sour apple. I wanted to add some text changing while the background svg changed and that was the first thing that came to my mind. Because I was reading all these articles about “I succeeded in getting a job as a software engineer with no prior experience and only 6 months of self studying”… (bbsmooth answered this already on another thread, not necessary to delve into too much here)

And people saying they had applied and were rejected but at least given coding interviews. Yet ive never even been contacted, never had a coding interview. Just some people off facebook asking me to build them drag and drop wordpress/wix websites. No dev skills necessary, no real thought process.

So Ill fix that negativity, and add some more features and then get back to this thread.

Well not a sour apple so much, but it’s setting the focus on you instead of what you can do to help the client. Just be positive and approachable, you’re advertising yourself with a portfolio, and we all know that ads are lies :slight_smile:

why is select box not rerendering although its props are changing?

to test: hit reset button when you are on step 2 (the second part of the form) . I would expect it to clear the select box. yet it does not.

this component: