Divi Theme Contact Form With File Upload

by | Nov 21, 2022 | Divi Theme, Web Design, Wordpress

Divi Theme how to create a form with file upload using contact form 7. Today we will be demonstrating how to create and style a form with file upload to look like a standard Divi contact form. We had done this previously using Caldera forms, but, Caldera forms have now ceased support for that product. Here ia an alternative to Caldera forms. Contact Form 7 is a free plugin.We will be using the standard Divi Code Module to build this feature. This is a great feature to have on your website, and very easy to do. We are going to be using the Divi theme to create some great effects in this series of videos. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching effects to enhance the look and user experience of your website. So, follow along with the video and see how to create 2 simple button hover effects with no coding with the Divi theme.
Create A Simple Back To The Top Button With Elementor
With contact form 7 you can create a email with file upload button that complements the Divi theme styles.
Create A Simple Back To The Top Button With Elementor

Install and activate the free Contact Form 7 plugin

Create A Simple Back To The Top Button With Elementor
Add the fields you require on your form.
Create A Simple Back To The Top Button With Elementor

Decide on the type and size of the files you can upload.

Create A Simple Back To The Top Button With Elementor

Fill out where you want your form sent

Create A Simple Back To The Top Button With Elementor

Add the shortcode to your page to add the form.

Create A Simple Back To The Top Button With Elementor

Add CSS code to style the form to fit your site ( Code below ).

Create A Simple Back To The Top Button With Elementor

Test out your new form!

For more information on the Divi theme, check out our Divi playlists below. Playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists

Divi Supreme Modules Playlist: https://www.youtube.com/watch? v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw

Full Ecommerce Site Build Playlist: https://www.youtube.com/watch? v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw

Try out the Divi theme: https://bit.ly/TryDiviNow

Divi Supreme Modules Plugin 10% Off: https://bit.ly/DiviSupremeCoupon

Create A Simple Back To The Top Button With Elementor
———- CSS CODE USED TODAY ———-

/* CF7 Styles */

.cfrm {
background:#eee !important;
width:100%;
padding:15px !important;
border-radius:3px;
border: 1px solid #eee !important;
}

.wpcf7-submit {
background: #fff;
padding: 10px 20px;
border: 2px solid #0D2B6F;
color: #0D2B6F;
font-size:20px;
border-radius:3px;
transition-duration: .6s;
}

.wpcf7-submit:hover {
background: #0D2B6F;
color:#fff;
}

For our readers, get any of the below courses for just $9.99 each. Just contact me with the course name and I’ll email you the discount coupon.

Subscribe To Our YouTube Channel

4.5 million views on youtube




Learn Bootstrap

Bootstrap (no coding) Build Bootstrap Websites the Easy Way! rating

Test Out The Divi Theme

IT Certification Category (English)300x250

Elementor Page Builder




Pin It on Pinterest

Share This