Form

Contact Form

Simple contact form example

Contact Form

Please fill up the form below.

Fields marked with * are required.

Name *

Name is required

Email Address *

Please enter a valid email address

Phone

Phone number is required

Address

Address is required.

Upload File

No file chosen

This field is required

State

Message

Message is required

Accept terms and conditions

This field is required

Code

<div class="contact-form">
   <h2>Contact Form</h2>
   <p>Please fill up the form below.</p>
   <div style="font-size: 12px;">Fields marked with <span class="simpui-required">*</span> are required.</div>
   <div class="simpui-row">
      <div class="simpui-form-group">
         <label for="name" class="simpui-label">Name <span class="simpui-required">*</span></label>
         <input type="text" id="name" class="simpui-input" placeholder="" required />
         <div class="simpui-error">Name is required</div>
      </div>
      <div class="simpui-form-group">
         <label for="email" class="simpui-label">Email Address <span class="simpui-required">*</span></label>
         <input type="email" id="email" class="simpui-input" placeholder=" " required />
         <div class="simpui-error">Please enter a valid email address</div>
      </div>
   </div>
   <div class="simpui-row">
      <div class="simpui-form-group">
         <label for="phone" class="simpui-label">Phone</label>
         <input type="text" id="phone" class="simpui-input" placeholder="" required />
         <div class="simpui-error">Phone number is required</div>
      </div>
      <div class="simpui-form-group">
         <label for="address" class="simpui-label">Address</label>
         <input type="text" id="address" class="simpui-input" placeholder="" required />
         <div class="simpui-error">Address is required.</div>
      </div>
   </div>
   <div class="simpui-row">
      <div class="simpui-form-group">
         <label for="photo" class="simpui-label">Upload File</label>
         <input type="file" id="photo" class="simpui-file" accept="image/*" required/>
         <div class="simpui-file-label" id="photo-label">
            <span class="simpui-file-icon" aria-hidden="true">
               <!-- SVG file icon (static, does not change) -->
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" d="M3 17V7.2c0-1.12 0-1.68.218-2.108c.192-.377.497-.682.874-.874C4.52 4 5.08 4 6.2 4h11.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874c.218.427.218.987.218 2.105v9.606c0 .485 0 .865-.018 1.174M3 17c0 .988.013 1.506.218 1.907c.192.377.497.683.874.875c.427.218.987.218 2.105.218h11.607c1.118 0 1.677 0 2.104-.218c.376-.192.682-.498.874-.875c.123-.242.177-.526.2-.93M3 17l4.768-5.562l.001-.002c.423-.493.635-.74.886-.83a1 1 0 0 1 .681.005c.25.093.46.343.876.843l2.671 3.205c.386.464.58.696.816.79a1 1 0 0 0 .651.028c.244-.072.46-.287.889-.716l.497-.497c.437-.438.656-.656.904-.728a1 1 0 0 1 .659.037c.238.099.431.34.818.822l2.865 3.582m0 0L21 18m-6-8a1 1 0 1 1 0-2a1 1 0 0 1 0 2"/>
               </svg>
            </span>
            <span id="photo-label-text">No file chosen</span>
         </div>
         <div class="simpui-error">This field is required</div>
      </div>
      <div class="simpui-form-group">
         <label for="state" class="simpui-label">State</label>
         <div class="simpui-dropdown-wrapper">
            <div class="simpui-select">
               <div class="simpui-select-trigger">
                  <span class="simpui-selected-text">Select State</span>
                  <svg class="simpui-chevron" width="16" height="16" viewBox="0 0 20 20" fill="none">
                     <path d="M6 8l4 4 4-4" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
               </div>
               <div class="simpui-options">
                  <div class="simpui-options-title">States</div>
                  <span data-value="">Select State</span>
                  <span data-value="NSW">NSW</span>
                  <span data-value="VIC">VIC</span>
                  <span data-value="QLD">QLD</span>
                  <span data-value="SA">SA</span>
                  <span data-value="WA">WA</span>
                  <span data-value="TAS">TAS</span>
                  <span data-value="NT">NT</span>
                  <span data-value="ACT">ACT</span>
               </div>
            </div>
            <input type="hidden" name="state" required/>
            <div class="simpui-error">This field is required</div>
         </div>
      </div>
   </div>
   <div class="simpui-row">
      <div class="simpui-form-group">
         <label for="bio" class="simpui-label">Message</label>
         <textarea id="bio" class="simpui-textarea" placeholder="Short bio" required></textarea>
         <div class="simpui-error">Message is required</div>
      </div>
   </div>
   <div class="simpui-row">
      <div class="simpui-form-group">
         <label class="simpui-checkbox">
         <input type="checkbox" id="customCheckbox" required/>
         <span class="simpui-box"></span>
         <span class="simpui-checkbox-label">Accept terms and conditions</span>
         </label>
         <div class="simpui-error">This field is required</div>
      </div>
   </div>
   <div class="simpui-row">
      <button class="simpui-btn dark md">Submit</button>
   </div>
