How to customize a POWR App with CSS and Javascript
POWR Pro and Business customers can add custom code to any POWR App. You can add CSS in Design > Advanced > Custom CSS. You can add Javascript in Design > Advanced > Custom JS.
In POWR Formbuilder app:
Go to "Settings" > scroll down > you will see "Custom CSS & JS"
field. If you would like to add any JS customization, kindly contact the Support Team at support@powr.io. As security is a top concern at POWR, JS scripts will be added to your app only after verification.
What kind of customizations are possible?
The Custom CSS option is great for adding additional styling to your Apps that isn't possible via the regular Design settings. By adding your own CSS to a POWR App, you can change anything from fonts to display options and padding to text-alignment.
The Custom JS option is ideal for adding tracking links, such as Google Analytics codes. Only use this option if you have advanced Javascript skills.
You can also use custom HTML in any text field inside the POWR Editor. This lets you add links, new CSS classes, images, etc. right into a POWR App.
Dos and Don'ts of using custom code in POWR Apps
- In the Custom CSS box, don't include script tags.
- Do add selectors and properties directly into the Custom CSS box.
- In the Custom JS box, don't include script tags or text that isn't part of the actual JS code.
- Do feel free to use jQuery code in the Custom JS box.
Quick guide: How to select elements and style them with custom CSS
In your browser, use the Inspect Element option to look up an element's class or id.
Once you have determined which class or id you need to select to style a specific element in your App, go to Design > Advanced and add the class or id to the Custom CSS Box.
For classes, use the . symbol to select an element using the class. For id's, use the # symbol to select the element.
For example, if your element's code looks like this:
<div class="alert" id="spam-warning">Some code and text and things in here</div>
You can select the element using #spam-warning { } or select all elements using the alert class, like this: .alert { }.
Sometimes, an element will have existing style rules already defined. In that case, you can add !important to the end of a style rule to override the existing rule, like this: #spam-warning { width: 100% !important; }
Common CSS hacks
Custom CSS lets you do some cool things with your Apps for which a control in the Design settings does not (yet) exist. Here are examples of custom CSS hacks that POWR users like to add to their Apps:
| Issue | CSS Code |
|---|
All Apps:
| Add scrollbar | #appView {height: 500px; overflow-y: scroll;} |
| Align App on page | #appView {float: left !important;} |
| Disable all links in a App | #appView {pointer-events: none; cursor: default;} |
Form Builder:
| Right-align text (block labels) | #appView {text-align: right} |
| Right-align text (inline labels) | input {text-align: right} |
| Put File Upload buttons side-by-side | .fileUploadParent {width: 49% !important;} |
Gallery / Microblog:
| Remove individual Share Buttons | .fa-twitter, .fa-facebook, .fa-google-plus, .fa-linkedin, .fa-pinterest, .fa-reddit, .fa-delicious, .fa-tumblr {display: none;} |
| Make lightbox bigger |
@media screen and (min-width: 768px) { #appView {min-height: 600px !important;} (Set the min-height to something bigger than the highest image in the Gallery. Choose a width that is less wide than the full App width.) |
Slider:
| Make images width: 100% | #appView {margin: 0px;} .nodeImageParent img {width: 100%;} |
| Remove Previous/Next buttons | .next, .prev {display: none;} |
| Slow down transition between slides | .animated {animation-duration: 3s !important;} |
How to center the countdown timer in my cart?
Please use the following code.
.countdownTimer{text-align:center}
How to adjust the X button in Notification bar app for mobile phone?
The following CSS will help:
#appView .powrNotificationBar .close {
position: unset;
font-size: 17px;
opacity: 1;
top: 10px;
}
Before: Text and X button are overlapping
After: The overlay disappeared
How to add more space into location information on mobile?
The following CSS will help:
.gm-style-iw-d {
height: 150px;
}
Before: No space to display links
After: The text is rendering fine on mobile
More articles on JS and CSS:
Capture Page URL in Hidden Form Field
Comments
11 comments
I need to change the list from left to right
Hi Weducatel! You should be able to right-align text in the dropdown by adding this line of CSS to Design > Advanced > Custom CSS: select {direction: rtl;}
Hi,
I am using the POWR Map plugin in Wix.
By default the map keeps its proportions when you increase the height or width but I'd like to set the height and width of the map manually using Custom CSS. Could you advise me what line of code I should use?
Thanks.
In the custom JS, how do we target the form for an on submit (or on submit button click) event?
e.g.,
$('.realForm').on('submit', function(e) {
console.log('form submitted');
});
I found this in and old doc for how to track GA events for forms:
$(document).on('click','#submitButton',function(){
CUSTOM GOOGLE ANALYTICS CODE GOES HERE
});
We don't currently offer support for custom code and I unfortunately can't guarantee that this will work. Perhaps another site visitor can advise better on how to successfully set this up.
Is there any way to use JS code to add locations to the map?
I have a list of locations that will be constantly growing, and I want to be able to dynamically include all of them as locations on the map without having to upload a new CSV every other day.
If not JS, is there any way to programatically add locations like this?
Hi Christian!
This unfortunately isn't possible yet. It sounds like you are trying to connect to a Maps API to add more locations. We don't have an open API for any of our plugins at this time. The CSV upload would be your best option here. I will put in a feature request for an API and/or Zapier integration that could make this possible. It's definitely not a bad idea!
I'm using the Form Builder app in Wix for a payment form on a client's site. I'm wondering if it's possible to use custom JS to use form field entry values to set the payment amount. The form I'm working on has three fields whose values need to be added together. I know I can just set it so that the user can enter the total in the payment window, but I would like to spare the user a step if possible.
Hi Jennifer!
The best way to do this is to use the Price Change setting in any of our options fields - Checkbox, Multiple Checkboxes, Dropdown, Multiple Choice: https://help.powr.io/hc/en-us/articles/115002371548-How-to-Add-Pricing-Options-to-Forms
We don't recommend using custom JS to add customizations to the payment flow.
Hi there....
Been trying the free version for FAQ widget.
Really liking it so far.
I have some questions regarding your FAQ accordion.
Some issues I am experiencing....
1) If inserting a video using HTML in the ANSWER section, when clicking on the QUESTION, how do I get the video to automatically play?
2) If I collapse the question, the video continues to play, how can I prevent that?
3) If I open the next question, which automatically collapse the previous question, the video also continues to play, how do I prevent that from happening?
4) Is there a way I can create categories?
EXAMPLE:
"CUSTOMER TESTIMONIALS" (When clicked on will open sub answers.)
ANN - customer video - HTML
PAUL - customer video
BILL - Customer video
etc......
"WHAT THE DOCTORS ARE SAYING" (When clicked on will open sub answers.)
Dr, Pete video - HTML
Dr. John video
Dr. Bill video
etc....
Hi, I am using Form Builder and I would like to remove the "back" button on a form.
Thank you!
Please sign in to leave a comment.