Contact Forms

To create/edit Contacts Form, please do the following:

1. Go to Dashboard > Contact > Contact Forms > Add New.

2. Enter form name, for example "Contact Form One"

3. 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 "[e-mail]"]
   </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>

4. In the tab "Mail", enter this your email address.

5. Save Changes.

To insert Contact form to page, please do the following:

1. Go to Dashboard > Pages > Contact Us > Edit Page.

2. In the tab "Page Attributes" > "Template", select "Elementor Template (Default)". In the tab "Publish" click to "Publish" button.

3. Click to "Edit with Elementor" button.

4. In Elementor builder panel drag and drop "ITSulu Theme" use widget: "Contact Form 7".