Title: Form formating issues
Last modified: August 31, 2016

---

# Form formating issues

 *  Resolved [Mike Seiler](https://wordpress.org/support/users/mike-seiler/)
 * (@mike-seiler)
 * [10 years ago](https://wordpress.org/support/topic/form-formating-issues/)
 * This is very puzzling. I have isolated the problem thus:
 * I have a form spread out over 4 tabby tabs.
    I change the font-style (for illustration
   purposes) in any of the 4 tabs. `<label for="test" style = "font-style: italic;"
   >Test: </label><input id="test" name="test" type="checkbox" value='1' />`
 * However , I can only set the label width on the first tab.
    `<label for="test"
   style = "width: 150px;" >Test: </label><input id="test" name="test" type="checkbox"
   value='1' />`
 * Put another way,
 * > `style = "width: 150px;"`
 * is ignored after the first tab, but
 * > `style = "font-style: italic;"`
 * works on any tab.
 * How can I set the width of the label on tabs > 1 ?
 * [https://wordpress.org/plugins/tabby-responsive-tabs/](https://wordpress.org/plugins/tabby-responsive-tabs/)

Viewing 9 replies - 1 through 9 (of 9 total)

 *  Plugin Author [cubecolour](https://wordpress.org/support/users/numeeja/)
 * (@numeeja)
 * [10 years ago](https://wordpress.org/support/topic/form-formating-issues/#post-7224465)
 * please post a link to the page on your site where I can see this
 *  Thread Starter [Mike Seiler](https://wordpress.org/support/users/mike-seiler/)
 * (@mike-seiler)
 * [10 years ago](https://wordpress.org/support/topic/form-formating-issues/#post-7224581)
 * I just love the cute picture of the tabby.
 * Here ya go!
    [http://genuinemoney.us/wp/membership-account/configure-sites-monitored/](http://genuinemoney.us/wp/membership-account/configure-sites-monitored/)
 * Thanks for looking into this.
 *  Plugin Author [cubecolour](https://wordpress.org/support/users/numeeja/)
 * (@numeeja)
 * [10 years ago](https://wordpress.org/support/topic/form-formating-issues/#post-7224586)
 * I don’t see
 *     ```
       style = "width: 150px;"
       ```
   
 * on any of your form field labels in your page source.
 * Have you tried adding the style to the stylesheet rather than inline?
 *  Thread Starter [Mike Seiler](https://wordpress.org/support/users/mike-seiler/)
 * (@mike-seiler)
 * [10 years ago](https://wordpress.org/support/topic/form-formating-issues/#post-7224592)
 * Hi cubecoloour,
 * Thanks for the quick response!
 * Yes, the 150px wide style is in the style sheet.
 * I’ve changed the code that illustrates the problem to
    `style = "border: 1px 
   solid black ; width: 200px"` Notice how there is a 200px wide box around “Don’t
   Monitor This Site:” on the first “Monitor” tab. The same inline style code does
   NOT put a 200px wide box around “HTML Format Email:” on the second “Email/Notify”
   tab
 * – Mike
 *  Plugin Author [cubecolour](https://wordpress.org/support/users/numeeja/)
 * (@numeeja)
 * [10 years ago](https://wordpress.org/support/topic/form-formating-issues/#post-7224605)
 * The styling of the tab content is independent of the tabs. The issue could be
   caused by invalid markup – see: [https://validator.w3.org/nu/?doc=http%3A%2F%2Fgenuinemoney.us%2Fwp%2Fmembership-account%2Fconfigure-sites-monitored%2F](https://validator.w3.org/nu/?doc=http%3A%2F%2Fgenuinemoney.us%2Fwp%2Fmembership-account%2Fconfigure-sites-monitored%2F)
 * It looks like the opening and closing form tags are not nested correctly, so 
   this may be the issue. Can you paste the content of the page from the WordPress
   text editor into a [pastebin](http://pastebin.com/) and post a link to it in 
   your reply so I can see the shortcodes and other elements
 *  Thread Starter [Mike Seiler](https://wordpress.org/support/users/mike-seiler/)
 * (@mike-seiler)
 * [10 years ago](https://wordpress.org/support/topic/form-formating-issues/#post-7224625)
 * You’re right. The problem is with the form tags.
 * The tabby short codes don’t let forms continue between tabs.
    The problem went
   away when I closed the form before the next tabby short code.
 * Take a look at this test page:
    [http://genuinemoney.us/wp/membership-account/tab-form-test/](http://genuinemoney.us/wp/membership-account/tab-form-test/)
   Notice how the form on the “Email/Notify” tab is now properly formatted.
 * However, our user interface specification calls for the one “OK” button at the
   bottom to be used to take action on the form fields on ALL the tabs.
 * I know this is asking a lot, but is there some way to keep the tabby tabs from
   implicitly closing a form at the end a tab? Put another way, is there a way that
   a tabby tab won’t act like a `</form>` ?
 *  Plugin Author [cubecolour](https://wordpress.org/support/users/numeeja/)
 * (@numeeja)
 * [10 years ago](https://wordpress.org/support/topic/form-formating-issues/#post-7224628)
 * Please paste the content of the page from the WordPress text editor into a [pastebin](http://pastebin.com/)
   and post a link to it in your reply so I can see the shortcodes and other elements.
 * I don’t know how you are including the opening and closing form tags on the page
   as My testing indicates tgat WordPress strips these out on saving a page. For
   this to work the opening form tag needs to be before the first tabby shortcode,
   the closing form tag needs to be after the tabbyending shortcode and all elements
   defined in the markup need to be correctly nested.
 * I have done a test using tabby responsive tabs with rhe wp libre forms plugin.
   A smsll tweak was required for the ‘forms’ post type to work with shortcodes (
   this is outlined at [https://wordpress.org/support/topic/shortcodes-within-the-form-post-type?replies=1#post-8221390](https://wordpress.org/support/topic/shortcodes-within-the-form-post-type?replies=1#post-8221390))
   I have been able to split the form over several tabs with no problems or formatting/
   styling issues, so I don’t think the issue is that the tabs are breaking the 
   form, but it looks to be more an implementation issue with how the form is added
 *  Thread Starter [Mike Seiler](https://wordpress.org/support/users/mike-seiler/)
 * (@mike-seiler)
 * [10 years ago](https://wordpress.org/support/topic/form-formating-issues/#post-7224647)
 * Your suggestion is spot on.
 * Putting the <form …> tag before the first tabby shortcode and the </form> tag
   after the last tabby shortcode does allow the form to span multiple tabs.
 * Also, I code only in the “Text” tab of the WordPress TinyMCE editor. Switching
   to the “Visual” tab messes up my code.
 * Here is the working multitab form code:
    [http://pastebin.com/9wjGCCih](http://pastebin.com/9wjGCCih)
   for [http://genuinemoney.us/wp/membership-account/tab-form-test/](http://genuinemoney.us/wp/membership-account/tab-form-test/)
 *  Plugin Author [cubecolour](https://wordpress.org/support/users/numeeja/)
 * (@numeeja)
 * [10 years ago](https://wordpress.org/support/topic/form-formating-issues/#post-7224648)
 * I’m glad you have this working now.
 * I would suggest creating a simple shortcode function in a plugin (or less optimally
   in your theme’s functions.php) to allow you to add the
 * `<form>` & `</form>` tags to the page without the risk of them being stripped
   out accidentally.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Form formating issues’ is closed to new replies.

 * ![](https://ps.w.org/tabby-responsive-tabs/assets/icon-256x256.jpg?rev=2682041)
 * [Tabby Responsive Tabs](https://wordpress.org/plugins/tabby-responsive-tabs/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tabby-responsive-tabs/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tabby-responsive-tabs/)
 * [Active Topics](https://wordpress.org/support/plugin/tabby-responsive-tabs/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tabby-responsive-tabs/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tabby-responsive-tabs/reviews/)

 * 9 replies
 * 2 participants
 * Last reply from: [cubecolour](https://wordpress.org/support/users/numeeja/)
 * Last activity: [10 years ago](https://wordpress.org/support/topic/form-formating-issues/#post-7224648)
 * Status: resolved