1"use strict";(self.webpackChunksalient_docs=self.webpackChunksalient_docs||[]).push([["1820"],{1948(t,e,n){n.r(e),n.d(e,{metadata:()=>o,default:()=>d,frontMatter:()=>r,contentTitle:()=>l,toc:()=>a,assets:()=>c});var o=JSON.parse('{"id":"how-to/forms/contact-form-7-submit-button","title":"Style the Contact Form 7 submit button like a Salient button","description":"Form Submit Button Style in Theme Options > Form Styling gives every submit button the Nectar Button look; one class makes an inline subscribe form.","source":"@site/docs/how-to/forms/contact-form-7-submit-button.mdx","sourceDirName":"how-to/forms","slug":"/how-to/contact-form-7-submit-button","permalink":"/docs/salient/how-to/contact-form-7-submit-button","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"type":"how-to","title":"Style the Contact Form 7 submit button like a Salient button","sidebar_label":"Contact Form 7 submit button","sidebar_position":2,"slug":"/how-to/contact-form-7-submit-button","description":"Form Submit Button Style in Theme Options > Form Styling gives every submit button the Nectar Button look; one class makes an inline subscribe form.","verified_version":"18.3.0","verified_date":"2026-09-13","related":["/forms","/theme-options/general-settings"],"sources":["ticksy:article:7535","ticksy:ticket:47611","ticksy:ticket:49109","ticksy:ticket:232830","ticksy:ticket:247044","ticksy:ticket:266911","ticksy:ticket:330251","ticksy:ticket:339481","ticksy:ticket:364993","ticksy:ticket:385237","ticksy:ticket:1353588","ticksy:ticket:2703799"],"demand":{"gsc":"wpcf7 (495 impressions, p8.4), contact form 7 columns (486, p7.2), 180d","corpus":12}},"sidebar":"tutorialSidebar","previous":{"title":"Contact Form 7 fields in columns","permalink":"/docs/salient/how-to/contact-form-columns"},"next":{"title":"Typography and icons","permalink":"/docs/salient/how-to/typography"}}'),s=n(86070),i=n(93797);let r={type:"how-to",title:"Style the Contact Form 7 submit button like a Salient button",sidebar_label:"Contact Form 7 submit button",sidebar_position:2,slug:"/how-to/contact-form-7-submit-button",description:"Form Submit Button Style in Theme Options > Form Styling gives every submit button the Nectar Button look; one class makes an inline subscribe form.",verified_version:"18.3.0",verified_date:"2026-09-13",related:["/forms","/theme-options/general-settings"],sources:["ticksy:article:7535","ticksy:ticket:47611","ticksy:ticket:49109","ticksy:ticket:232830","ticksy:ticket:247044","ticksy:ticket:266911","ticksy:ticket:330251","ticksy:ticket:339481","ticksy:ticket:364993","ticksy:ticket:385237","ticksy:ticket:1353588","ticksy:ticket:2703799"],demand:{gsc:"wpcf7 (495 impressions, p8.4), contact form 7 columns (486, p7.2), 180d",corpus:12}},l,c={},a=[{value:"Choose the button style",id:"choose-the-button-style",level:2},{value:"Put the field and the button on one line",id:"put-the-field-and-the-button-on-one-line",level:2},{value:"Why does the button still look wrong?",id:"why-does-the-button-still-look-wrong",level:2},{value:"Related",id:"related",level:2}];function h(t){let e={a:"a",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...t.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.p,{children:["Salient styles every form's submit button from one setting: ",(0,s.jsx)(e.strong,{children:"Theme Options > Form Styling > Form Submit Button Style"}),", which is ",(0,s.jsx)(e.strong,{children:"Nectar Button"})," by default, with ",(0,s.jsx)(e.strong,{children:"Nectar Button See Through"})," and ",(0,s.jsx)(e.strong,{children:"Default"})," as alternatives. Contact Form 7, WPForms and Fluent Forms all pick it up, so an unstyled submit button usually means a plugin stylesheet is winning."]}),"\n",(0,s.jsx)(e.h2,{id:"choose-the-button-style",children:"Choose the button style"}),"\n",(0,s.jsxs)(e.ol,{children:["\n",(0,s.jsxs)(e.li,{children:["Open ",(0,s.jsx)(e.strong,{children:"Theme Options > Form Styling"}),"."]}),"\n",(0,s.jsxs)(e.li,{children:["Set ",(0,s.jsx)(e.strong,{children:"Form Submit Button Style"})," to ",(0,s.jsx)(e.strong,{children:"Nectar Button"})," for the filled theme button, or ",(0,s.jsx)(e.strong,{children:"Nectar Button See Through"})," for the outlined one."]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Form Submit Button Padding"})," sets the button's padding; blank means 15px top and bottom and 20px left and right."]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.strong,{children:"Overall Form Style"})," on the same panel decides whether Salient styles the fields at all: ",(0,s.jsx)(e.strong,{children:"Inherit"})," applies the theme's field styling, ",(0,s.jsx)(e.strong,{children:"Minimal"})," strips it for forms that bring their own. Fancy select and checkbox styling are two more switches beside it."]}),"\n",(0,s.jsx)(e.h2,{id:"put-the-field-and-the-button-on-one-line",children:"Put the field and the button on one line"}),"\n",(0,s.jsxs)(e.p,{children:["For a newsletter-style form, wrap the C
1ontact Form 7 form in a ",(0,s.jsx)(e.code,{children:"div"})," with the class ",(0,s.jsx)(e.code,{children:"nectar-wpcf7-inline-subscribe-form"}),". The theme lays the field and the submit button out in one row, with the button sitting inside the field's right edge, and stacks nothing on mobile:"]}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-htmlmixed",children:'<div class="nectar-wpcf7-inline-subscribe-form">\n [email* your-email placeholder "Email address"]\n [submit "Subscribe"]\n</div>\n'})}),"\n",(0,s.jsxs)(e.p,{children:["For several fields in columns, use the ",(0,s.jsx)(e.a,{href:"/how-to/contact-form-columns",children:"column helper classes"})," instead."]}),"\n",(0,s.jsx)(e.h2,{id:"why-does-the-button-still-look-wrong",children:"Why does the button still look wrong?"}),"\n",(0,s.jsxs)(e.p,{children:["If the theme style is not applied, check the order of stylesheets first: some form plugins load their own button CSS after the theme's, and a rule in ",(0,s.jsx)(e.a,{href:"/how-to/add-custom-css",children:"custom CSS"})," targeting ",(0,s.jsx)(e.code,{children:".wpcf7-submit"})," settles it. If the button looks right but the color is off, it is the site's accent color, set in ",(0,s.jsx)(e.strong,{children:"Theme Options > General Settings"}),", not a form setting."]}),"\n",(0,s.jsx)(e.h2,{id:"related",children:"Related"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.a,{href:"/forms",children:"Forms"})," for importing the demo forms and the supported plugins."]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.a,{href:"/theme-options/general-settings",children:"Theme Options > General Settings"})," for the accent color the buttons use."]}),"\n"]})]})}function d(t={}){let{wrapper:e}={...(0,i.R)(),...t.components};return e?(0,s.jsx)(e,{...t,children:(0,s.jsx)(h,{...t})}):h(t)}},93797(t,e,n){n.d(e,{R:()=>r,x:()=>l});var o=n(30758);let s={},i=o.createContext(s);function r(t){let e=o.useContext(i);return o.useMemo(function(){return"function"==typeof t?t(e):{...e,...t}},[e,t])}function l(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(s):t.components||s:r(t.components),o.createElement(i.Provider,{value:e},t.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.