integrate Infusionsoft webform to divi theme

Refine Skill content is free. When you purchase through referral links on our site, we earn a commission. Learn more

You have come to the right place, if you are looking forward to integrate Infusionsoft webform to Divi theme, make it look nicer and validate the required fields before submission. Refine Skill has prepared the simple to follow stepwise guideline which will guide you to integrate Infusionsoft webform to Divi theme. There are several ways to integrate Infusionsoft webform to Divi theme, but we will follow the manual style. This guideline will help you integrating and validating the Infusionsoft webform without using any WordPress plugin.

Integrate Infusionsoft webform to Divi theme without using plugins

Note: In this example, we’ll be using First Name, Last Name and Email as mandatory fields to demonstrate the integration. Adjust the code accordingly, if you have other mandatory fields. If you have some basic knowledge of CSS and JavaScript, you can easily follow the guideline and adjust the code on your own.

Step 1: Copy the unstyled HTML code

Login to your Infusionsoft account. Navigate to Marketing -> Campaign Builder and click on the campaign where you’ve added the webform. When you are in the campaign canvas, click on the webform. It may look something like this in the image (the name might be different).

integrate Infusionsoft webform to divi theme

It’ll take you to the Web Form detail page in the Design tab.

Now, Click on Code tab, select HTML Code (unstyled) and click on the Copy icon, that will copy the HTML snippet in clipboard.

integrate Infusionsoft webform to divi theme

Open any text editor and paste it over there. We’ll adjust few things on the input boxes and the label for the mandatory fields. What we’ll do is to add * in different color so that the user will see it as a mandatory field in the first glance and add a class on each of those divs.

Replace the following part of the code

Copy to Clipboard

with the following code. If you have any other mandatory fields, follow the same pattern.

Copy to Clipboard

Step 2: Paste the code to Divi code module

Now, copy the entire code. Goto your website into the edit mode. Add a regular section and in the Insert Row section popup, choose a section according to your preference. In this example we will choose 3 column section with (1/4, 2/4 and 1/4) column width. This way the form will appear in the centre of the page with some space in the left and right.

integrate Infusionsoft webform to divi theme

In the middle section, add Code Module and paste the code that you’ve copied there and click save (button with tick mark). Now, you have added the webform to the website successfully.

Step 3: Add Validation CSS

Since we would want to define the error label and deactivate the button in case of errors, we will add some line of CSS on the page.

To add the code, click on the gear or settings icon on the Divi Builder, it’ll prompt the page settings. Now click on Advanced tab and then Custom CSS. It’ll open up the Custom CSS input box where you’ll paste the following code. Before pasting the code, replace the text yourbuttonid with the button id of your Infusionsoft webform in line number 5. The button id starts with recaptcha_

Copy to Clipboard
integrate Infusionsoft webform to divi theme

Step 4: Form Styling

Since we would want to style the form a bit, we’ll add some css to define the width for tablet and mobile view too. To do so, add a CSS class to the row that you’ve added. We will use it to style the form and it’s elements in next step. To do so, click on the row settings, click on Advanced Tab and then CSS ID and Classes. Give a meaningful name so that you can replace that in the CSS code. In this example the class we’ve given is refineskill_demo.

integrate Infusionsoft webform to divi theme

To style the form elements, add the following code to the Divi Custom CSS. To add the custom CSS code, navigate to Divi -> Theme Options and scroll down to the bottom of the General Tab and paste the CSS code. Make sure that you have replaced the refineskill_demo with the correct CSS class before pasting it.

Copy to Clipboard

Step 5: Add JavaScript code for form validation

Now the only thing remaining is to add the JavaScript validation  To do so, right below the code that you’ve added earlier, add a code module and paste the following code. Make sure, you replace yourformid with your Infusionsoft form id. Infusionsoft form id starts with inf_form_ and replace the recaptchaid with your Infusionsoft recaptchaid. Recaptchaid starts with recaptchaid_. In both cases, you just need to replace the id only as the code already contains inf_form_ and recaptcha_ and click save (the tickmark button).

Copy to Clipboard

Now you have successfully integrated Infusionsoft webform to divi theme and validated it. Let us know, how did you find our article integrate Infusionsoft webform to divi theme in the comment section below.

integrate Infusionsoft webform to divi theme

Leave A Comment

Hire a Tech Professional

Looking for a tech resource person? We are here to help you.

    I am a Human

    Follow us on social media

    Recent Posts