</div>

Login Form

Simple login form.

XYZ Inc.

Welcome back

Or continue with

Username

Username is required

Password

Password is required

Forgot your password?

Don't have an account? Sign up

Code

<div style="justify-content: center; display:flex; align-items: center; gap: 10px;">
    <div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path fill="currentColor" d="M385.7 34.49c12.2 9.36 22.2 21.77 29.5 35.52c8.6 16.18 13.5 34.49 13 52.39c12.3-16.5 14.7-39.15 4.4-58.63c-9.6-18.16-27.8-28.7-46.9-29.28m-24.3 6.07c-3.8 17.71-.1 38.21 9.3 55.98c8.8 16.66 22.5 30.66 38 37.96c3.8-17.8 0-38.3-9.4-56.07c-8.8-16.66-22.4-30.59-37.9-37.87m-19.5 13.57c-14.1 16.62-17.4 40.63-6.5 61.07c10.8 20.5 32.5 31.3 54.1 29.1c-14.5-9.7-26.4-23.7-34.7-39.3c-8.3-15.74-13.1-33.43-12.9-50.87m25.8 108.07c-6.1 0-18.9 3.4-30.8 10.8c-13.6 8.5-26.6 21.4-32.5 35.3c-.9 2.2-3.8 12.5-7.5 25c-3.6 12.5-8.4 27.8-14.8 42.9c-6.4 15.2-14.3 30.2-24.6 42.4c-10.3 12.1-23.4 21.5-39.6 23.2c-13.1 1.3-25.6-3.9-37.1-11.4c-11.6-7.4-22.4-17.3-31.8-27.3c-18.9-19.9-32.5-40.2-32.5-40.2l-4.4-6.6l6-5.2c21.7-18.7 23.5-42.8 22.8-62.9c-18 9.5-34.6 21.7-40.3 32.7l-3.71 7l-7.45-2.8c-10.37-3.9-21.14-4.6-32.43-5.7c-7.65-.7-15.63-1.7-23.49-4.3c-.33 8.4 3.9 14.8 11.24 21.4c9.87 8.8 25.78 15.9 40.15 20.2l6.14 1.8l.29 6.4s1.32 28.3 7.77 59.9c6.49 31.5 19.29 65.4 35.69 75.9c27.8 18 65.6 25.5 103.4 23.1c-2.4-2.2-4.7-4.4-6.8-6.6c-8.4-8.5-14.7-16.3-18.1-23.6l16.4-7.6c1.6 3.5 7 11 14.5 18.5c7.4 7.6 17 15.7 27.1 22.3s20.8 11.8 30.2 13.9c8 1.8 14.6 1.4 20.3-1.2c-.3-1.3-.5-2.5-1.5-4.8c-2.5-6.1-7.2-14.6-12.4-22.9c-10.2-16.6-22-32.4-22-32.4l14.4-10.8s11.1 15 21.6 31.6c11.6-6.4 22.1-13.9 30.9-22.6c15.3-15 21.5-53.6 21.7-88.3c.1-34.6-4.4-64.8-4.4-64.8l-.4-2.3l.9-2.2c2.6-6.8 5.1-23.1 4.6-36.6c-.3-6.7-1.3-12.9-2.8-16.7c-1.4-3.9-2.6-4.3-2.5-4.3c-.6-.1-1.3-.2-2.2-.2M336 190a9 9 0 0 1 9 9a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9m37.9 190c-2.5 3.7-5.3 7.3-8.5 10.4c-8 7.8-17 14.8-26.7 20.9c9.3 2.8 19.4 4.7 29.7 5.6c24 2.1 47.9-.7 61.8-4.2c-.5-.9-1.1-2-2.2-3.5c-3.7-4.6-10.4-10.4-18.7-15.4c-10.2-6.2-22.8-11.3-35.4-13.8m-241.4 61L98 487h316l-34.5-46h-39.2c0 3.9-1.3 9.2-5.8 12.2c-11.2 7.2-24.5 7.9-37 5c-12.5-2.8-24.8-8.9-36.1-16.4c-.4-.3-.8-.5-1.2-.8z"/></svg></div>
    <h3>XYZ Inc.</h3>
</div>

