Hide Fields

Resolved

(@gooloode)

Hi,

I use PODS to add a Beauty Profile to my user’s comments through wpDiscuz. But no matter what i do, i can’t get the form to get any styling, and it shows fields like Display Name, E-Mail, and Password, which shouldn’t be there. It’s an extension to the user profile (Type User), but i actually have made quite some changes to get this going, but no matter what i do, the form can’t be styled and the fields won’t go away.

My Pod Template:

<div class="beauty-profile-form">
  <h2>Dein Beautyprofil</h2>
  
  <form action="" method="post" class="pods-submittable pods-form pods-form-front pods-form-pod-user pods-submittable-ajax" id="pods-form-user-1">
    <!-- Hidden fields for PODS form processing -->
    <input name="action" type="hidden" value="pods_admin">
    <input name="method" type="hidden" value="process_form">
    <input name="do" type="hidden" value="save">
    <input name="_pods_nonce" type="hidden" value="{@_pods_nonce}">
    <input name="_pods_pod" type="hidden" value="user">
    <input name="_pods_id" type="hidden" value="{@ID}">
    <input name="_pods_uri" type="hidden" value="{@_pods_uri}">
    <input name="_pods_form" type="hidden" value="alter,hauttyp_gesicht,hauttyp_koerper,haartyp,haarstruktur,haardicke,hautton,augenfarbe,hautprobleme">
    <input name="_pods_location" type="hidden" value="{@_pods_location}">
    
    <div class="beauty-section">
      <h3>Hauttyp & Eigenschaften</h3>
      
      {@alter}
      {@hauttyp_gesicht}
      {@hauttyp_koerper}
      {@hautton}
      {@hautprobleme}
    </div>
    
    <div class="beauty-section">
      <h3>Haar & Augen</h3>
      
      {@haartyp}
      {@haarstruktur}
      {@haardicke}
      {@augenfarbe}
    </div>
    
    <div class="pods-submit">
      <input type="submit" value="Profil aktualisieren" class="pods-submit-button">
    </div>
  </form>
</div>

Additional CSS and JS:

