Divi Café Demo – Part 6

Here we are with another Divi Café Demo part. In this we will see how to design the contact form part exactly as in demo.

For this we will need to follow below instructions-

• Add a new standard section (one column).
• Insert a new module called “Contact Form”.
• Go to general settings and disable “Disable Captcha” (i.e. No).
• Go to advanced design setting and make “Form Background Color” Transparent (i.e. rgba(0,0,0,0)).

• Drag Input Border Radius to 5.
• Select title text color according to you (in demo #e6d8c2 is used).
• Select Form Field Text Color (in demo #e6d8c2 is used).
• Enable “Use Border”.
• Select Border Color (in demo #e6d8c2 is used).
• Drag Border Width to 2px.
• Enable “Use Custom Styles for Button”.
• Drag Button Text Size to 16.
• Select Button Text Color (In demo rgba(0,0,0,0.4) is used).
• Select Button Background color (In demo #e6d8c2 is used).
• Drag Button Border Width to 5.
• Select Button Border Color (in demo it is #e6d8c2).
• Drag “Button Letter Spacing” to 2.
• Select “No” for “Add Button Icon”.
• Drag “Button Hover Letter Spacing” to 3.
• Now go to Custom CSS > Find Main Element and put the following code inside it.

• Save and Exit.
• Now go to “Section Module Settings”.
• Add a background Image (in demo http://elegantthemes.com/preview/Divi/cafe/wp-content/uploads/2015/04/powedered-sugar.jpg is used).
• Enable “Use Parallax Effect” and Select “True Parallax” in Method.
• Save and Exit.

Contact Form is now ready and it will look like-

the above image shows divi cafe contact form.

We hope that you like the post and if you have any queries or suggestion do not forget to leave your precious comment in the comment box.

In next part of this series, we will see how to design navigation bar just like in divi cafe demo.

Till then stay tuned!! Have a great Day! Good luck