<div class="login-form-wrapper">
    <h3 style="text-align: center; line-height: 0px;">Welcome back</h3>
    <div class="text-dimmed" style="text-align: center; font-size: 14px;">Login with your Apple or Google account</div>
    <button class="simpui-btn icon-left-btn light md full-width" id="iconLightBtn" style="margin-top: 20px;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 315"><path d="M213.803 167.03c.442 47.58 41.74 63.413 42.197 63.615c-.35 1.116-6.599 22.563-21.757 44.716c-13.104 19.153-26.705 38.235-48.13 38.63c-21.05.388-27.82-12.483-51.888-12.483c-24.061 0-31.582 12.088-51.51 12.871c-20.68.783-36.428-20.71-49.64-39.793c-27-39.033-47.633-110.3-19.928-158.406c13.763-23.89 38.36-39.017 65.056-39.405c20.307-.387 39.475 13.662 51.889 13.662c12.406 0 35.699-16.895 60.186-14.414c10.25.427 39.026 4.14 57.503 31.186c-1.49.923-34.335 20.044-33.978 59.822M174.24 50.199c10.98-13.29 18.369-31.79 16.353-50.199c-15.826.636-34.962 10.546-46.314 23.828c-10.173 11.763-19.082 30.589-16.678 48.633c17.64 1.365 35.66-8.964 46.64-22.262"/></svg> Login with Apple</button>
    <button class="simpui-btn icon-left-btn light md full-width" id="iconLightBtn" style="margin-top: 10px;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12.037 21.998a10.3 10.3 0 0 1-7.168-3.049a9.9 9.9 0 0 1-2.868-7.118a9.95 9.95 0 0 1 3.064-6.949A10.37 10.37 0 0 1 12.212 2h.176a9.94 9.94 0 0 1 6.614 2.564L16.457 6.88a6.2 6.2 0 0 0-4.131-1.566a6.9 6.9 0 0 0-4.794 1.913a6.62 6.62 0 0 0-2.045 4.657a6.6 6.6 0 0 0 1.882 4.723a6.9 6.9 0 0 0 4.725 2.07h.143c1.41.072 2.8-.354 3.917-1.2a5.77 5.77 0 0 0 2.172-3.41l.043-.117H12.22v-3.41h9.678q.113.927.1 1.859c-.099 5.741-4.017 9.6-9.746 9.6l-.215-.002Z" clip-rule="evenodd" stroke-width="0.5" stroke="currentColor"/></svg>Login with Google</button>
    <p class="line-text">Or continue with</p>
    <div class="simpui-form-group">
        <label for="username" class="simpui-label">Username</label>
        <div class="simpui-input-wrapper">
            <svg class="simpui-input-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4 22a8 8 0 1 1 16 0h-2a6 6 0 0 0-12 0zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6s6 2.685 6 6s-2.685 6-6 6m0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4"/></svg>
            <input type="text" id="username" class="simpui-input" placeholder=" " required />
        </div>
        <div class="simpui-error">Username is required</div>
    </div>


    <div class="simpui-form-group" style="margin-top: 20px;">
        <label for="password" class="simpui-label">Password</label>
        <div class="simpui-input-wrapper">
            <svg class="simpui-input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M3 8.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2"/><path fill="currentColor" fill-rule="evenodd" d="M4.5 3c1.56 0 2.94.794 3.75 2h5.26a1 1 0 0 1 .807.409l1.49 2.04a.99.99 0 0 1 .033 1.13l-1.26 1.95a.997.997 0 0 1-1.41.276L12.02 10l-1.19.812a1 1 0 0 1-1.13 0L8.51 10h-.258c-.808 1.21-2.18 2-3.75 2a4.5 4.5 0 0 1 0-9zm3.75 6a1 1 0 0 0-.832.444c-.63.94-1.7 1.56-2.91 1.56c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5c1.21 0 2.28.616 2.91 1.56c.186.277.498.444.832.444h5.26L15 8.048l-1.26 1.95l-1.15-.805a1 1 0 0 0-1.14-.005L10.26 10l-1.19-.812a1 1 0 0 0-.566-.175h-.258z" clip-rule="evenodd"/></svg>
            <input type="password" id="password" class="simpui-input" placeholder=" " required />
        </div>
        <div class="simpui-error">Password is required</div>
    </div>
    <div class="simpui-link dark-support-link" style="text-align: right;margin: 10px 0px;">
        <a href="#!" style="text-decoration: none; font-size: 13px;">Forgot your password?</a>
    </div>
    <div>
        <button class="simpui-btn dark md full-width">Login</button>
    </div>
    <div class="simpui-link dark-support-link" style="text-align: center;margin: 10px 0px; font-size: 13px">
        Don't have an account? <a href="#!" style="text-decoration: none; font-size: 13px;">Sign up</a>
    </div>
</div>