How to Create a Portfolio Contact Page with HTML

#html

Adding a portfolio contact page to your developer website is essential. While many rely on social media links like GitHub or LinkedIn, a dedicated contact form for your website makes it easier for visitors to reach you without relying on third-party platforms An easy and secure alternative is adding a contact form to your website. This approach ensures your email stays private while allowing users to reach you directly.

Key HTML Elements for Your Contact Form

When creating a contact form, it’s important to understand the necessary HTML elements and their purpose.

  1. <form> Tag

    • Purpose: The <form> tag wraps all the elements of the contact form. It groups inputs and buttons for processing when the form is submitted.
    • Attributes:
      • action: Specifies the URL where the form data will be sent.
      • method='POST': Ensures data is securely sent without being exposed in the URL.
      • onsubmit: A JavaScript function to execute when the form is submitted.

  2. <label> Tag

    • Purpose: The <label> tag improves accessibility by providing clear descriptions for each form input field.
    • SEO Benefit: Labels help reinforce relevant keywords, improving your page’s SEO.

  3. <input> Tag

    • Purpose: The <input> tag allows users to input information, such as their name or email address.
    • Common Input Types:
      • text: Used for general text fields (e.g., name).
      • email: Ensures the email entered is in the correct format.
    • Attributes:
      • required: Ensures the user must fill out the field before submitting.
      • placeholder: Provides helpful hints within the field.

  4. <textarea> Tag

    • Purpose: The <textarea> tag allows for longer text inputs, such as a message.
    • Attributes:
      • placeholder: Offers users a suggestion, like "Type your message."

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

    • Purpose: The submit button triggers the form submission.
    • Usability Tip: Use clear labels like "Submit" or "Send Message."

Building Your Contact Form

Now that you understand the essential elements, here’s how to create a contact form for your website using HTML. This structure ensures your form is both functional and user-friendly:

<form 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="Type your message"></textarea>

    <button type="submit">Submit</button>
</form>

Making Your Contact Form Work

After you create a contact form for your website, the next step is making it fully functional. Below are the best methods to send email from your website form so visitors can contact you directly.

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 make a working contact form with HTML and EmailJS, allowing users to send emails from your website form without a back-end server.

  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/portfolios – Browse community-submitted developer portfolios for styling inspiration.
  • Behance – Explore designs for "Contact Forms" to find examples.

Conclusion

A well-designed HTML contact form for your website ensures seamless communication while keeping your email private. Whether you're using EmailJS, Formspree, or a custom setup, these steps help you make a working contact form with HTML and improve user experience.

Your contact page is set. Let's make sure the rest of your portfolio is just as impressive. The Ultimate Web Developer Portfolio Guide (Step by Step) has got you covered.

Back To Top