Ninja contact form styling

This topic contains 6 replies, has 3 voices, and was last updated by  Pete Williams 6 years, 3 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • February 9, 2019 at 4:43 pm #467962

    Pete Williams
    Full Member
    Post count: 34

    Hi Guys, after fighting with this for a few hours, time to ask for advice…

    AIM – Add ninja contact form to sidebar of details page

    I can do the simple thing of adding the widget button, and the button works fine. But I can’t style the button, even with the use of Inspector to identify the right CSS, it still ends up with a tiny box inside the main button styling I’ve added (please see link below)

    Ideally I would prefer just a form in the sidebar. I can get this to display fine, but it won’t actually send the enquiry to the email of the listing although does send me the confirmation (I am using {GD:listing_email}). I even added a hidden field with the listing_ID as per docs, still no joy

    Here’s a link to the mess I’ve created so far where you will find the form and below that the button, feel free to test it – https://findamobiledisco.co.uk/mobile_discos/pete-williams-entertainment-services-lt/

    I will follow this with a private post with login details in case you fancy having a look

    Thanks!!

    February 9, 2019 at 4:45 pm #467964

    Pete Williams
    Full Member
    Post count: 34
    This reply has been marked as private.
    February 9, 2019 at 5:26 pm #467969

    Alex Rollin
    Moderator
    Post count: 27815

    Use only the default GeoDirectory Contact Form
    Make sure to use the GD > Ninja form widget, not the Ninja form widget

    February 9, 2019 at 5:44 pm #467977

    Kor
    Moderator
    Post count: 16516

    Hi Pete,

    Thanks for your reply. You can try using the custom CSS code below to style the form. I hope it helps. 

    

    input#nf-field-4 {
    border-style:none;
    background-color:#fff;
    border:1px solid #000;
    padding:5px 15px;
    border-radius:5px;
    cursor: pointer;
}

input#nf-field-4:hover {
    background-color:#9b9b9b;
    color:#fff;
}

input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {
    padding: 15px;
    border: 1px solid #bbb;
    color: #4e4e4e;
    background-color: #fff;
}
    

		
	
    


    

			
				

    

	
    

		February 9, 2019 at 7:01 pm

		
		#467985

		
		
		
	
    


    


    

	
    

		
		
    Pete Williams
    Full Member
    
		
		
     Post count: 34
    
	
    

	
    

		
		
    Thanks for the CSS For, much appreciated!
    

    Alex or Kor – Having run a LOAD more test and tweaked things, I still cant get the form to send to the listing email
    

    Sends confirmation to the sender fine
    

    I would really like to display and get the form working rather than use the button!!!
    

    I did follow this ‘Use only the default GeoDirectory Contact Form
    
Make sure to use the GD > Ninja form widget, not the Ninja form widget’
    

    I have tried putting the form in the sidebar and also in the main part of the details page, still no luck
    

    Interestingly, I also BCC’d myself within ninja set up, and it won’t send that either when using the form instead of the button.
    

    The listings email has a code of {GD:listing_email} in ninja forms.
    
Within the CPT I have ‘contact email with a key of ’email’ and have now created a new email field with a key of ‘listing_email’ just in case. Still won’t work
    

    Any idea guys?  
    

		
	
    


    

			
				

    

	
    

		February 9, 2019 at 7:33 pm

		
		#467990

		
		
		
	
    


    


    

	
    

		
		
    Alex Rollin
    Moderator
    
		
		
     Post count: 27815
    
	
    

	
    

		
		
    Use the Tabs UI to add a shortcode for the form
    
I tested it and it works fine, the button one.
    
https://wpgeodirectory.com/docs-v2/places/tabs/
    

		
	
    


    

			
				

    

	
    

		February 9, 2019 at 7:49 pm

		
		#467993

		
		
		
	
    


    


    

	
    

		
		
    Pete Williams
    Full Member
    
		
		
     Post count: 34
    
	
    

	
    

		
		
    Thanks Alex, but I had already tried that a few hours back when I found that article (blindly following the guide), but I’m not using a tabbed layout, so pointless
    

    My details page is a page with a sidebar, where I’ve put the widget and the sort code in both, still no email to the listing email, unless I use a button
    

    Also, as mentioned before, unless I really HAVE to use a button, I would much rather display the actual form, ideally in the sidebar
    

    Thanks!
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 7 posts - 1 through 7 (of 7 total)
	


	


		
	





		
				

			

				

					
We have moved to a support ticketing system and our forums are now closed.

					Open Support Ticket
				

			

		

		
	
	


			

			


		
	


		

	

	


















	
	
			
			
			
			
                        
            
            
                
                

                    

                        20% Discount Offer
                        
                        
                    

                    

                        Hurry! Get your 20% discount before it expires.
                        Get 20% Discount