If you haven’t installed our demo content but want to add a contact form to your website, we recommend using the popular Contact Form 7 plugin.

This plugin is included as a recommended plugin with our theme. Once you install and activate it, a basic contact form will be automatically created. You can place it on your page using Elementor.

Alternatively, you can create a custom form by navigating to:
Dashboard → Contact → Add New

For detailed instructions, refer to the Contact Form 7 Documentation.

Mavis Theme Contact Forms Code:

<div class="form-group">
    <label>Name *</label>
    [text* your-name class:form-control placeholder "Your name"]
</div>
<div class="form-group">
    <label>Email *</label>
    [email* your-email class:form-control placeholder "Enter your email"]
</div>
<div class="form-group">
    <label>Phone *</label>
    [tel* your-phone class:form-control placeholder "Enter your phone"]
</div>
<div class="form-group">
    <label>Subject *</label>
    [text* your-subject class:form-control placeholder "Your subject"]
</div>
<div class="form-group">
    <label>Message *</label>
    [textarea* your-message class:form-control placeholder "Write your message"]
</div>
<div class="form-group">
    <div class="form-check">
        [acceptance gdpr class:gdpr-term] I accept all <a href="http://localhost/wordpress/mavis/terms-conditions/">terms & conditions</a>.[/acceptance]
    </div>
</div>
<button type="submit" class="default-btn">
<span class="btn-left-i">
    <i class="flaticon-right-arrow"></i> 
</span>
Submit Now
<span class="btn-right-i">
    <i class="flaticon-right-arrow"></i> 
</span>
</button>

Payment Form:

<div class="online-payment-area ptb-120">
    <div class="container">
        <div class="online-payment-form">
            <div class="content">
                <h3>Mavis Payment </h3>
            </div>
            <div class="row justify-content-center align-items-center">
                <div class="col-lg-12 col-md-12">
                    <h3>Mavis Account Information</h3>
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="form-group">
                        <label>Memo *</label>
                        [text* memo class:form-control placeholder "Memo"]
                    </div>
                </div>
                 <div class="col-lg-6 col-md-12">
                    <div class="form-group">
                        <label>Upload Memo</label>
                        [file file-memo class:form-control limit:10000]
                    </div>
                </div>
                <div class="col-lg-12 col-md-12">
                    <h3>Extra Information</h3>
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="form-group">
                        <label>First Name *</label>
                        [text* first-name class:form-control placeholder "Your first name"]
                    </div>
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="form-group">
                        <label>Last Name *</label>
                        [text* last-name class:form-control placeholder "Your last name"]
                    </div>
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="form-group">
                        <label>Address 1*</label>
                        [text* address-1 class:form-control placeholder "Address"]
                    </div>
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="form-group">
                        <label>City</label>
                        [text city class:form-control placeholder "Enter your city"]
                    </div>
                </div>
                <div class="col-lg-3 col-md-12">
                    <div class="form-group">
                        <label>State</label>
                        [select state class:form-select class:form-control "Please Select" "Minnesota" "Washington" "Wisconsin" "New Jersey" "Colorado"]
                    </div>
                </div>
                <div class="col-lg-3 col-md-12">
                    <div class="form-group">
                        <label>Country</label>
                        [select country class:form-select class:form-control "Please Select" "United States" "Canada" "Norway" "Sweden" "Denmark"]
                    </div>
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="form-group">
                        <label>Zip Code *</label>
                        [text* zip-code class:form-control placeholder "12345"]
                    </div>
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="form-group">
                        <label>Email Address *</label>
                        [email* email class:form-control placeholder "Enter your email"]
                    </div>
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="form-group">
                        <label>Phone Number</label>
                        [tel number class:form-control placeholder "Your phone number"]
                    </div>
                </div>
                <div class="col-lg-12 col-md-12">
                    <div class="form-group">
                        <label>Description *</label>
                        [textarea* description class:form-control placeholder "Write your description"]
                    </div>
                </div>
                <div class="col-lg-12 col-md-12">
                    <div class="form-group">
                        [acceptance gdpr class:gdpr-term ] I accept all <a href="http://localhost/wordpress/mavis/terms-conditions/">terms & conditions</a>.[/acceptance]
                    </div>
                </div>
                <div class="col-lg-12 col-md-12">
                    <button type="submit" class="default-btn">
                        <span class="btn-left-i">
                            <i class="flaticon-right-arrow"></i> 
                        </span>
                        Proceed Card
                        <span class="btn-right-i">
                            <i class="flaticon-right-arrow"></i> 
                        </span>
                    </button>                
                </div>
            </div>
        </div>
    </div>
</div>

You Have Any Question?

<div class="form-group">
    <label>Name *</label>
    [text* your-name class:form-control placeholder "Your name"]
</div>
<div class="form-group">
    <label>Email *</label>
    [email* your-email class:form-control placeholder "Enter your email"]
</div>
<div class="form-group">
    <label>Comment *</label>
    [textarea* your-comment class:form-control placeholder "Write your comment"]
</div>
<div class="form-group">
[acceptance gdpr class:gdpr-term ] I accept all <a href="http://localhost/wordpress/mavis/terms-conditions/">terms & conditions</a>.[/acceptance]
</div>
<button type="submit" class="default-btn">
    <span class="btn-left-i">
        <i class="flaticon-right-arrow"></i> 
    </span>
        Submit Now
    <span class="btn-right-i">
        <i class="flaticon-right-arrow"></i> 
    </span>
</button>