Contact Form 7 on a Modal from ConvertPlug

Support
#1

Hey there,

The page where I am having a problem is on: http://cds.monicaangelreynolds.com/customer-center/

I have 3 buttons here. What I want is for a customer to click on one and have it trigger a modal pop up from Converplug where I have different forms set up. The first button currently called “service request” has a Test form embedded inside the Convertplug modal. I need to have a field that is drop down. However, as you will see, when you click on the drop down, the option you select does not show up in the field area. (Also, the field area looks much wider than the other field).

I’ve tried a lot of different things but have not been able to fix it. Thanks so much in advance!

#2

Hi there,

I’ve taken a look at the site and right now the primary issue for the dropdown is, the comvertplug overall div doesn’t have the select contained within that div (it’s outside), so when the select is clicked it displays outside the content area.

We could add some custom CSS that would make the form wider and add vertical height to allow the container to sit under the select, if that’d work for you?

Thanks!

#3

Hey,

Thanks so much for the help! Yes, I’d love whatever would make it look good and fix the way it looks now! Thanks so much!

#4

Hello there,

I’ve checked your site too and I saw that you aren’t using an exclusive ID for the form, so, if I add a generic class like wpcf7-number it may cause some styles problems further. So, add the following CSS under the code below to X > Launch > Options > CSS

 #wpcf7-f1563-o4 .wpcf7-number {
   height: 53px !important;
}

P.S: The titles are so closer of the inputs, so, if you don`t want it, ignore the above code and add this custom CSS code:

  #wpcf7-f1563-o4 .wpcf7-number {
   height: 53px !important;
   margin-top: 10px !important;
}

  #wpcf7-f1563-o4 .wpcf7-select  {
    margin-top: 10px !important;
}

Let me know if it worked :slight_smile:

#5

Hey John,

I added the code to the custom css under page settings. I didn’t quite know where to find the “X > Launch > Options > CSS” you mentioned. I tried inserting the code in the customizer section under global css too but neither worked. I tried looking but couldn’t find that exact path. Thanks so much!!

#6

Hi there,

It’s on your Admin bar on top, click X then Launch and then go to Options section, then the CSS icon, it is available at the very left vertical toolbar along with save button.

http://tco-forum-uploads.s3.amazonaws.com/original/2X/f/f628b966f55d37eea2025708f3739476c24a3e06.jpg

But I checked and it seems to be working, you added it in cornerstone’s custom CSS. That’s okay too.

Thanks!

#7

Hey!

Thanks for the help. I guess I hadn’t updated cornerstone which is why I couldn’t find the CSS section.

It worked and I’m not seeing the selected item.

I did have one question- it doesn’t seem to look good that the selection and text size is so big and the other field is so small with the text (I attached a screen shot). Is there a way that the field where people can select can be a little more narrow, rather than making the other field more wide? I’d like this to be consistent but I think the selector field’s text is too big and I’d like it a little smaller so it is consistent with the other forms that will be on the page (the other button is the meter reading or the third one on the page).

Here is what it looks like now, hopefully it makes sense.

Thanks so much!

#8

Here is what the other form looks like in the other button. Ideally the width would be like these.

Thanks so much!

#9

Hi There,

Please add the following CSS

#wpcf.page-id-1440 7-f1563-o4 {
   max-height: 33px !important;
   }

Hope it helps!

#10

This worked great thanks!

I have 2 other related questions:

  1. On the same page as above, when I submit the form on the Services form, I get my confirmation button. However, on the other two forms I do not get a confirmation button at all. I’d like for the confirmation to also show up on the other two forms upon submission (like the first one on the Request Service one!

  2. After a customer submits one form, if they try to submit any other form (after closing the modal) it does not open the form but rather shows as if the form had just been submitted). The only way to see a form pop back up is to refresh the page. How do I do so that if a user wants to submit more than one form, they don’t have to refresh the page to see the forms pop back up? Thank you so much!!

You guys are awesome! Here’s a screenshot of the confirmation I’d like to see on the other two buttons!

#11

Hi there,

  1. I did spend much time to understand your settings and connection between convert plug modals and Contact Form 7 and could not find why this is happening for Sevices and not for Supplies.

One guess I have is that the CSS class you used for services is lowercase services and the class you used for Supplies is uppercase. That is the only difference between 2 setups. So would you please kindly try to make it all lowercase for the CSS class of the Supplies?

Other than that, unfortunately, I do not have anything more to add why this is happening.

  1. This is the nature of the Modal in a Cover plug. As you added the form in the modal and after the submit the message shows, now if you trigger the model again, it still shows the same form which you added. That form is already submitted. Unfortunately, there is nothing you can do other than completely change the way you set the forms and avoid using modals.

Thank you for you understanding.

#12

Thanks so much for your help! Unfortunately once I changed the class to reflect the same exact way of of capitalization as the modal, but it still does not trigger the “thank you” message after a person submits the form. :-\ it only works for one button but not the other two. Very strange.

Thanks so much!

#13

Hi There,

Can you provide the name of the modals you are referring to, there are a lot on ConvertPlug.

Thank you

#14

Hey there,

Thanks so much for your help! The Modal that works (with the the contact form 7 that has a confirmation button upon submission is “Service”. The other two modals (that do not have a confirmation upon submission of a CF7 form is Supplies, and Meter. These buttons can be found on the “Customer Center” [page].
(http://cds.monicaangelreynolds.com/customer-center/) Thanks so much!! I posted screenshots above for reference of confirmation message. Thanks again!! :slight_smile:

#15

Hi again,

Thank you for the URL, I did some extensive testing and i was able to display the success message upon form submission by adding the following CSS in your Customizer:

.screen-reader-response {
  position: relative !important;
  width: 100%;
}
.cp-modal div {
    min-width: 20px;
    min-height: 25px;
}
#wpcf7-f1563-o4 div.wpcf7-mail-sent-ok {
    display: none !important;
}

I tested all of your forms and all of them working fine now. Can you please test the forms on your end as well?

Thanks!

#16

This worked! Thank you SO much!

#17

You’re most welcome!

#18

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.