To create/edit Contacts Form, please do the following:
Go to Dashboard > Contact > Contact Forms > Add New.
Enter form name, for example "Contact Form One"
In the tab "Form" you can use default form layout or enter this code lines:
<!-- heading -->
<h4 class="mil-mb-30"><span class="mil-accent">01.</span> Tell Us About Yourself </h4>
<div class="row">
<!-- input-first -->
<div class="col-lg-6"><div class="mil-input-frame mil-dark-input mil-mb-30">
<label class="mil-h6 mil-dark"><span>First Name</span></label>
[text* your-firstname placeholder "John"]
</div></div>
<!-- input-last-->
<div class="col-lg-6"><div class="mil-input-frame mil-dark-input mil-mb-30">
<label class="mil-h6"><span>Last Name</span></label>
[text* your-lastname placeholder "Jones"]
</div></div>
<!-- input-email -->
<div class="col-lg-6"><div class="mil-input-frame mil-dark-input mil-mb-30">
<label class="mil-h6"><span>Email Address</span></label>
[email* your-email placeholder "doe@mydomain.com"]
</div></div>
<!-- input-phone -->
<div class="col-lg-6"><div class="mil-input-frame mil-dark-input mil-mb-30">
<label class="mil-h6"><span>Phone</span></label>
[tel* your-phone placeholder "Enter your phone number"]
</div></div>
<!-- input-company -->
<div class="col-lg-6"><div class="mil-input-frame mil-dark-input mil-mb-30">
<label class="mil-h6 mil-dark"><span>Company</span></label>
[text* your-company placeholder "Enter your company name"]
</div></div>
<!-- input-role -->
<div class="col-lg-6 mil-mb-30"><div class="mil-input-frame mil-dark-input mil-mb-30">
<label class="mil-h6 mil-dark"><span>Role</span></label>
[text your-role placeholder "Enter your role"]
</div></div>
</div>
<!-- heading -->
<h4 class="mil-mb-30"><span class="mil-accent">02.</span> What Can We Help You With? </h4>
<div class="row">
<!-- input-subject -->
<div class="col-lg-6 mil-mb-30"><div class="mil-input-frame mil-dark-input mil-mb-30">
<label class="mil-h6 mil-dark"><span>Subject</span></label>
[text* your-subject placeholder "Web Designer"]
</div></div>
<!-- input-budget -->
<div class="col-lg-6 mil-mb-30"><div class="mil-input-frame mil-dark-input mil-mb-30">
<label class="mil-h6 mil-dark"><span>Project Budget</span></label>
[number* your-budget placeholder "Enter your budget"]
</div></div>
</div>
<!-- heading -->
<h4 class="mil-mb-30"><span class="mil-accent">03.</span> Tell Us About Your Project </h4>
<div class="row">
<!-- textarea -->
<div class="col-lg-12"><div class="mil-input-frame mil-dark-input mil-mb-30">
<label class="mil-h6"><span>Project Description</span></label>
[textarea* your-message placeholder "Your Message"]
</div></div>
<!-- file attachment -->
<div class="col-lg-12"><div class="mil-attach-frame mil-dark mil-mb-30">
<i class="fas fa-paperclip"></i>
<label class="mil-custom-file-input">
<span>Attach your file</span>
[file your-file limit:10000000 filetypes:jpeg|png|jpg|pdf|docx id:mil-file-input]
</label>
<p class="mil-text-sm">up to 10MB</p>
</div></div>
<!-- button -->
<div class="col-lg-12">
<button type="submit" class="mil-button mil-border mil-fw"><span>Submit Now</span></button>
</div>
</div>
In the tab "Mail", enter this your email address.
To insert Contact form to page, please do the following:
Go to Dashboard > Pages > Contact Us > Edit Page.
In the tab "Page Attributes" > "Template", select "Elementor Template (Default)". In the tab "Publish" click to "Publish" button.
Click to "Edit with Elementor" button.
In Elementor builder panel drag and drop "ITSulu Theme" use widget: "Contact Form 7".
Last updated
