How to Add a Portfolio Contact Page with HTML

A method of contact on your developer portfolio is essential. While many believe that including just your socials (e.g., GitHub, LinkedIn, X) is enough, this approach might introduce barriers between you and potential users. Not everyone visiting your portfolio will have these platforms or feel comfortable sharing their social profiles for professional interactions.

To address this, an easy and accessible solution is to include your email. However, making your email public has risks, such as exposure to phishing and spam attacks. A more secure and professional alternative is adding a contact form to your website. This approach keeps your email private while maintaining an open channel for communication.

HTML Elements Needed For Form

Before diving into making your contact form functional, it's important to understand the HTML elements needed for the form and why they are necessary.

1. <form> Tag

   • Importance: The <form> tag is the container for all contact form elements. It defines the boundaries of the form, ensuring all inputs and buttons are grouped for processing when submitted.
   • Notes:
     • action: Specifies where form data will be sent, typically a server endpoint that processes the information.
     • method='POST': Improves security by sending data without exposing it in the URL.
     • onsubmit: Calls a function when the form is submitted.

2. <label> Tag

   • Importance: The <label> tag enhances accessibility and usability by providing clear descriptions for <input> fields. It helps screen readers, making forms more accessible for users with disabilities.
   • SEO Benefit: Using <label> tags reinforces relevant keywords that describe your form fields.

3. <input> Tag

   • Importance: The <input> tag allows users to enter information. For a developer portfolio, common inputs include name and email fields.
   • Input Types:
     • Text Input: Allows general text entry, such as the user's name.
     • Email Input: Validates email formats and triggers email-specific keyboards on mobile.
   • Notes:
     • required: Ensures users complete the field before submission.
     • placeholder: Provides a hint inside the field to guide users on what to enter.

4. <textarea> Tag

   • Importance: Use <textarea> for larger text entries, like a message body.
   • Placeholder: Adds a hint (e.g., "Type your message") to clarify the field's purpose.

5. Submit Button <button type="submit">

   • Importance: The submit button triggers the form's action endpoint.
   • Usability Tip: Use clear text like "Submit" or "Send Message" for the button label.

Build Your Contact Form

Now that you understand the essential HTML elements and their role in accessibility, here’s a basic structure for your form.

<form method="POST">
    <!-- Name Input -->
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required placeholder="Your name"/>

    <!-- Email Input -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required placeholder="email@domain.com"/>

    <!-- Message Textarea -->
    <label for="message">Message:</label>
    <textarea id="message" name="message" required placeholder="Type your message"></textarea>

    <!-- Submit Button -->
    <button type="submit">Submit</button>
</form>

Making Your HTML Contact Form Functional

After building a basic contact form, the next step is to enable it to send data to your email. Below are several options for implementing this functionality:

Options for Contact Form Email Functionality

1. EmailJS

   • Best for: Avoiding server setup; a JavaScript-only solution.
   • Description: EmailJS integrates with email providers (e.g., Gmail, Outlook) to send emails directly from your site. You configure an email template and add a simple script to your form.
   • Free Tier Available.

2. Formspree

   • Best for: Beginners seeking a simple server-side email solution.
   • Description: Formspree handles email processing by linking your form to a unique endpoint. You set this endpoint as the action attribute in your form, and Formspree sends the emails for you.
   • Free Tier Available.

3. Getform

   • Best for: Users looking for a Formspree alternative with more customization.
   • Description: Getform supports features like file uploads, spam protection, and integrations with other services while handling server-side form processing.
   • Free Tier Available.

4. Netlify Forms

   • Best for: Developers hosting their website on Netlify.
   • Description: Netlify Forms processes form submissions without requiring a back-end. It offers spam protection and notifications, and integrates seamlessly with Netlify-hosted sites.
   • Free Tier Available.

5. Custom Server or Serverless Function

   • Best for: Advanced users requiring full control.
   • Description: Create an API endpoint using a back-end server like Node.js or serverless functions (e.g., AWS Lambda) to handle form submissions and send emails using APIs like SendGrid, Mailgun, or Nodemailer.
   • Requires server/cloud function; may incur email API costs.

Using EmailJS to Make Your Contact Form Functional

Here’s how to set up your form using EmailJS:

1. Create an Email Service

   • Go to the Email Services tab in the EmailJS dashboard and click Add New Service.
   • Select your email provider (e.g., Gmail, Outlook) and follow the setup instructions.
   • Click Create Service after configuration.

2. Create an Email Template

   • Navigate to the Email Templates page and click Create New Template.
   • Design a template for how emails will look when sent to you. Specify fields like To Email, From Name, and Reply To.
   • Optionally, set up an auto-reply template for users.

3. Add EmailJS to Your Website

   • Include the EmailJS SDK in your HTML:

     <script
       type="text/javascript"
       src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
     </script>
     

   • Initialize the SDK with your public key:

     emailjs.init({
       publicKey: 'YOUR_PUBLIC_KEY', // Replace with your actual public key
     });
     

4. Handle Form Submissions

   • Create a function to send emails:

     function sendEmail(e) {
         e.preventDefault(); // Prevent default form submission
     
         emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target)
           .then(function(response) {
             alert('Message sent successfully!');
           }, function(error) {
             alert('Failed to send the message. Please try again later.');
           });
     }
     

   • Attach the function to your form using the onsubmit attribute.

5. Update Your Form

   • Your updated HTML should look like this:

     <form onsubmit="sendEmail(event)" method="POST">
         <label for="name">Name:</label>
         <input type="text" id="name" name="name" required placeholder="Your name" />
     
         <label for="email">Email:</label>
         <input type="email" id="email" name="email" required placeholder="email@domain.com" />
     
         <label for="message">Message:</label>
         <textarea id="message" name="message" required placeholder="Your message"></textarea>
     
         <button type="submit">Submit</button>
     </form>
     

Style Your Contact Form

Once your form is functional, focus on styling it to align with your website’s design.

Resources for Design Inspiration

• Dribbble – Search for "Contact Forms" to find design ideas.
• webportfolios.dev – Browse community-submitted developer portfolios for styling inspiration.
• Behance – Explore designs for "Contact Forms" to find examples.

Conclusion

A contact form is a small addition that significantly boosts the professionalism of your website. Follow the steps above to make your form functional, then style it to make it uniquely yours. Start today!