Techno Wordpress CMSWp themes Plugins BlogInstall Theme Install PluginFree Themes

Divi theme Contact form Module |Wordpress Divi builder Documentation

Contact form module is the most useful module of the Divi theme, with the help of which you can easily get information from the client side. The contact form of divi module is used to the contact page of all websites. If you want to get any information from Visitors, then you can use the contact form module. For a demo of the contact form module, you can see the contact page all over websites. The Divi is a page builder that lets you create every kind of website.

Documentation of divi theme contact form is very simple.

1. If you have wanted a website using the contact form, then you have to open the WordPress page with divi theme (edit with divi ). After opening the page edit with divi you have to need to insert contact form module.

3. To insert a contact form module, first, you have to insert a row or column.

4. Now you have to click on insert module and insert the contact form module.

divi theme contact form module

 After inserting the Divi Contact form model you will have to do some settings.

Divi Contact form module Setting Documentation -

Content:

1. You will already get three fields the name, email, and message field.
2. Add new field - Here you can add more input filed contact form.

divi theme contact form module add new field

3. Title:- Define the title for the contact form module.

4.

divi theme contact form module example

Success Message:- Here you can use the success message. A success message will show after the done.

5. Submit Button Text:- Use the text on the button like submit, register, send

6 Email:- Input the email address where messages should be sent.

7. Message Pattern: Here you can define Fields should be included in the following format - %% field_id %%. For example, if you want to include the field with id = phone, and field with id = message, then you can use the following pattern: My message is %% message %% and phone number is %% phone %%.

8. Enable Redirect URL: YES/NO Redirect users after successful form submission.

9. Background- Here you use color, image or video behind the contact form.  After setting the content you have to click the design option.

Design -

1. Text Orientation:- Here you can align the text (Left, center, right )


2. Title Text
Title Heading Level:- Which heading level you like too. (H1 H2 H3 H4 H5 H6)
Title Font Style:- Here you can choose the style for the title text.
Title Text Alignment:-Here you can alignment the title text (Left, center , right )
Title Text Color:- Use the color for title.
Title Text Size:- Set the size for the title text.

3. Form Field Text-
Form Field Background Color:- Choose the form field background color .
Form Field Font:- Which font to use for form field .
Form Field Font Style:- Here choose the style for the form field text .
Form Field Text Alignment:- Here you can aligment the form field text (Left ,center , right )
Form Field Text Color:- Choose the form field color .
Form Field Text Size:- Set the size for form filed text .
Form Field Text Shadow:- Apply the shadow on form field .

4. Button Use Custom Styles for Button

5.. Custom Margin:- Here you can use the custome margin for code module ( Top margin,right margin,bottom margin,left margin)

6. Custom Padding: Use custom padding like margin ( Top padding ,right padding,bottom padding,left padding)

7 Inputs Border Styles:- Choose the border syle for the text boxes .

8. Inputs Border Color:- You can use the border color for the input box.

9 . Box Shadow:- Which type of box-shadow you like .

10 . Animation Style:Apply the animation on contact form . Choose the animation type .
None
Fade
Slide
Bounce
Zoom
Flip
Foll  
Roll
In this way, you can easily design the contact form of the Divi theme .

Divi Contact Form Module Demo -

After the Customising and Design, you have to publish the page. After publishing the page you can see the demo by going to the same page.

divi theme contact form module example
Free divi theme download free divi latest divi theme version Free divi theme wesbite Divi Installation How To Download Free Divi Theme Divi page builder free divi layouts 2018 free divi plugins free divi theme plugins free divi theme alternative free divi child theme ecommerceDivi Modules

Related Post