FabForm

Written by: Geoffrey Callaghan

create a contact form with UIKit

Create A Contact Form With Uikit

Here’s a contact form using UIKit along with FabForm for styling and functionality:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.7.2/css/uikit.min.css" />
    <!-- FabForm -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fabform/dist/css/fabform.min.css">
</head>
<body>

<div class="uk-container uk-margin-large-top">
    <div class="uk-width-1-2@m uk-align-center">
        <form id="contactForm" class="fabform uk-form-stacked">
            <fieldset class="uk-fieldset">

                <legend class="uk-legend">Contact Us</legend>

                <div class="uk-margin">
                    <label class="uk-form-label" for="name">Name</label>
                    <div class="uk-form-controls">
                        <input class="uk-input" id="name" name="name" type="text" required>
                    </div>
                </div>

                <div class="uk-margin">
                    <label class="uk-form-label" for="email">Email</label>
                    <div class="uk-form-controls">
                        <input class="uk-input" id="email" name="email" type="email" required>
                    </div>
                </div>

                <div class="uk-margin">
                    <label class="uk-form-label" for="message">Message</label>
                    <div class="uk-form-controls">
                        <textarea class="uk-textarea" id="message" name="message" rows="5" required></textarea>
                    </div>
                </div>

                <div class="uk-margin">
                    <button type="submit" class="uk-button uk-button-primary">Submit</button>
                </div>

            </fieldset>
        </form>
    </div>
</div>

<!-- UIkit JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.7.2/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.7.2/js/uikit-icons.min.js"></script>
<!-- FabForm -->
<script src="https://cdn.jsdelivr.net/npm/fabform/dist/js/fabform.min.js"></script>
<script>
    // Initialize FabForm
    const form = document.getElementById('contactForm');
    new FabForm(form);
</script>

</body>
</html>

This form includes fields for name, email, and message, along with a submit button. FabForm handles the styling and validation, while UIkit provides the overall styling of the form. Feel free to adjust the styles and structure as needed.