Contact Form 7 is our recommended form plugin for WordPress. It is a simple but powerful form creator for WordPress. Here we will show you how to use Contact Form 7 to create and edit a basic form.
After Contact Form 7 is installed, you will find a new menu item in your WordPress admin area called Contact, here is where your forms and created and edited. From the Contact main screen, you will see your first contact form, it`s usually a default form called Contact Form 1 OR if you have imported the demo data for Fanky you may see a few forms that we have made specially for you
To ensure seamless integration, use the form structure as shown in the theme by simply copying and pasting the provided code.
<div class="row">
<div class="form-group col-6">
[text* your-name class:form-control placeholder "Name"]
</div>
<div class="form-group col-6">
[email* your-email class:form-control placeholder "Email"]
</div>
<div class="form-group col-12">
[text your-subject class:form-control placeholder "Title"]
</div>
<div class="form-group col-12">
[textarea message class:form-control placeholder "Message"]
</div>
<div class="ms-cf--bottom">
<div class="form-quiz">[quiz quiz-950 class:form-control "12+48=|60"]</div>
<div class="wpcf7-btn">[submit class:wpcf7-btn]
<div class="btn-wrap">
<div class="f-btn-l">
<svg width="254" height="392" viewBox="0 0 254 392" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 57.647C0 25.8095 25.8095 0 57.647 0C89.4846 0 115.294 25.8095 115.294 57.647C115.294 89.4846 89.4846 115.294 57.647 115.294C25.8095 115.294 0 89.4846 0 57.647Z" fill="#121212"/>
<path d="M138.353 196C138.353 164.163 164.163 138.353 196 138.353C227.838 138.353 253.647 164.163 253.647 196C253.647 227.838 227.838 253.647 196 253.647C164.163 253.647 138.353 227.838 138.353 196Z" fill="#121212"/>
<path d="M0 334.353C0 302.516 25.8095 276.706 57.647 276.706C89.4846 276.706 115.294 302.516 115.294 334.353C115.294 366.191 89.4846 392 57.647 392C25.8095 392 0 366.191 0 334.353Z" fill="#121212"/>
</svg>
</div>
<div class="f-btn-r">
<span>Send</span>
<div class="btn-r_icon">
<svg width="254" height="392" viewBox="0 0 254 392" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 57.647C0 25.8095 25.8095 0 57.647 0C89.4846 0 115.294 25.8095 115.294 57.647C115.294 89.4846 89.4846 115.294 57.647 115.294C25.8095 115.294 0 89.4846 0 57.647Z" fill="#121212"/>
<path d="M138.353 196C138.353 164.163 164.163 138.353 196 138.353C227.838 138.353 253.647 164.163 253.647 196C253.647 227.838 227.838 253.647 196 253.647C164.163 253.647 138.353 227.838 138.353 196Z" fill="#121212"/>
<path d="M0 334.353C0 302.516 25.8095 276.706 57.647 276.706C89.4846 276.706 115.294 302.516 115.294 334.353C115.294 366.191 89.4846 392 57.647 392C25.8095 392 0 366.191 0 334.353Z" fill="#121212"/>
</svg>
</div>
</div>
</div></div></div>
</div>More details about the plugin on the official website. link