Simply email form

[ICT73]

How can I create an a simply form for send an a message? for example using the “Mail” template foooter. thanks

[prakash_s]

Hello @xonetit,

Thanks for writing to us.

The Footer Mail template is Just a design example, You can install it to your site in the footer but you need to create the Form by using Contact-form-7 and you need to style it as well using custom CSS code.

You can install the plugin from here https://wordpress.org/plugins/contact-form-7/
To learn more about how to create a contact form https://contactform7.com/getting-started-with-contact-form-7/

Hope it helps
Thanks

[ICT73]

I’ve tried with WFLite, I add a CSS to Container but it seem that the CSS of WFLite overwrite the CSS custom

.wpforms-field-large,
.wpforms-field-small {
width: 100%;
border-radius: 2px;
padding: 0.75em 1em 0.75em 1em;
font-family: “Lato”,sans-serif;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0em;
text-transform: none;
color: #8a949b;
background-color: white;
transition-timing-function: cubic-bezier(0.400,0.000,0.200,1.000);
}
.wpforms-submit {
width: 100%;
border-radius: 2px;
font-size: 1rem;
background-color: #8dc63f;
transition-timing-function: cubic-bezier(0.400,0.000,0.200,1.000);
}

[prakash_s]

Hello @xonetit,

I checked your website’s footer it seems that you have almost achieved the design through custom CSS code. I think you are using the text area and the WFLite style was not overridden properly.

Please add this custom CSS under X/Pro—>Theme Option —>CSS

.wpforms-container.wpforms-container-full form {
width: 100% !important;
}

div.wpforms-container-full.inline-fields .wpforms-form .wpforms-field-container {
width: 75% !important;
}
div.wpforms-container-full.inline-fields .wpforms-form .wpforms-submit-container {
width: 24%;
}

.wpforms-submit-container button.wpforms-submit {
width: 100% !important;
margin: 0;
}
.e258-15.x-form-integration.x-form-integration-wpforms {
width: 100% !important;
}

textarea.wpforms-field-small.wpforms-field-required.wpforms-limit-characters-enabled {
    height: 38px !important;
}

div.wpforms-container-full.inline-fields .wpforms-form .wpforms-field {
    padding-right: 1% !important;
}

The custom CSS would make the form layout like this.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks