Katie H.

Looks great with the two separate checkboxes. Well done!

Yes, and I said that you shouldn’t have a checkbox for the newsletter appear to be a part of the privacy policy.

At the bottom of my reply, see:

For a normal checkbox, use the above example but with the [checkbox] form tag.

<label>[checkbox checkbox-174 "I agree to Waterloo sending me updates on products and company news."] 
<p>For more information, see our <a href="enter-policy-URL-here">Privacy Policy</a>.</p></label>

• This reply was modified 5 years, 12 months ago by Katie H..

Yes, you can add in links alongside text for fields or no field at all. Since you do not want to have a checkbox, you shouldn’t be including the checkbox form tag.

One thing to mention before I continue is that what you have currently on your site is considered Dark UX. You are disguising newsletter signup as a privacy policy acceptance checkbox, ultimately deceiving users by tricking them into signing up for potentially unwanted solicitation. I recommend separating your privacy policy information in a separate paragraph and using a normal check box with one option that users can select to sign themselves up for the newsletter.

As your website form currently stands, this is how you can have a simple sentence with a link:

<label><p>I agree to Waterloo sending me updates on products and company news. For more information, see our <a href="enter-policy-URL-here">Privacy Policy.</a></p>

Where it says “enter-policy-URL-here”, copy and paste your privacy policy website page link but make sure you keep the quotation marks.

If you want to keep the acceptance checkbox, place the form tag around the text you want to be grouped with the checkbox. You can separate out any text using the paragraph HTML <p></p>. Again, for your case, you could use this:

<label>[acceptance acceptance-335] I agree to Waterloo sending me updates on products and company news.
<p>For more information, see our  <a href="enter-policy-URL-here">Privacy Policy.</a></p> [/acceptance]
</label>

For a normal checkbox, use the above example but with the [checkbox] form tag.

For more information:
See Section #2 on ‘Checkbox Treachery’
Dark Patterns in UX
Contact Form 7 – Acceptance Checkbox
Contact Form 7 – Adding Text to Input Labels

• This reply was modified 6 years ago by Katie H.. Reason: added in more info

If you want checkboxes to look like buttons, you are most likely using checkboxes incorrectly. Checkboxes, radio buttons, and website buttons have separate, distinct functions, and should follow visual standards.

Checkboxes are used when you have a list of options and the user can select multiple choices. Radio buttons are used when there is a list of two or more options and the user must select exactly one choice. Buttons visually signify the ability to click an option and be linked to somewhere else.

Instead of changing the CSS of a checkbox, I suggest revisiting whether you should be using a checkbox, radio button, or text with a hyperlink (instead of a button) on your specific form. Then styling its normal visual standard to match your site.

For further information:
Contact Form 7 – Checkboxes, Radio Buttons/
Contact Form 7 – Submit Button/
How to Design Better Buttons

• This reply was modified 6 years ago by Katie H.. Reason: grammar errors

Hi Freegris,

Short answer: To make a checkbox readonly or disabled you would need to write a custom script. If you are at this skill level, leave this question open for others and comment that you are looking for the code.

I’m not sure of your particular use-case for wanting a readonly checkbox. If you are creating a form that users need to fill out, I encourage you to think about the user experience of having a read-only checkbox.

1. An input that is read-only will not change in visual appearance – You can guarantee that users will click on the checkbox and think it’s broken when they are unable to select anything.
2. Depending on your theme, even disabled labels may not visually change appearance.
3. Is it even necessary to show a user a field that is disabled? Would it be that difficult/expensive to edit the form or create a new one that doesn’t have the field in the first place?

If you need this checkbox for some users but not others (based on segmentation or a previous field selection), I highly recommend implementing Conditional Logic or a Dynamic Field instead. Basically, only display the checkbox if it’s necessary for the user to fill out. Search on WordPress Plugins for ‘Conditional Logic’, ‘Dynamic Field’, or ‘Contact Form 7 Logic’ to see the various plugins.

I am unable to reproduce the above issues.

I tested exclusive checkboxes and acceptance checkboxes locally and with the https://www.enginiety.com/software-engineer/ form on these browsers:

• Chrome Version 67.0.3396.99
• Firefox 61.0.1
• Safari Version 11.1.1