<script>
jQuery(document).ready(function($) {
  function styleBeautyProfile() {
    $('.beauty-profile-form .pods-form-ui-field').addClass('beauty-styled-field');
    $('.beauty-profile-form .pods-form-ui-field-type-pick').each(function() {
      $(this).wrap('<div class="beauty-field"></div>');
    });
    $('.beauty-profile-form .description').each(function() {
      $(this).insertAfter($(this).prev('.pods-form-ui-field'));
    });
  }

  // Initial styling
  styleBeautyProfile();

  // Watch for dynamic content changes
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.type === 'childList') {
        styleBeautyProfile();
      }
    });
  });

  observer.observe(document.querySelector('.beauty-profile-form'), {
    childList: true,
    subtree: true
  });
});
</script>
<style>
/* Reset and base styles */
.beauty-profile-form {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.beauty-profile-form h2 {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

.beauty-section {
  margin-bottom: 30px;
}

.beauty-section h3 {
  font-size: 20px;
  color: #444;
  margin-bottom: 20px;
}

/* Field styles */
.beauty-profile-form .pods-form-ui-field-type-pick,
.beauty-profile-form select,
.beauty-profile-form input[type="text"],
.beauty-profile-form input[type="email"],
.beauty-profile-form input[type="password"] {
  width: 100% !important;
  padding: 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  background-color: #f9f9f9 !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1.5 !important;
  margin-bottom: 15px !important;
}

.beauty-profile-form .pods-form-ui-field-type-pick:focus,
.beauty-profile-form select:focus,
.beauty-profile-form input[type="text"]:focus,
.beauty-profile-form input[type="email"]:focus,
.beauty-profile-form input[type="password"]:focus {
  border-color: #0073aa !important;
  box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2) !important;
  outline: none !important;
}

.beauty-profile-form .pods-form-ui-label {
  display: block !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
  color: #333 !important;
}

.beauty-profile-form .description {
  font-size: 13px !important;
  color: #666 !important;
  margin-top: 5px !important;
  margin-bottom: 15px !important;
}

/* Checkbox styles */
.beauty-profile-form .pods-field.pods-boolean {
  margin-bottom: 10px !important;
}

.beauty-profile-form .pods-field.pods-boolean label {
  display: flex !important;
  align-items: center !important;
  font-weight: normal !important;
}

.beauty-profile-form .pods-field.pods-boolean input[type="checkbox"] {
  margin-right: 8px !important;
}

/* Submit button */
.beauty-profile-form .beauty-button,
.beauty-profile-form input[type="submit"] {
  background-color: #0073aa !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 12px 24px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  text-transform: none !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1.5 !important;
  width: 100% !important;
  margin-top: 20px !important;
}

.beauty-profile-form .beauty-button:hover,
.beauty-profile-form input[type="submit"]:hover {
  background-color: #005a87 !important;
}

.beauty-profile-form .pods-form-ui-row-name-user_login,
.beauty-profile-form .pods-form-ui-row-name-user_nicename,
.beauty-profile-form .pods-form-ui-row-name-display_name,
.beauty-profile-form .pods-form-ui-row-name-user_pass,
.beauty-profile-form .pods-form-ui-row-name-user_email,
.beauty-profile-form .pods-form-ui-row-name-user_url {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .beauty-profile-form {
    padding: 20px;
  }
}
</style>

Additional functions.php Snippet:

add_filter('pods_form_fields', 'filter_beauty_profile_fields', 10, 2);

function filter_beauty_profile_fields($fields, $pod) {
    if ($pod->pod === 'user') {
        $allowed_fields = array(
            'alter', 'hauttyp_gesicht', 'hauttyp_koerper', 'haartyp', 
            'haarstruktur', 'haardicke', 'hautton', 'augenfarbe', 'hautprobleme'
        );
        
        foreach ($fields as $field_name => $field) {
            if (!in_array($field_name, $allowed_fields)) {
                unset($fields[$field_name]);
            }
        }
    }
    return $fields;
}

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

Plugin Support

pdclark

(@pdclark)

1 year, 1 month ago

The below shortcode, [beauty-form] should get you closer to the desired result if installed to functions.php or as a plugin:

<?php
/**
 * Plugin Name: Beauty Profile Form
 * Description: <code>[beauty-form]</code>
 */
add_shortcode(
	'beauty-form',
	function( $atts, $content, $tag ) {
		if ( ! is_user_logged_in() ) {
			return '';
		}
		ob_start();
		$user_pod = pods( 'user', get_current_user_id() );

		?>
		<div class="beauty-profile-form">
			<h2>Dein Beautyprofil</h2>
		<?php

		// @see https://docs.pods.io/code/pods/form/
		echo $user_pod->form(
			[
				// For a field description, a label can be set like this:
				'alter' => [
					'type' => 'paragraph',
					'label' => '<h3>Hauttyp & Eigenschaften</h3><strong>An Alter-nate name</strong><div class="description">A  description</div>',
				],
				'hauttyp_gesicht',
				'hauttyp_koerper',
				'hautprobleme',
				'haartyp' => [
					'type' => 'paragraph',
					'label' => '<h3>Haar & Augen</h3><strong>Haartyp</strong><div class="description">A  description</div>'
				],
				'haarstruktur',
				'haardicke',
				'hautton',
				'augenfarbe',
			],
			'Profil aktualisieren'
		);

		?>
		</div>
		<?php

		if ( ! has_action( 'wp_footer', 'beauty_form_styles' ) ) {
			add_action( 'wp_footer', 'beauty_form_styles' );
		}
		return ob_get_clean();
	}
);

function beauty_form_styles() {
	?>
<style>
	.beauty-profile-form {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		max-width: 800px;
		margin: 0 auto;
		padding: 30px;
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
	}

	.beauty-profile-form h2 {
		font-size: 24px;
		color: #333;
		text-align: center;
		margin-bottom: 30px;
	}

	.beauty-profile-form h3 {
		font-size: 20px;
		color: #444;
		margin: 30px 0 20px 0;
	}

	/* Field styles */
	.beauty-profile-form .pods-form-ui-field-type-pick,
	.beauty-profile-form select,
	.beauty-profile-form input[type="text"],
	.beauty-profile-form input[type="email"],
	.beauty-profile-form input[type="password"] {
		width: 100%;
		padding: 12px !important;
		border: 1px solid #ddd !important;
		border-radius: 6px !important;
		font-size: 15px !important;
		background-color: #f9f9f9 !important;
		transition: all 0.3s ease !important;
		box-shadow: none !important;
		height: auto !important;
		line-height: 1.5 !important;
		margin-bottom: 15px !important;
	}
	.beauty-profile-form input.pods-form-ui-field-type-pick {
		width: auto;
	}

	.beauty-profile-form .pods-form-ui-field-type-pick:focus,
	.beauty-profile-form select:focus,
	.beauty-profile-form input[type="text"]:focus,
	.beauty-profile-form input[type="email"]:focus,
	.beauty-profile-form input[type="password"]:focus {
		border-color: #0073aa !important;
		box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2) !important;
		outline: none !important;
	}

	.beauty-profile-form .pods-form-ui-label {
		display: block !important;
		font-weight: 500 !important;
		margin-bottom: 8px !important;
		color: #333 !important;
	}

	.beauty-profile-form .description {
		font-size: 13px !important;
		color: #666 !important;
		margin-top: 5px !important;
		margin-bottom: 15px !important;
	}

	/* Checkbox styles */
	.beauty-profile-form .pods-field.pods-boolean {
		margin-bottom: 10px !important;
	}

	.beauty-profile-form .pods-field.pods-boolean label {
		display: flex !important;
		align-items: center !important;
		font-weight: normal !important;
	}

	.beauty-profile-form .pods-field.pods-boolean input[type="checkbox"] {
		margin-right: 8px !important;
	}

	/* Submit button */
	.beauty-profile-form input[type="submit"] {
		background-color: #0073aa !important;
		color: white !important;
		border: none !important;
		border-radius: 6px !important;
		padding: 12px 24px !important;
		font-size: 16px !important;
		font-weight: 500 !important;
		cursor: pointer !important;
		transition: background-color 0.3s ease !important;
		text-transform: none !important;
		box-shadow: none !important;
		height: auto !important;
		line-height: 1.5 !important;
		width: 100% !important;
		margin-top: 20px !important;
	}

	.beauty-profile-form input[type="submit"]:hover {
		background-color: #005a87 !important;
	}

	/* Responsive adjustments */
	@media (max-width: 768px) {
		.beauty-profile-form {
			padding: 20px;
		}
	}
</style>
	<?php
}

