Form CSS Düzenleme

24-10-2023, 16:32:05

Merhaba arkadaşlar iletişim formunda kullanacağım şu css'i düzenleyecek var mı? Çok saçma görüntüsü var. ayrıca sayfada form alanları görünmüyor. Sağa sola kaymış şekilde duruyor arkadaşlar.

<style>
.page-contact-form input,.page-contact-form textarea {width: 100%;max-width: 100%;margin-bottom: 10px;}
.page-contact-form input.contact-form-button.contact-form-button-submit {padding: 10px;background: #ea6337; color: #fff;border: none;}
.page-contact-form input.contact-form-button.contact-form-button-submit:hover {background: #d85b32;color: #fff;}
</style>
<div class="contact-form-widget page-contact-form">
<div class="form">
<form name="contact-form">
isim:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-posta: <span id="required">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Mesajınız: <span id="required">*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Gönder" />
<br/>
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>

24-10-2023, 16:39:46

meydanioglu

<style>
        .contact-form-widget {
            width: 100%;
            max-width: 100%;
        }

        .form {
            width: 100%;
            max-width: 100%;
        }

        .page-contact-form input,
        .page-contact-form textarea {
            width: 100%;
            max-width: 100%;
            margin-bottom: 10px;
        }

        .contact-form-button-submit {
            padding: 10px;
            background: #ea6337;
            color: #fff;
            border: none;
        }

        .contact-form-button-submit:hover {
            background: #d85b32;
            color: #fff;
        }
    </style>



<div class="contact-form-widget page-contact-form">
        <div class="form">
            <form name="contact-form">
                İsim:<br />
                <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
                E-posta: <span id="required">*</span><br />
                <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
                Mesajınız: <span id="required">*</span><br />
                <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Gönder" />
                <br />
                <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
                </div>
                <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
                </div>
            </form>
        </div>
    </div>

24-10-2023, 16:45:25

Onur_Ozturk

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }

        .contact-form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .contact-form label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .contact-form input[type="text"],
        .contact-form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .contact-form textarea {
            resize: vertical;
        }

        .contact-form button {
            background-color: #ea6337;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }

        .contact-form button:hover {
            background-color: #d85b32;
        }
    </style>
</head>
<body>
    <div class="contact-form">
        <h2>Contact Us</h2>
        <form name="contact-form">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>

            <label for="email">Email:</label>
            <input type="text" id="email" name="email" required>

            <label for="message">Message:</label>
            <textarea id="message" name="message" rows="4" required></textarea>

            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

Buyrun biraz daha modernize bir tasarım olarak kodu böyle güncelleyebilirsiniz.

24-10-2023, 16:56:10

lancelot

<style>

    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');

    .form,
    .contact-form-button-submit {
        font-family: 'Open Sans', sans-serif !important;
    }

    .contact-form-name,
    .contact-form-email,
    .contact-form-email-message {
        border: none !important;
        border-radius: 4px !important;
        padding: 10px 0 !important;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px !important;
        margin: 10px 0 !important;
        display: block !important;
        width: 100% !important;
        max-width:100%!important;
    }

    .contact-form-button-submit {
        border: none !important;
        background-color: #2BC48A !important;
        color: #fff !important;
        padding: 5px 10px !important;
        border-radius: 5px !important;
        width: 100% !important;
        max-width:100%!important;
        font-size: 20px !important;
    }

    .contact-form-button-submit:hover {
        cursor: pointer !important;
    }

 </style>
<div class="contact-form-widget page-contact-form">
    <div class="form">
        <form name="contact-form">
            <span>İsim</span>
            <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text"
                value="" />
            E-posta<span id="required">*</span>
            <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text"
                value="" required="required" />
            Mesajınız<span id="required">*</span>
            <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message"
                name="email-message" rows="5" required="required"></textarea>
            <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit"
                type="button" value="Gönder" />
            <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
            </div>
            <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
            </div>
        </form>
    </div>
</div>

Yapıyı bozmadan standartlara uygun ufak bir dokunuş.