Submit button – Divi style

You don’t give a link to a site using the theme, so it’s going to be hard for anyone to help you, but basically, you just add the classes used by the Divi submit button in your theme to the submit button of your Contact Form 7 form like the following:

[submit class:class1 class:class2]

Thank you very much for your advices,

With your solution, all the design from Divi theme is applied to the button, except the small right arrow when the button is hovering.

It’s probably due to the fact that Divi theme applied some CSS code with the “:after” attribute to the button link’s and wpcf7 doesn’t use a link in the submit button.

You can the see the result on the site https://www.inoxit.ch, at the foot of the home page.

Have you got an other advice for me ?

Thank’s for your help.

Nice work!

It does look like the “after” pseudo-element for the link is what converts the right arrow to the double-down arrows here:

.et_pb_login .et_pb_custom_button_icon.et_pb_button::after, .et_pb_custom_button_icon.et_pb_button::after {
	content: attr(data-icon);
}

It seems to be based on the link having a data-icon value of 7:

<a class="et_pb_button et_pb_custom_button_icon  et_pb_button_0 et_pb_module et_pb_bg_layout_dark" href="/#Contact" data-icon="7">Contactez-nous</a>

I’m trying to think of a way to get that arrow on the submit button, but I’m coming up empty. You might try posting on the support forum for the theme and see if they have any ideas. If you find a solution, please post it back here. I’d like to know how you manage it.

Thank you for your suggestion, I will post to Elegant Theme support for perhaps finding a solution.

Have a nice day.

Hi,

I had a look in the support of Elegant Theme (Divi). And I found a workaround solution with the use of a background image (arrow) when the button is hover. I have applied this solution on my website and it’s seems good.

Thanks.
Nicolas

I thought of something else that might work. You could use a hyperlink in your CF 7 form just like they do for their buttons instead of the submit button:

<a id="wpcf7-submit" class="et_pb_button et_pb_custom_button_icon  et_pb_button_0 et_pb_module et_pb_bg_layout_dark" href="#" data-icon="7">Envoi</a>

and then use jQuery on the click event of the hyperlink the button creates to submit the contact form:

jQuery(document).ready(function() {
	jQuery('#wpcf7-submit').click(function() {
		jQuery('#wpcf7-f4626-p39-o1').submit();
	});
});

It’s certainly another good solution. Thanks.

• This reply was modified 7 years, 11 months ago by CyberNic6.