The checkboxes function as they should and the forms submitted successfully. Hopefully this helps you all get closer to a solution more quickly.

Hey there,
What you’re looking for is called ‘Conditional Logic’ or ‘Conditional Fields’. Basically, If checkbox X is selected, then show checkbox Y.

This is currently not a feature that is included with the Contact Form 7 plugin, but there are a lot of great articles that explain how to accomplish this through free or paid plugins. When searching, do try looking with one search term then another for different article or plugin results.

Good luck!

What you’re looking for is a plugin that relates to user onboarding. Try searching for plugins using the terms: ‘user onboarding’, ‘onboarding’, and ‘tooltips’. Hopefully one of those will cover what you’re looking for in terms of design, style, and functionality.

Hey there,

So, really, you have 2 questions here:

1. Custom Design – It’s in your best interest to really give it a shot learning basic custom CSS tweaks for your own site. It will save you a ton of time and money down the road, especially if they’re small things like button colour. I recommend checking out:

• WordPress documentation on Custom CSS
• WPBeginner has a video walkthrough on how to add custom css.

If you really want to give it a shot, General Assembly offers free beginner courses for CSS and HTML and they’re really great to do on your own time.

• Viewing your website on mobile – This looks like something pointing in the wrong direction with your WordPress Mobile Pack plugin. This isn’t my area of expertise, so hopefully someone else knows more, or you can ask on their specific support forum for help.

I hope this helps you get started with CSS and fixing the mobile landing page.

Hi there,

If the user is already logged in, you already know their basic information. You do not need to reference special shortcodes provided by another plugin.

Contact Form 7 fields are capable of pre-populated already known information.

Contact Form 7 talks about this and shows examples on the document ‘Setting Default Values to the Logged In User.’

In your case, for the equivalent of “name” use default:user_first_name and “surname” would be default:user_last_name.

Good luck!

Hi there,
Your question is a bit difficult to understand, but I think you are looking for a Dynamic Form.

Basically: If a user clicks an image of a car, then the information about the car will be automatically populated into the corresponding form fields.

If this sounds right, Contact Form 7 calls it ‘Getting Default Values from the Context‘. You can code this yourself or get a plugin. I recommend searching for articles or plugins using the terms ‘dynamic form’ or ‘pre-populate form.’ Alternatively, CF7 Skins has a list of articles already put together and a popular plugin suggestion available on their article ‘Contact Form 7 Dynamic Text Extension‘.

All the best,

Hi Jonathan,

I’m not 100% sure what is going on, but it does appear that you are using another plugin for Conditional Fields given your [group email-conditional] tag. Perhaps with the latest update, this other plugin has been affected and has yet to respond with a fix. Maybe try messaging their forum as well to see if anyone has a better solution than convoluted form syntax.

Good luck!

Hi there,

There are three ways you can get your radio buttons customized:

1. Learn how to create custom styling for your Contact Form 7 forms. There are a lot of great articles out there, but I recommend starting with the Contact Form 7 official documentation on Styling Contact Forms. This doc also points to a detailed tutorial ‘Styling Contact Form 7 Forms‘ by CF7 Skins.
2. Get a free or paid plugin that gives you alternative styling options for Contact Form 7 forms. In WordPress on the plugin page, searching for ‘Contact Form 7 Style’ or ‘style forms’ will give you a lot of options to check out.
3. Hire a WordPress expert to fully customize your form all in one go. If you have the budget for a fully custom form, this is probably your easiest option.

All the best,

Hi Mr. Peri,

What you’re looking for is usually called ‘Conditional Logic’ or ‘Conditional Fields’. Basically: IF someone selects X THEN make Y appear.

To help understand, there’s a good explanation and demo form to try in the CF7 Skins Knowledge Base Form Logic section. Also, Elegant Themes has an article on Contact Form 7 extensions, including one with logic. There is an image example showing exactly the scenario you described.

If you are a more advanced WordPress user, there is a tutorial on conditionally displaying fields with Javascript.

Otherwise, your option is to download an extension. Most of these are paid, but there should be a few free options. When searching for a plugin, try ‘form logic’ or ‘conditional’ in the search field for a wide range of results.

Good luck!