How to create a donation form with Elementor pro and Dynamic ooo

In this tutorial, I'll walk you through the process of creating a donation form using Elementor Pro and Dynamic Content. What's exciting about this process is that comments left on the donation form will automatically be posted to the donation event page.

Creation of a Custom Post

Let's start by differentiating donations from other content. To do this, we will install the free “CPTUI” plugin that will allow us to create a type of personalized content for donations.

  1. CPTUI Installation: Find the plugin in the WordPress repository and activate it.
  2. Create a Custom Content Type: Access the tab generated by the plugin and configure a new content type called “Donations”. Define its attributes and characteristics according to your needs.

Creating Tables for Donation Amount and Event

To view the donated amount and the corresponding event in an organized way, we will create two new tables using custom code.

  1. Installing Code Snippets: Use the free “Code Snippets” plugin from the WordPress repository.
  2. Add Custom Code: Copy and paste the code provided in the tutorial into a new code snippet. This will generate the necessary tables in the donations section.

Setting up Payments with Stripe

If you choose to use Stripe to process payments, make sure you configure your API Keys correctly in the integrations section of Dynamic Content.

  1. API Keys Configuration: Access the Dynamic Content integrations section and provide the public and secret keys generated from the Stripe developer tool.
  2. Save settings: Once the keys have been entered, save the settings to enable payments through Stripe.

Donation Event Page Design

Now, we will create the design of the event page where the event details and the donation form will be displayed.

  1. Creating the Event Ticket: Create a new post and customize its content with Elementor.
  2. Page Structure: Use Elementor to design the structure of the page, organizing the elements according to your preferences and needs.

Creation of the Donation Form

Finally, we will set up the donation form using Elementor and Dynamic Content to collect the necessary data and process payments.

  1. Form Configuration: Use Elementor to design and customize the donation form, making sure to include the necessary fields such as amount to donate and credit card details.
  2. Data Saving Settings: Use Dynamic Content to set up redirection and save form data, including the amount donated and the corresponding event.
  3. Message Personalization: Be sure to customize confirmation and success messages to provide an optimal user experience.

And that's it! With these steps, you will be ready to create and manage donation forms effectively using Elementor and Dynamic Content. If you have any questions, feel free to leave them in the comments!

Remember to support the content by liking, subscribing to the channel and activating notifications for future tutorials. Thank you for your interest and support!

				
					// Agregar columnas personalizadas después del título
function agregar_columnas_personalizadas($columns) {
    $new_columns = array();
    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;
        // Insertar la nueva columna 'importe_donado' después de la columna 'title'
        if ($key === 'title') {
            $new_columns['importe_donado'] = 'Importe Donado';
        }
    }
    // Agregar otra columna 'id_evento' después de la columna 'importe_donado'
    $new_columns['id_evento'] = 'Evento de donación';
    return $new_columns;
}
add_filter('manage_donaciones_posts_columns', 'agregar_columnas_personalizadas');

// Mostrar los valores de las metaetiquetas en las nuevas columnas
function mostrar_valores_metaetiquetas($column, $post_id) {
    // Verificar si la columna es 'importe_donado'
    if ($column === 'importe_donado') {
        // Obtener el valor de la metaetiqueta 'importe' para este post
        $importe_donado = get_post_meta($post_id, 'importe', true);
        // Agregar ' euros' al valor
        $importe_donado_with_euros = $importe_donado . ' euros';
        // Mostrar el valor en la columna
        echo $importe_donado_with_euros;
    }
    // Verificar si la columna es 'id_evento'
    elseif ($column === 'id_evento') {
        // Obtener el valor de la metaetiqueta 'id_evento' para este post
        $id_evento = get_post_meta($post_id, 'evento', true);
        // Mostrar el valor en la columna
        echo $id_evento;
    }
}
add_action('manage_donaciones_posts_custom_column', 'mostrar_valores_metaetiquetas', 10, 2);
				
			
				
					<script>
var elementosH3 = document.querySelectorAll('h3.elementor-post__title');
elementosH3.forEach(function(h3) {

    var enlace = h3.querySelector('a');
    if (enlace) {
        enlace.removeAttribute('href');
    }
});
</script>
				
			
Share in your social networks

Leave a Comment