Contact Page

To create Contacts Form, please do the following:

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

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

  3. In the tab "Form" you can use default form layout or enter this code lines:

    <!-- contact form -->
    <div class="art-contact-form">
    	<!-- form field -->
    	<div class="art-form-field">
    		<!-- name input -->
    		[text* your-name class:art-input placeholder "Name"]
    		<!-- label -->
    		<label><i class="fas fa-user"></i></label>
    	</div>
    	<!-- form field end -->
    
    	<!-- form field -->
    	<div class="art-form-field">
    		<!-- email input -->
    		[email* your-email class:art-input placeholder "Email"]
    		<!-- label -->
    		<label><i class="fas fa-at"></i></label>
    	</div>
    	<!-- form field end -->
    
    	<!-- form field -->
    	<div class="art-form-field">
    		<!-- message textarea -->
    		[textarea* your-message class:art-input placeholder "Message"]
    		<!-- label -->
    		<label><i class="far fa-envelope"></i></label>
    	</div>
    	<!-- form field end -->
    
    	<!-- button -->
    	<div class="art-submit-frame">
    		<button class="art-btn art-btn-md art-submit" type="submit"><span>Send message</span></button>
    	</div>
    </div>
    <!-- contact form end -->

  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. Click to "Edit with Elementor" button.

  2. In Elementor widget "Contact Form" in Form field, select your created CF7 form.

(Video instructions below):

Arter - how to create contact form in CF7 and edit Contact Page

Saved your time and you want to thank me? You can image-text 😊

Last updated