The pods_form_fields filter should be removed, as fields to display are defined when passed to the pods()->form() method (or in the shortcode fields argument), and the filter had an error in it where field names were removed by numeric key rather than field name, causing all fields to display instead.
Descriptions with class description are defined in HTML labels in the example, so modifying HTML structure with JavaScript is not necessary.
Form elements get output by the ->form() method, not by magic tags, and the user to be edited is defined by $user_pod = pods( 'user', get_current_user_id() ); , so hidden HTML fields and manual HTML output is not necessary.
There are sufficient classes to attach styles, so wrapping form elements with additional elements in a MutationObserver is probably not necessary.
If you inspect the styles of the form elements in the browser web inspector, the computed tab will reveal which styles are applied to the selected element, which styles were overridden, and the source files and line numbers for each rule.
There may have been confusion between magic tags like {@alter} versus outputting form elements for those fields. {@alter} will output a formatted value, rather than a field. If outputting formatted values is still desired, the pods()->template() method can be used like echo $user_pod->template( null, '{@alter}...etc...' ); or a single field value can be output like echo $user_pod->display( 'alter' ); or echo $user_pod->field( 'alter' ); for a raw value. These are likely not necessary if the desired result was to output a form with editable values for the current user.

Thread Starter

Nico

(@gooloode)

