Return to previous page

How to replace a submit button with an SVG arrow in a newsletter form

This topic has 8 replies, 2 voices, and was last updated 8 months ago ago by Rose Tyler

lanxiaodj

Participant

August 29, 2023 at 13:11

How to replace a submit button with an SVG arrow in a newsletter form like this: https://prnt.sc/_7uRd__Gck5d

I have a plugin “mc4wp” already，but it needs some codes to style it. Could you spare me the functional codes, please?

I also have WPForms and contact form7, but they all creat a basic structure. What I want is a sign up form like the one I refered to.

#366017 Copied Theme version: 9.1.13

7 Answers

Rose Tyler

Support staff

August 29, 2023 at 15:59

Hello, Lanxiaodj,

Thank you for contacting us and for using XStore.

1/ Please provide URL of your site where the form is visible.

2/ “I also have WPForms and contact form7, but they all creat a basic structure. What I want is a sign up form like the one I refered to.” – please provide some screenshots for a better understanding of the desired result.

Thank you for your cooperation and we look forward to hearing from you soon.

Kind Regards,
8theme team

#366049 Copied

lanxiaodj

Participant

August 30, 2023 at 08:15

Here is my URL at private content area.
You can see the newsletter signup form is basic styled.

Here is what I want to modify it to: https://prnt.sc/BMjLZIjzbF9V

The submit button is inline with the email type field, and instead of a traditional submit button, they used an SVG arrow (this is what I want，a URL svg icon replace the traditional submit botton).

Also, the checkbox of agreement is below the type field and submit icon.

You could pass me the code using whatever url svg icon, that I’ll learn and customize it myself.

Please contact administrator
for this information.

#366097 Copied

Rose Tyler

Support staff

August 30, 2023 at 15:05

Hello, Lanxiaodj,

We appreciate your prompt response.

It requests additional customization, which is out of our basic support scope.

For minor customization requests, we suggest considering paid customization services. You may submit a customization request to the Codeable team via their website: https://www.codeable.io/?ref=qGTdX

You are using the WPForms plugin, so we would recommend you contact support of the plugin. As we can see, your question is independent of our theme.

Provide URL of the demo from which you did this screenshot – https://prnt.sc/_7uRd__Gck5d We use MC4WP: Mailchimp for WordPress on our demos, and we can share custom code from there only.

Kind Regards,
8theme team

#366148 Copied

lanxiaodj

Participant

August 30, 2023 at 16:48

“Provide URL of the demo from which you did this screenshot – https://prnt.sc/_7uRd__Gck5d We use MC4WP: Mailchimp for WordPress on our demos, and we can share custom code from there only.”

ok, please share the code for this one

#366171 Copied

Rose Tyler

Support staff

August 31, 2023 at 07:14

Hello, Lanxiaodj,

Ok, we will share the code, just provide us with URL of page from which you took the screenshot, please.

Kind Regards,
8theme team

#366212 Copied

lanxiaodj

Participant

August 31, 2023 at 15:30

https://xstore.8theme.com/elementor/demos/minimal-fashion02/

#366275 Copied
Rose Tyler

Support staff

August 31, 2023 at 15:40
Hello, Lanxiaodj,

Thank you for your response.
```
.et-mailchimp:not(.classic-button) input[type=submit] {
    background-image: url(https://xstore.8theme.com/elementor/demos/minimal-fashion02/wp-content/uploads/sites/69/2021/10/Icon.svg);
    background-size: auto;
}
```
Kind Regards,
8theme team
#366276 Copied
Tagged: svg arrow, woocommerce templates, wordpress
Viewing 8 results - 1 through 8 (of 8 total)