Flat Contact Form - Documentation

Introduction

Thank you for purchasing the Flat Contact Form! This document will guide you through the installation and usage of this clean, colorful, and modern contact form.

File Structure


contactform-TF/
└── documentation/
    ├── index.html
    ├── flat.html
    ├── minimal.html
    ├── modern.html
    ├── retro.html
    ├── sophisticated.html
└── preview/
    ├── 
    └── 
├── common.css
├── contact-form-flat.html
├── contact-form-flat.css
├── contact-form-flat.js
├── contact-form-minimal.html
├── contact-form-minimal.css
├── contact-form-minimal.js
├── contact-form-modern.html
├── contact-form-modern.css
├── contact-form-modern.js
├── contact-form-retro.html
├── contact-form-retro.css
├── contact-form-retro.js
├── contact-form-sophisticated.html
├── contact-form-sophisticated.css
├── contact-form-sophitiscated.js
├── README.txt

Installation

To install the Flat Contact Form, simply include the contact-form-flat.html, contact-form-flat.css, and contact-form-flat.js files in your HTML project.

Here's a visual representation of the required files:

Flat Contact Form HTML Structure Flat Contact Form Styles

Usage

Basic Integration

Copy the HTML code from contact-form-flat.html into the desired location in your website's HTML structure. Make sure to link the contact-form-flat.css file in the <head> section and include the contact-form-flat.js file before the closing <body> tag.


<head>
    <link rel="stylesheet" href="path/to/contact-form-flat.css">
</head>
<body>
    <!-- Your content -->
    <form class="contact-form flat" action="#" method="POST" novalidate>
        <div class="form-group">
            <label for="name-flat">Name:</label>
            <input type="text" id="name-flat" name="name" required aria-required="true" placeholder="Your name">
            <span class="validation-icon success"><svg ...></svg></span>
            <span class="validation-icon error"><svg ...></svg></span>
        </div>
        <div class="form-group">
            <label for="email-flat">Email:</label>
            <input type="email" id="email-flat" name="email" required aria-required="true" placeholder="Your email">
            <span class="validation-icon success"><svg ...></svg></span>
            <span class="validation-icon error"><svg ...></svg></span>
        </div>
        <div class="form-group">
            <label for="message-flat">Message:</label>
            <textarea id="message-flat" name="message" rows="5" required aria-required="true" placeholder="Your message"></textarea>
            <span class="validation-icon success"><svg ...></svg></span>
            <span class="validation-icon error"><svg ...></svg></span>
        </div>
        <button type="submit">Send Message</button>
    </form>

    <script src="path/to/contact-form-flat.js"></script>
</body>

Customization

The Flat Contact Form features a clean, colorful, and modern design. You can easily customize its appearance by modifying the CSS rules in the contact-form-flat.css file. Here's how to adjust key visual elements:

Colors

Modify the following CSS properties to personalize the color scheme of the form:

Typography

To customize the font used in the form, modify the font-family property in the CSS rules for .contact-form.flat label, .contact-form.flat input, .contact-form.flat textarea, and .contact-form.flat button. Refer to the "Typography" section in the Minimal style documentation for instructions on integrating Google Fonts.

Size and Spacing

Adjust the size and spacing of the form elements by modifying properties like max-width, padding, and margin in the CSS rules for the respective elements (.contact-form.flat, .contact-form.flat .form-group, .contact-form.flat input, .contact-form.flat textarea, .contact-form.flat button). The principles are similar to those described in the Minimal style documentation.

Displaying/Hiding Optional Fields

As with the other styles, you can use the .d-none utility class from common.css to hide optional fields by adding it to the .form-group of the field in your HTML. Ensure that common.css is linked in the <head> of your HTML file.

Text Customization

The text for the labels and the submit button can be directly changed within the contact-form-flat.html file by editing the text content of the <label> and <button> elements.

Backend Integration

Important: This contact form provides the front-end structure and client-side validation only. To handle the form submission (sending emails, storing data), you will need to integrate a backend solution using a server-side language (like PHP, Node.js, Python) or a third-party service (like Formspree, Netlify Forms).

Using a Backend Language (Example: PHP)

You would typically create a PHP script to handle the form submission when the user clicks "Send Message". The action attribute of the <form> tag would point to this PHP script.


<form class="contact-form flat" action="process_form.php" method="POST" novalidate>
    <!-- ... form fields ... -->
    <button type="submit">Send Message</button>
</form>

Your process_form.php file would then handle the data submitted via the $_POST superglobal, perform server-side validation, and send the email.

Using a Third-Party Service (Example: Formspree)

Formspree is a service that allows you to receive emails from your HTML forms without writing any backend code.

  1. Sign up for a free account on Formspree.
  2. Create a new form on your Formspree dashboard.
  3. Formspree will provide you with a form endpoint URL. Update the action attribute of your HTML form with this URL.

<form class="contact-form flat" action="https://formspree.io/f/your_form_endpoint" method="POST" novalidate>
    <!-- ... form fields ... -->
    <button type="submit">Send Message</button>
</form>

Formspree can also handle basic spam protection and email notifications.

Security Considerations

Remember that client-side validation (provided by the JavaScript) is for user convenience. You must implement server-side validation to protect your website from malicious input and ensure data integrity.

Internationalization (Translation)

To translate the form labels and any potential JavaScript error messages, you will need to modify the text content directly in the contact-form-flat.html file for the labels and in the contact-form-flat.js file for the error messages.

Accessibility

This contact form is designed with accessibility in mind:

Performance

The form is lightweight and optimized for performance with minimal CSS and JavaScript.

Support

For any questions or issues, please refer to the ThemeForest support section for this item.

Thank you again for your purchase!