1 year, 1 month ago

Hi, i’ve now made some adaptions, but your code was completely correct, thank you. I still though have an issue, that i can’t find an (obvious) reason to and that’s a huge heading before the form labels.

/**
 * Plugin Name: Beauty Profile Form
 * Description: <code>[beauty-form]</code> - Displays a beauty profile form for logged-in users
 * Version: 1.0.0
 */

// Register the shortcode
add_shortcode(
    'beauty-form',
    function( $atts, $content, $tag ) {
        // Only show form for logged-in users
        if ( ! is_user_logged_in() ) {
            return '<p>Bitte melde dich an, um dein Beautyprofil zu bearbeiten.</p>';
        }
        
        // Start output buffering
        ob_start();
        
        // Get the current user's pod
        $user_pod = pods( 'user', get_current_user_id() );
        
        // Display the form
        ?>
        <div class="beauty-profile-form">
            <h2>Dein Beautyprofil</h2>
            
            <div class="beauty-form-container">
                <?php
                // Output the form using the Pods form() method
                echo $user_pod->form(
                    [
                        // First section - Hauttyp & Eigenschaften
                        '__heading_1' => [
                            'type' => 'html',
                            'value' => '<h3 class="beauty-section-heading">Hauttyp & Eigenschaften</h3>'
                        ],
                        'alter',
                        'hauttyp_gesicht',
                        'hauttyp_koerper',
                        'hautton',
                        'hautprobleme',
                        
                        // Second section - Haar & Augen
                        '__heading_2' => [
                            'type' => 'html',
                            'value' => '<h3 class="beauty-section-heading">Haar & Augen</h3>'
                        ],
                        'haartyp',
                        'haarstruktur',
                        'haardicke',
                        'augenfarbe',
                    ],
                    'Profil aktualisieren'
                );
                ?>
            </div>
        </div>
        <?php
        
        // Add styles to the footer
        if ( ! has_action( 'wp_footer', 'beauty_form_styles' ) ) {
            add_action( 'wp_footer', 'beauty_form_styles' );
        }
        
        // Return the buffered output
        return ob_get_clean();
    }
);

/**
 * Add CSS styles to the footer
 */
