How to Create a Functional Contact Form with HTML and CSS

The video begins with a welcome message, introducing the tutorial on creating a contact form using HTML and CSS. The form will allow users to enter their contact information and receive inquiries via email.

The speaker demonstrates the functionality of the contact form by filling in a name, email ID, and message, followed by a successful submission notification. The inquiry is then shown to be received in the Gmail inbox, confirming the form's operational status.

The tutorial proceeds with setting up the project by creating a folder named 'contact form' and opening it in Visual Studio Code. The speaker emphasizes the use of any code editor for this task.

An HTML file named 'index.html' is created, and the basic document structure is established. The title of the document is set to 'contact form', and a CSS file named 'style.css' is linked to the HTML file to style the form.

The speaker copies an 'assets' folder containing images into the project folder. This folder includes two images, 'Arrow icon' and 'write IMG', which will be used in the contact form.

To view the HTML file, the speaker installs and uses the Live Server extension in Visual Studio Code. The HTML file is opened in a web browser to facilitate real-time updates during development.

The speaker begins constructing the contact form's layout within the body tag of the HTML file. A div with the class 'contact container' is created, which will house two columns: one for the form and another for additional content.

In the left column of the form, the speaker adds input fields. The first input field is designated for the user's name, with the type set to 'text' and a placeholder text 'your name' to guide users on what to enter.

The speaker begins by adding input fields to a form, specifying the type as 'text' for the first field, which includes a placeholder for 'your name' and a class name 'contact inputs'. They make this field mandatory by adding the 'required' attribute. Next, they duplicate this input field, changing the type to 'email', updating the name to 'email', and the placeholder to 'your email', while keeping the class name the same.

The speaker proceeds to create a message box by adding a text area. They name this field 'message', remove unnecessary ID columns and rows, and set a placeholder to 'your message'. This field also adopts the 'contact inputs' class and is marked as required, ensuring all three input fields must be filled out to submit the form.

A button tag is created with the type set to 'submit' and the button text labeled 'submit'. Additionally, an image tag is included, pointing to the file path 'assets/SLAro/icon.png'. After saving these changes, the speaker returns to the web page to confirm the visibility of the input fields and the submit button.

In the right div of the layout, the speaker adds another image tag, specifying the file path as 'assets/right_img.png'. This addition is confirmed by checking the web page, where the image appears as intended.

The speaker shifts focus to styling, starting with global CSS properties. They apply a global selector to set padding and margin to zero and box-sizing to 'border-box'. Following this, they style the body tag by setting the font family to 'Outfit' and applying a linear gradient background color using two specified color codes.

The speaker adds CSS properties for the 'contact container' class, setting its height to 100 VH and using 'display: flex' to arrange columns on the left and right. They also align items to the center and justify content evenly, which is confirmed by checking the web page where the input fields are displayed on the left and the image on the right.

Further CSS adjustments are made for the 'contact left' class, where the speaker sets the display to 'flex', the flex direction to 'column', aligns items to the start, and introduces a gap of 20 pixels between elements. This results in a vertical alignment of all contents in the left column.

The speaker styles the title within the 'contact left title' div, targeting the h2 tag. They set the font weight to 600, change the color, increase the font size to 40 pixels, and add a margin-bottom of 5 pixels, enhancing the title's appearance.

Finally, the speaker styles the horizontal line (HR tag) within the 'contact left title' class. They remove the border, set the width to 120 pixels, and the height to 5 pixels, completing the visual adjustments for the contact form.

The speaker discusses adding a background color code, setting a border radius of 10 pixels, and applying a bottom margin of 20 pixels to enhance the visual appeal of the horizontal line.

For the input fields, the speaker specifies the class name 'contact inputs' applicable to all three fields. They set the width to 400 pixels, height to 50 pixels, and remove borders and outlines. Additionally, they add 25 pixels of left padding, a font weight of 500, and a gray color, concluding with a border radius of 50 pixels.

The speaker increases the height of the text area to 140 pixels, adds top padding, and reduces the border radius to 20 pixels, resulting in an improved appearance for the message box.

To enhance user interaction, the speaker adds a focus effect to the input fields, specifying a 2-pixel solid border with a designated color code that appears when any input field is clicked.

The speaker styles the placeholder text by applying a light gray color code, ensuring that the placeholder text is visually appealing and consistent with the overall design.

The speaker outlines the CSS properties for the submit button, including a flex display for horizontal alignment of text and icon, padding of 15 pixels top and bottom and 30 pixels left and right, a font size of 16 pixels, and a white text color. They also specify a gap of 10 pixels, remove borders, set a border radius of 50 pixels, and apply a linear gradient background with two color codes at a 270° angle, concluding with a cursor pointer effect.

The speaker reduces the size of the arrow icon within the button by setting its height to 15 pixels, achieving a visually balanced design.

For the right side of the layout, the speaker applies the class name 'contact right' to the image, setting its width to 500 pixels to ensure it fits well within the screen.

The speaker inspects the webpage on smaller screens, noting the need for adjustments due to spacing issues between the left and right columns. They plan to implement CSS media queries with a max width of 800 pixels to address these layout concerns.

The speaker discusses modifying the contact form's design by changing the width to 80 viewport width. They remove an image from the mobile view by adding 'display: none' to ensure only the contact form is visible on smaller screens, while the desktop view retains the right-side image. The design for the contact form is now complete.

To make the contact form functional, the speaker plans to use Web3 Forms. They navigate to web3forms.com, create an access key by entering their email address, and receive a confirmation email with the public access key. The speaker then updates the HTML file by replacing the action link with the one provided by Web3 Forms and adds the necessary input fields, including the access key.

After setting up the contact form, the speaker refreshes the website and tests the form by entering a name (Elon Musk), a dummy email (el123@gmail.com), and a message ('launching rocket'). Upon clicking the submit button, they confirm that the form submits successfully, and a notification appears in their Gmail with the entered details, demonstrating that the contact form is working as intended.

The speaker concludes the video by expressing hope that the tutorial is helpful. They encourage viewers to ask questions in the comment section, like and share the video, and subscribe to their channel, 'greatest attack,' for more content.