Restyle Contact Form

Create the backbone of your contact form

After you add the generated code to your custom-page-with-getform.hbs you will need to delete the code between the form tag and add these lines of code

<!-- Text input field handle --> 
<div class="mt-[15px]">
    <label for="name" class="text-[#1A1236] dark:text-gray-100">Name</label>
    <input type="text" name="name" id="name" placeholder="First and Last" required class="mt-[10px] bg-gray-200 dark:bg-white rounded-[4px] w-full">
</div>

<!-- Text input field handle --> 
<div class="mt-[15px]">
    <label for="email" class="text-[#1A1236] dark:text-gray-100 ">Email Address</label>
    <input type="email" name="email" id="email" placeholder="Your email address" required class="mt-[10px] bg-gray-200 dark:bg-white rounded-[4px] w-full">
</div>

<!-- Textarea field handle --> 
<div class="mt-[15px]">
    <label for="message" class="text-[#1A1236] dark:text-gray-100 ">Message</label>
    <textarea rows="5" name="message" id="message" placeholder="Your message" required class="mt-[10px] bg-gray-200 dark:bg-white rounded-[4px] w-full"></textarea>
</div>

<!-- add hidden Honeypot input to prevent spams -->
<input type="hidden" name="_gotcha" style="display:none !important">

<!-- Checkbox handle -->
<label for="subcribe-title" class="inline-block ml-[5px]">Subcribe To Our Newsletters</label>
<input type="hidden" name="subcribe-title" id="subcribe-title" value="subcribe-title">
<div class="flex items-center flex-wrap mt-[15px]">
    <div class="flex items-center sm:mr-[10px] sm:flex-1 max-sm:w-full">
        <input type="checkbox" id="subscribe" name="subscribe" value="yes" checked>
        <label for="subscribe" class="inline-block ml-[5px]">Subscribe</label>
    </div>
    <div class="flex items-center sm:mr-[10px] sm:flex-1 max-sm:w-full">
        <input type="checkbox" id="subscribe" name="subscribe" value="no">
        <label for="subscribe" class="inline-block ml-[5px]">Unsubscribe</label>
    </div>
</div>

<!-- Radio button handle -->
<div class="mt-[15px]">
    <label for="gender-title" class="inline-block ml-[5px]">Gender</label>
    <input type="hidden" name="gender-title" id="gender-title" value="gender-title"><br>
    <input type="radio" id="subscribe" name="gender" value="male" checked>
    <label for="gender">Male</label><br>
    <input type="radio" id="gender" name="gender" value="female">
    <label for="gender">Female</label><br>
    <input type="radio" id="gender" name="gender" value="other">
    <label for="gender">Other</label>
</div>   

<!-- Select field handle -->
<div class="mt-[15px]">
    <label for="work-experience" class="text-[#1A1236] dark:text-gray-100 ">Work experiences</label>
    <select name="work-experience" id="work-experience" class="bg-gray-200 dark:bg-white text-black w-full rounded-[4px] mt-[10px]">
        <option value="one-year">0-1 year</option>
        <option value="one-five-year">1-5 years</option>
    </select>
</div>   

<!-- Submit button handle -->
<div class="mt-[15px] flex justify-end">
    <input type="submit" value="Submit" class="inline-block min-w-[127px] px-[13px] py-[6px] rounded-[6px] cursor-pointer transform hover:scale-[0.95] duration-300 will-change-transform">
</div>

Please DO NOT change the action value nad method value of the form tag

After you paste the code like the picture above then your contact form should look like this

After that, you can customize contact from further more by follow these steps.

Advance Contact Form Settings