Customize constant contact

Can you provide a link to the page where the form is located at? We would like to do some initial checks of things and see if anything looks obviously out of place.

Wow it always takes a support ticket to get me to realize something.

I had attempted to create this constant contact form without shortcode (using html, obviously). This form was set to “display:none” when I added the shortcode to try something out (now the page has my manual constant contact form and the shortcode form but my constant contact form was set to not display).

The elements in my form with constant contact ids must have interfered with the form generated through shortcode and therefore didnt execute correctly.

Thanks for your help.

One additional question: Is it not possible to create this form without using shortcode? Reason being, I need to change the styling on this form…

Thanks.

Here’s the link…
https://wellsoflife.org/forge/

Oh yeah by the way, we haven’t addressed this part of the original post:

“I also have text that says “By submitting this form, you are consenting to receive marketing emails from” under the form. I don’t want that. How do I go about removing it?”

Makes sense that some stuff could have trickled in together, though exactly what would be of interest to us.

Regarding displaying a given form without the shortcode aspect, we have the following two functions available

function constant_contact_get_form( $form_id ) {
	return constant_contact()->display_shortcode->get_form( $form_id );
}

function constant_contact_display_form( $form_id ) {
	constant_contact()->display_shortcode->display_form( $form_id );
}

First one would be used if you want to assign the final markup to a variable, and the second would be to just echo on the spot. Note that it doesn’t handle parts of the form, it outputs the final result.

That said, what all are you wanting to change styling for? Asking because of a couple reasons. First being that we have plenty of classes and IDs that are already output with the markup, that should help with CSS selectors.

Depending on the style changes desired, our next intended release may help as well, which is scheduled to have some various fields in the form builder to set colors, some padding/spacing, font details and similar.

Due to changes this past spring in the EU, with the General Data Protection Regulation act, we don’t provide any toggle switches that remove it from display. However, it can be styled to better fit your site, as appropriate.

This was the attempt to manually add the Constant Contact form that I left in the page:

<div id="ctct-form-20212" style="display:none;">
	<form
		action
		class="validate innerForm"
		method="post" 
		id="ctct-form-1187718800"
		data-doajax="off"
		style="display: inline-block";
		>
		
		<!-- <p class="ctct-form-field ctct-form-field-email ctct-form-field-required"> -->
			<input required type="email" placeholder="Your email" value="" name="email___ecd412e904309dcce66177488240b016" class="required newsletterInput" id="email___ecd412e904309dcce66177488240b016">
			<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
			<div style="position: absolute; left: -5000px;"><input type="text"
																name="b_65f00bc35c4f45fc100e26e76_8e1f92c1da"
																tabindex="-1" value=""></div>
		<!-- </p> -->
		<div class="ctct-optin-hide" style="display:none;">
			<p class="ctct-form-field ctct-form-field-checkbox"><span class="ctct-input-container"><input type="checkbox" checked="" name="ctct-opt-in" id="ctct-opt-in" class="ctct-checkbox ctct-opt-in" value="1469668012"><label for="ctct-opt-in"> Example: Yes, I would like to receive emails from Wells Local. (You can unsubscribe anytime)</label></span></p>
		</div>

		<input type="hidden" name="ctct-id" id="ctct-id" value="20212" placeholder="" class="ctct-hidden">
		<input type="hidden" name="ctct-verify" id="ctct-verify" value="3K5RUcB75lRoZxqrXjOkUGe8v" placeholder="" class="ctct-hidden">
		<input type="hidden" name="ctct_time" value="1531085749">
		<!-- <p class="ctct-form-field ctct-form-field-submit"> -->
			<input type="submit" name="ctct-submitted" id="ctct-submitted" value="Subscribe" placeholder="" class="newsletterSubmit">
		<!-- </p> -->
		<input type="hidden" id="ctct_form" name="ctct_form" value="2b4441f8fd">
		<input type="hidden" name="_wp_http_referer" value="/mysite/">

		<!-- <input type="text" placeholder="First name" value="" name="FNAME" class="newsletterInput" id="mce-FNAME"> -->
		<!-- <input type="email" placeholder="Your email" value="" name="EMAIL" class="required newsletterInput" id="mce-EMAIL"> -->

		<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
		<!-- <div style="position: absolute; left: -5000px;"><input type="text"
															name="b_65f00bc35c4f45fc100e26e76_8e1f92c1da"
															tabindex="-1" value=""></div>

		<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="newsletterSubmit"> -->
	</form>
	<script type="text/javascript">
		var ajaxurl = "https://localhost:8888/mysite/wp-admin/admin-ajax.php";
	</script>
</div>

Looks horrible, yes, but hey, I was trying things out ??

I didn’t know how to use the two functions you have there to alter the styling, so I changed the ctct css classes to get the styling I wanted. To change the placeholder, I used javascript and the id of the field which doesn’t change with each refresh like the other elements’ ids do.

Let me know if I can be of any other assistance.

Thanks for your help!

• This reply was modified 6 years, 8 months ago by winstoon.

Perhaps we should step back a moment.

What things are you trying to accomplish overall, that you weren’t managing to accomplish with what is output out of the box? For example, if you’re not bound to already established selectors for some css, and even then, the already displayed classes and IDs should allow you to get pretty far.

At least based on what we can see with your example above, it feels like you may be trying some sort of spam prevention yourself, with that absolutely positioned text input?

Also looks like you were looking to wire this up to Mailchimp as well, unless that’s just un-deleted parts for something else attempted.

The ID on the wrapping div shouldn’t change per refresh, and the numeral is the post ID for the post type we use for the form itself.

If you’re familiar with how to use WordPress hooks, we have a fair amount of filters available, including ones for classes applied to each input. May help out.

Hey thanks for your response. That’s very helpful.

To answer your questions, that code I posted is a mess and I was hesitant to share it. The mailchimp and spam guard are residue from the previous mailchimp implementation. They were just mailchimp css classes so I left them there. However, they should all be removed at the end…which I wasn’t close to.

I was trying to get the form to look a certain way. I got it done now and you can see it on wellsoflife.org, at the bottom of the page.

One question though, is there a way to not require people to confirm via the constant contact email before they’re actually added to a mailing list? I’m talking about this email:

Valued Subscriber,
Please confirm your subscription to XXXXXX. by clicking the link below or replying to this email.

Confirm Subscription

In lieu of that, could we send them a welcome email instead? Is there any way to control all of that?

Looking good all in all. Hopefully we were able to help guide and make sure it submitted properly.

Regarding the double opt-in portion, that is going to be settings from your Constant Contact account much more than any settings for the WordPress plugin. So you’ll want to review things there.

Thanks guys. So helpful as always.