Use of Gravity Forms with CoursePress Pro

I have a simple Gravity form (GF) that I want to add to a text section for a Unit.

I am having the following issues:

1. The inclusion of the GF seems to impact on the Next button (it no longer functions and the position of the next button and the styling changes (goes to a grey background and different font)

2. The Confirmation text does not appear on the page - as it would normally do if I added the GF to a WordPress page after the user submits the GF information.

Is CoursePress Pro compatible with Gravity Forms?

Thanks
Tony

  • Vinod Dalvi
    • WP Unicorn

    Hi Tony,

    Thanks for posting on the forum.

    Is CoursePress Pro compatible with Gravity Forms?

    Yes it is.

    Could you please share the screenshots of the issue you have mentioned and share the page URLs where i can reproduce and test it?

    Also would you mind if I logged in to your site and did some troubleshooting? This might help get to the bottom of this faster. If this is ok, just grant me temporary admin access to your site by clicking "Grant Access" button in the WPMU DEV Dashboard Settings as described on the following page and reply on this thread after granting it?

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Kind Regards,
    Vinod Dalvi

  • Patrick
    • Support Monkey

    Hey there @Tony

    I hope you're having a great day!

    I just logged into your site to see if I can help you figure this out.

    When the Gravity Forms form is removed from the text element in that Unit, the page looks & behaves as expected. But, as you have pointed out, as soon as a GF form shortcode is included, things go a bit wacky.

    I tried to see if there are any evident JS conflicts using browser developer tools, but nothing really jumped out at all. I also took a look at your GF settings and discovered (never saw this before) that you can disable CSS & HTML5 globally (all forms) but not form-by-form.

    I also tested on my own install with a contact form using Formidable Pro, and get the same results: navigation appears to be disabled and is displaced on the page.

    I've asked for a bit of help from our 2nd-level support wiz-kids to see if they can provide a solution or a workaround.

  • Vinod Dalvi
    • WP Unicorn

    Hi Tony,

    Thank you for your patience here.

    To troubleshoot the issue a bit deeper to find out the solution, Would you mind if I access your site using FTP and did some testing? If this is ok, just send log in info through our secured contact form: https://premium.wpmudev.org/contact/
    - Choose "I have a different question"
    - Include my name in the subject "Vinod Dalvi"
    - Include the URL of this post in your message so that I may track this issue better
    - Include login information (Wordpress admin info username + password )
    - Include FTP Details

    Regards,
    Vinod Dalvi

  • Patrick
    • Support Monkey

    Hi again @Tony

    I hope you had a great weekend!

    Just updating here so you know we haven't left you out in the cold. :slight_smile:

    Thanks for sending in the info requested by @Vinod Dalvi. He should be online a bit later on this evening, and will be happy to log into your install to help out here.

  • Vinod Dalvi
    • WP Unicorn

    Hi Tony,

    Thank you for sending the details and thank you for your patience here.

    I could confirm the issue on your site.

    To resolve the Next Navigation styling issue, try adding the following CSS code in the style.css file of your child theme.

    .unit input[type="submit"].apply-button-enrolled.submit-elements-data-button {
    	float: left;
    	background-color: #0facd9;
    	background: #0facd9;
    	min-width: 240px;
    	display: block;
    	color: #fff;
    	text-align: center;
    	padding: 6px 30px 6px 30px;
    	font-family: 'Dosis', sans-serif;
    	font-size: 22px;
    	text-transform: uppercase;
    	white-space: nowrap;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	margin-top: 1px;
    	-moz-border-radius: 0px;
    	-webkit-border-radius: 0px;
    	border-radius: 0px;
    	border: none;
    	text-shadow: none;
    	font-weight: 300;
    	box-shadow: none;
    }

    I want to troubleshoot the issue more but i found you have sent the admin log in details correctly but you have not sent FTP password so i couldn't access your site using FTP for further troubleshooting.

    Could you please send it?

    Also to resolve gravity form confirmation message issue, you can temporary try using other Confirmation Type like Page or Redirect as shown in the attached screenshot.

    Regards,
    Vinod Dalvi

  • Tony
    • Site Builder, Child of Zeus

    Hi Vinod

    Thanks for sending through the CSS code I will add that to my css.stlye file.

    Sorry about not including the password for the FTP site - it is the same password as the WordPress admin user that was created for you.

    Thanks
    Tony

  • Tony
    • Site Builder, Child of Zeus

    Hi Vinod

    I managed to change the CSS code ( I had to modify the code you provided a little). I was able to change the style and placement of the navigation however they actual navigation doesn't work (i.e. - when I click the NEXT button nothing happens.

    Here's the code I ended up including in the stlye.css file for the child theme:

    .input.apply-button-enrolled[type="submit"], input.apply-button-enrolled[type="button"] {
    float: left !important;
    background-color: #0facd9 !important;
    background: #0facd9 !important;
    min-width: 240px !important;
    display: block !important;
    color: #fff !important;
    text-align: center !important;
    padding: 6px 30px !important;
    font-family: 'Dosis', sans-serif !important;
    font-size: 22px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 1px !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    text-shadow: none !important;
    font-weight: 300 !important;
    box-shadow: none !important;
    }

  • Tony
    • Site Builder, Child of Zeus

    Hello ChooseGrowth

    I'm thinking you might be best-off to start your own support ticket.

    As yet I haven't had a response that has resolved my issues with using Gravity forms with CoursePress Pro. I have ended up removing my gravity forms from Text sections and instead I open another page that has the gravity form. This way I don't have any issues with navigation controls working incorrectly.

    Thanks
    Tony

  • Patrick
    • Support Monkey

    Hey @all

    It suddenly occurred to me that the content of course units are actually sitting inside a form like so:

    <form id="modules_form"... >
    ...a bunch of course content here ...
    </form>

    HTML forms, no matter if they are hard-coded or generated by a plugin shortcode, cannot be nested.
    http://www.w3.org/MarkUp/html3/forms.html

    So the solution to everyone's problems with forms is to remove the form tags.

    if you are using a plugin like GF to create your forms, first preview the form on another page on your site. Then right-click and view source so you grab the HTML for the form. Copy that & paste it to a text file & delete the form tags from the beginning and end. Paste the rest into your unit.

    The result can be seen in my test here which works just fine:
    http://coursepress.pcwriter.net/courses/test/units/untitled/page/3?try

  • Patrick
    • Support Monkey

    Hi again @ChooseGrowth

    I hope you're well today!

    Apologies for the delays here as we've been rather swamped with new releases lately. :slight_smile:

    I'm just now rebuilding my test site... sandboxes do tend to get a bit muddy after a while. :slight_smile: So I'll be doing some additional testing on a fresh install, and will post here again as soon as I have something to report... hopefully positive; fingers crossed!

  • Patrick
    • Support Monkey

    @ChooseGrowth

    I hope you're well today!

    You're absolutely right: when adding the form HTML (without opening/closing form tags) long forms completely mess up the layout in the unit editor in the admin, while on the frontend the code is displayed either as plain text (if Paragraph is used in the admin to format the HTML), or as a jumbled mess (if Preformatted is used).

    Short forms (ie: anything that actually fits in the unit text editor) seem to display and work just fine on the frontend.

    So parsing forms, created via other methods (other plugins or custom HTML), in course units is evidently something that needs to be addressed. I've notified the plugin developer of these tests & results so he can investigate.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.