[FrocreateParticipant]

Hi there, first I’d like to thank you for the info you provided another user who was having trouble getting a form into a modal window. This also helped me find a solution.

Thread here:
https://community.theme.co/forums/topic/button-opening-a-lightbox-for-a-contact-form/

Now that I’ve set this up successfully, it seems ConvertPlug is changing the styling of CF7. Most of it is OK but you’ll see where the checkboxes are being aligned vertically with their labels. It should be checkbox > label (horizontally) and the next item(s) beneath in a separate row. I’m getting checkbox, label, checkbox, label – all stacked vertically.

See link in following private reply.

Thanks!

[FrocreateParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in! The Convertplug has its won styling for form elements. And that styling is overriding some of the contact form 7’s styling. To resolve this, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.cp-modal-popup-container button, .cp-modal-popup-container input, .cp-modal-popup-container select {
    width: auto !important;
}

.cp-modal-popup-container input[type="radio"], 
.cp-modal-popup-container input[type="checkbox"] {
    float: left;
    margin-right: 5px;
}

.cp-modal-popup-container label{
    clear: both;
}

By the way, do you know that you can integrate Contact Form 7 in ConvertPlug? For more details, please check it here: https://www.convertplug.com/contact-form-7-using-convertplug/

Hope this helps.

[FrocreateParticipant]

That did it – thank you! I was also able to figure out how to style the other elements within the modal.

However, on mobile, the text aligns center within the modal and makes it hard to follow along and read. Is there any way to adjust this style to align left only on small screens?

Last – I am aware of the addons with ConvertPlug but they are not included with X. I would love to be able to test this feature for my client without having to fork over the extra coin.

[FrocreateParticipant]

Also, in testing the form, when I press ‘submit’ I’d like to either have a message displayed saying “Thank You, etc…” or – ideally – have the modal window close automatically. At the moment, when you hit submit, there is no action on the form.

Thanks again!

EDIT: The form does submit and route to email correctly – I just need a way to tell users they have done this successfully or not.

[RadModerator]

Hi there,

Does it have security that blocks access from other countries? It seems inaccessible on my end. Please check and let me know. Cleared DNS cache and proxy with same result.

Thanks!

[FrocreateParticipant]

Yes it does – proxy has worked in the past. Sorry for the inconvenience!

[RadModerator]

Hi there,

I still can’t access your site, could you try it again? Thanks!

[FrocreateParticipant]

This reply has been marked as private.

[NicoModerator]

Hi There,

ConvertPlug hasn’t been the most stable of plugins lately, our developer fixed a lot of issue to work with convertplug greatly. Latest version is already available in automatic updates. Please update remove and install again your convertplug through X adds on. Don’t forget to update your X theme in case it is not update so that the latest update would be compatible.

Let us know how it goes.

Hope it will properly again.

Thanks.

[FrocreateParticipant]

Thanks, I just did that and am still experiencing the issue.

If I do not fill the required fields, the form will show an error. However, when I correctly fill the fields, there is nothing to show that the user has submitted the form correctly. I am indeed receiving the forms when it is filled correctly, so I just need a message to display something like “Thank you for your interest, etc…”

[JoaoModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[FrocreateParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

Thank you for the credentials.
First let’s fixed your contact form issues: Multiple form controls are placed inside a single label element.. Please try to move the elements outside the label. Something like this:

<label>What's your name?*</label>
[text* your-name]

Try that on other fields too.
Then, for the mean time, remove this line too: on_sent_ok: "ga('send', 'event', 'Start Dreaming Survey', 'sent');". Then test the form and submit. Check if the message appears. Do let us know how this goes.

[FrocreateParticipant]

I applied both solutions and the form is working better now.

The way I had the label elements (below) are the default settings for the form, coming from CF7:

<label>Whats Your Name?
[text* your-name]</label>

However, in using a checkbox, I received the error message and (incorrectly) edited the code like this:

<label>How should we contact you?*
[checkbox ContactPreference use_label_element "Phone" "E-Mail" "Text"]</label>

Using your advice above, I figured out that the closing label tag needs to be formatted on the checkboxes as you suggested, like this (does not result in error message):

<label>How should we contact you?*</label>
[checkbox ContactPreference use_label_element "Phone" "E-Mail" "Text"]

-HOWEVER-

I do get the “successful completion” notice now when the form is completed correctly, but the user must press “submit” twice to get the message to appear, giving the appearance that it wasn’t submitted on the first press. When I checked my mail, the message came through twice.

Lastly, on mobile, the modal center-aligns everything which makes readability poor-especially on the checkboxes.

Thanks again for you help on this!

[Author]

Posts