Jump to content

Archived

This topic is now archived and is closed to further replies.

jmad

Contact Form 7 Buttons and DMS

Recommended Posts

jmad

Typically, I work around/change the CF7 formatting but it always is very time consuming.  I was thinking that I could use  something to where I replaced the CF7 class with something like below.  This sort of works but not all the way...it still leaves a border, doesn't take on the text color already assigned to the btw or warning-btn and it doesn't pickup the shadow effects of the text.  However, it does adopt the hover state and few other attributes.  

 

What's the easiest way to match the buttons?  Same issue with WooCommerce to some degree.  I realize that this is not a DMS issue but thought this might be the best forum for the question. 

 

.CF& class {

.btn;

.warning-btn;

}

Share this post


Link to post
Share on other sites
Danny

Hi,

 

If it doesn't taken on some of the styling then its likely due to it being over ruled by the default styling. I just read a guide that the simplest way to change the styling for the button is to add the class to the submit shortcode, see here - http://contactform7.com/submit-button/

 

I don't use the plugin, I use Gravity Forms, so I can say if it works or not, but worth a try.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

I'll give it a try and let you know how it works.

Share this post


Link to post
Share on other sites
jmad

Okay, I found what the issue was.  However, DMS2 buttons resize to smaller screens and the CF7 buttons don't.  What class causes the resize for the DMS buttons...is it a class...I'm thinking I could add it to the CF7 button.

 

I haven't used Gravity Forms.  Does it take on the formatting already built into DMS?

Share this post


Link to post
Share on other sites
Danny

What classes have you added ? As there is no class that resizes the buttons?

 

Gravity Forms like CF7 has its own styling for buttons, Gravity Forms overall is just superior in my opinion.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

I haven't added classes for the button resizing.  The buttons automatically resize in DMS and I'm wanting that same thing to happen to the CF7 buttons.  I can write the @media CSS but I thought maybe there is a class that makes the DMS buttons resize but I couldn't locate it using the inspector.

Share this post


Link to post
Share on other sites
Danny

There is no class that makes the buttons resize, if you add btn btn-large btn-primary thats all that should be required. 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Hmmm, you are saying add those classes to the CF7 button via CSS?

Share this post


Link to post
Share on other sites
Danny

No I'm saying on the page I linked you above, it would appear that you can add classes to the submit button, so add those classes I mentioned in an earlier post and try that.

 

[submit class:btn btn-large btn-primary id:form-submit "Send Mail"]


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

That's what I was doing and it didn't work but I actually got it sorted already.

 

Thanks

Share this post


Link to post
Share on other sites
Danny

OK cool, what did you do in the end ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Even though those classes do affect the buttons the CF7 css still impacts some items like text format and border.  I cleaned those up with CSS.  

Share this post


Link to post
Share on other sites
jmad

Actually, this isn't sorted all the way.  The resizing of the buttons that happens to the default DMS buttons doesn't happen to the CF7 button.  Is the resizing of the DMS buttons built into the main class?  

Share this post


Link to post
Share on other sites
Danny

There is no resizing class in DMS, but buttons do it themselves, if this isn't happening for your CF7 form then the CSS from the plugin is effecting your submit button. You're going to need to completely override the default styling for that plugin or speak to the developer for assistance. As this isn't a DMS issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×