function beauty_form_styles() {
    ?>
<style>
    /* Base container styling */
    .beauty-profile-form {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        max-width: 100%;
        margin: 0 auto;
        padding: 30px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        /* Fix for large gap - use flexbox layout */
        display: flex;
        flex-direction: column;
    }

    /* Main heading */
    .beauty-profile-form h2 {
        font-size: 24px;
        color: #333;
        text-align: center;
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }
    
    /* Form container - reduces gap */
    .beauty-form-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Section headings */
    .beauty-section-heading {
        font-size: 20px !important;
        color: #444 !important;
        margin: 25px 0 15px 0 !important;
        padding-top: 20px !important;
        border-top: 1px solid #eee !important;
    }
    
    /* First section heading - no top border or padding */
    .beauty-section-heading:first-of-type {
        border-top: none !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Remove extra space from HTML fields */
    .pods-field-option-html {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }
    
    /* Remove any empty paragraphs that might cause spacing */
    .beauty-profile-form p:empty {
        display: none !important;
    }

    /* Field styles */
    .beauty-profile-form .pods-form-ui-field-type-pick,
    .beauty-profile-form select,
    .beauty-profile-form input[type="text"],
    .beauty-profile-form input[type="email"],
    .beauty-profile-form input[type="password"] {
        width: 100% !important;
        padding: 12px !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        font-size: 15px !important;
        background-color: #f9f9f9 !important;
        transition: all 0.3s ease !important;
        box-shadow: none !important;
        height: auto !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
    }
    
    /* Fix for checkbox inputs */
    .beauty-profile-form input[type="checkbox"] {
        width: auto !important;
        margin-right: 8px !important;
    }

    /* Focus states */
    .beauty-profile-form .pods-form-ui-field-type-pick:focus,
    .beauty-profile-form select:focus,
    .beauty-profile-form input[type="text"]:focus,
    .beauty-profile-form input[type="email"]:focus,
    .beauty-profile-form input[type="password"]:focus {
        border-color: #0073aa !important;
        box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2) !important;
        outline: none !important;
    }

    /* Label styling */
    .beauty-profile-form .pods-form-ui-label {
        display: block !important;
        font-weight: 500 !important;
        margin-bottom: 8px !important;
        color: #333 !important;
    }

    /* Description text */
    .beauty-profile-form .description {
        font-size: 13px !important;
        color: #666 !important;
        margin-top: 5px !important;
        margin-bottom: 15px !important;
    }

    /* Fix for the checkbox list styling */
    .beauty-profile-form .pods-checkbox-pick {
        list-style: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    .beauty-profile-form .pods-checkbox-pick__option {
        list-style-type: none !important;
        list-style-image: none !important;
        margin-bottom: 8px !important;
        position: relative !important;
        padding-left: 0 !important;
    }
    
    /* Remove the pink arrows/bullets */
    .beauty-profile-form .pods-checkbox-pick__option::before,
    .beauty-profile-form .pods-checkbox-pick__option::after,
    .beauty-profile-form li::marker,
    .beauty-profile-form .pods-checkbox-pick li::marker,
    .beauty-profile-form .pods-checkbox-pick__option::marker {
        display: none !important;
        content: none !important;
        color: transparent !important;
    }
    
    /* Checkbox container */
    .beauty-profile-form .pods-field.pods-boolean {
        margin-bottom: 10px !important;
    }

    /* Checkbox labels */
    .beauty-profile-form .pods-field.pods-boolean label,
    .beauty-profile-form .pods-checkbox-pick__option label {
        display: flex !important;
        align-items: center !important;
        font-weight: normal !important;
    }

    /* Submit button */
    .beauty-profile-form input[type="submit"] {
        background-color: #0073aa !important;
        color: white !important;
        border: none !important;
        border-radius: 6px !important;
        padding: 12px 24px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: background-color 0.3s ease !important;
        text-transform: none !important;
        box-shadow: none !important;
        height: auto !important;
        line-height: 1.5 !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    .beauty-profile-form input[type="submit"]:hover {
        background-color: #005a87 !important;
    }
    
    /* Field container spacing */
    .beauty-profile-form .pods-field__container {
        margin-bottom: 15px !important;
    }
    
    /* Additional selector to override Divi theme styling */
    .et-db #et-boc .et-l .beauty-profile-form .pods-checkbox-pick,
    .et-db #et-boc .et-l .beauty-profile-form .pods-checkbox-pick__option {
        list-style: none !important;
        list-style-type: none !important;
        padding-left: 0 !important;
    }
    
    .et-db #et-boc .et-l .beauty-profile-form .pods-checkbox-pick__option::before {
        display: none !important;
        content: none !important;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .beauty-profile-form {
            padding: 20px;
        }
    }
</style>
    <?php
}

/**
 * Add the beauty profile data to wpDiscuz comments
 */
add_filter('wpdiscuz_after_comment_author', 'beauty_profile_fields_display', 10, 2);

