How to add a phone number box to the contact form

Adding a phone number box to the Divi contact form

The built in contact form module by default has three fields Name, Email, Message. Most businesses like to collect the phone number of their client allowing them to call the client instead of responding via email.

Insert a new contact form module

Click ‘Add New Item’

Add ‘Phone’ as the field id – This is for backend use, and cannot have any spaces and appears between the %% in the coding later on.

Add ‘Phone’ as the Title – This appears on the front end of the website and can be what ever you want it to be. eg Phone, Telephone Number, Your number etc…

Click the ‘Design’ tab, followed by ‘Layout’ and select ‘Make Fullwidth’ then click the green tick box.

Drag the phone field in to the order you would like it to appear, in this example I want it to appear above the message and below the Name & Email address.

Click the ‘Email’ section and enter the clients email address then the below message pattern. (tip for testing enter your own email and send yourself a test email to make sure it is working correctly)

A customer has contacted you via your new OSAM Website. Their Details are below.

Name: %%Name%%

Email: %%Email%%

Phone Number: %%Phone%%

Message: %%Message%%


Once you have added the code click the green tick box, and update your page.


You have now finished your Contact Form.

Other fields and field types can be added to create a more indepth contact form checkout this video – and read here Visit for our latest how to guides.