function beauty_profile_fields_display($output, $comment) {
    $user_id = $comment->user_id;

    // Only proceed if this is a registered user
    if (!$user_id) {
        return $output;
    }
    
    // Get PODS data for the user
    $user_pod = pods('user', $user_id);
    
    if (!$user_pod) {
        return $output;
    }
    
    // Array of fields to display
    $single_fields = [
        'alter' => 'Alter',
        'hauttyp_gesicht' => 'Hauttyp Gesicht',
        'hauttyp_koerper' => 'Hauttyp Körper',
        'haartyp' => 'Haartyp',
        'haarstruktur' => 'Haarstruktur',
        'haardicke' => 'Haardicke',
        'augenfarbe' => 'Augenfarbe'
    ];
    
    $additional_info = '';
    
    // Process single select fields
    foreach ($single_fields as $field_name => $field_label) {
        $field_value = $user_pod->field($field_name);
        if (!empty($field_value)) {
            $additional_info .= sprintf(
                '<div class="user-%s">%s: %s</div>',
                esc_attr($field_name),
                esc_html($field_label),
                esc_html($field_value)
            );
        }
    }
    
    // Process multiple select field
    $hautprobleme = $user_pod->field('hautprobleme');
    if (!empty($hautprobleme)) {
        $hautprobleme_value = is_array($hautprobleme) ? implode(', ', $hautprobleme) : $hautprobleme;
        $additional_info .= '<div class="user-hautprobleme">Hautprobleme: ' . esc_html($hautprobleme_value) . '</div>';
    }
    
    // Add the information to the output if there's any information to display
    if ($additional_info) {
        $output .= '<div class="user-profile-info">' . $additional_info . '</div>';
    }
    
    return $output;
}

/**
 * Add styles for the beauty profile info in comments
 */
add_action('wp_head', 'beauty_profile_comment_styles');

function beauty_profile_comment_styles() {
    ?>
<style>
    /* Styling for beauty profile info in comments */
    .user-profile-info {
        font-size: 12px;
        margin-top: 5px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .user-profile-info > div {
        background-color: #f5f5f5;
        padding: 3px 8px;
        border-radius: 4px;
        color: #666;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    @media (max-width: 480px) {
        .user-profile-info {
            flex-direction: column;
            gap: 3px;
        }
        
        .user-profile-info > div {
            margin-right: 0;
        }
    }
</style>
    <?php
}

Screenshot

Plugin Support

pdclark

(@pdclark)

1 year, 1 month ago

If you would like to do it that way, create a field of type html on the user Pod named __heading_1, then set HTML Content under HTML Content Options tab when editing the field to:

Wenn Sie das so machen möchten, erstellen Sie auf dem Benutzer-Pod ein Feld des Typs html mit dem Namen __heading_1, und setzen Sie dann bei der Bearbeitung des Feldes auf der Registerkarte HTML Content Options den Wert HTML Content:

<h3 class="beauty-section-heading">Hauttyp &amp; Eigenschaften</h3>

Then refer to the field by name only:

Beziehen Sie sich dann nur auf den Namen des Feldes:

echo $user_pod->form(
	[
		'__heading_1',
		'alter'
	],
	'Profil aktualisieren'
);

Otherwise, the original example achieves the same effect without adding adding an additional field, as the label option can take HTML:

Andernfalls erzielt das ursprüngliche Beispiel denselben Effekt, ohne dass ein zusätzliches Feld hinzugefügt werden muss, da die Option label HTML verwenden kann:

echo $user_pod->form(
	[
		'alter' => [
			'type' => 'paragraph',
			'label' => '<h3>Hauttyp &amp; Eigenschaften</h3><strong>An Alter-nate name</strong><div class="description">A  description</div>',
		],
		'hauttyp_gesicht',
	],
	'Profil aktualisieren'
);

…as <h3> within…

…als <h3> innerhalb…

<div class="beauty-profile-form">

can be targeted in CSS as .beauty-profile-form h3, or the class can be added if one wants to write beauty more.

kann in CSS als .beauty-profile-form h3 ausgerichtet werden, oder die Klasse kann hinzugefügt werden, wenn man beauty mehr schreiben will.

Please refer to the documentation for the ->form() method at https://docs.pods.io/code/pods/form/, as it contains the valid options for type, which refers to the wrapping element. It does not take html as a valid option. The link was in the comment that was removed.

Bitte lesen Sie die Dokumentation für die Methode ->form() unter https://docs.pods.io/code/pods/form/, da sie die gültigen Optionen für type enthält, die sich auf das Wrapping-Element beziehen. html wird nicht als gültige Option akzeptiert. Der Link war in dem Kommentar, der entfernt wurde.

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

The topic ‘Hide Fields’ is closed to new replies.

Tags